JavaScript DOM節(jié)點操作方法總結(jié)
節(jié)點類型主要有三種:元素節(jié)點,屬性節(jié)點和文本節(jié)點。
而對DOM的主要也就是圍繞元素節(jié)點和屬性節(jié)點的增刪改查。下面就分別從對元素節(jié)點的操作和對屬性節(jié)點的操作來介紹。
元素節(jié)點
查
在對DOM進行增刪改之前,首先要找到對應(yīng)的元素。具體的查找方法如下:
getElementByID() // 得到單個節(jié)點 getElementsByTagName() // 得到節(jié)點數(shù)組 NodeList getElementsByName() // 得到節(jié)點數(shù)組 NodeList
同時還可以利用元素節(jié)點的屬性獲取它的父子節(jié)點和文本節(jié)點:
子節(jié)點
Node.childNodes //獲取子節(jié)點列表NodeList; 注意換行在瀏覽器中被算作了text節(jié)點,如果用這種方式獲取節(jié)點列表,需要進行過濾 Node.firstChild //返回第一個子節(jié)點 Node.lastChild //返回最后一個子節(jié)點
父節(jié)點
Node.parentNode // 返回父節(jié)點 Node.ownerDocument //返回祖先節(jié)點(整個document)
同胞節(jié)點
Node.previousSibling // 返回前一個節(jié)點,如果沒有則返回null Node.nextSibling // 返回后一個節(jié)點
增
新增節(jié)點首先要創(chuàng)建節(jié)點,然后將新建的節(jié)點插入DOM中,所以下面分別介紹創(chuàng)建節(jié)點和插入節(jié)點的方法,復制節(jié)點的方法也在創(chuàng)建節(jié)點中進行介紹。
創(chuàng)建節(jié)點
createElement() // 按照指定的標簽名創(chuàng)建一個新的元素節(jié)點
創(chuàng)建代碼片段(為避免頻繁刷新DOM,可以先創(chuàng)造代碼片段,完成所有節(jié)點操作之后統(tǒng)一添加到DOM中)
createDocumentFragment()
復制節(jié)點
clonedNode = Node.cloneNode(boolean) // 只有一個參數(shù),傳入一個布爾值,true表示復制該節(jié)點下的所有子節(jié)點;false表示只復制該節(jié)點
插入節(jié)點
/*插入node*/ parentNode.appendChild(childNode); // 將新節(jié)點追加到子節(jié)點列表的末尾 parentNode.insertBefore(newNode, targetNode); //將newNode插入targetNode之前 /*插入html代碼*/ node.insertAdjacentHTML('beforeBegin', html); //在該元素之前插入代碼 node.insertAdjacentHTML('afterBegin', html); //在該元素的第一個子元素之前插入代碼 node.insertAdjacentHTML('beforeEnd', html); //在該元素的最后一個子元素之后插入代碼 node.insertAdjacentHTML('afterEnd', html); //在該元素之后插入代碼
替換節(jié)點
parentNode.replace(newNode, targetNode); //使用newNode替換targetNode
刪
移除節(jié)點
parentNode.removeChild(childNode); // 移除目標節(jié)點 node.parentNode.removeChild(node); //在不清楚父節(jié)點的情況下使用
屬性節(jié)點
操作屬性節(jié)點,就是對DOM樣式進行增刪改查。對于行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式有不同的操作方法;各種方法獲得的樣式也有可讀可寫和只讀之分。
直接獲取CSS樣式
node.style.color // 可讀可寫
Style本身的屬性和方法
node.style.cssText //獲取node行內(nèi)樣式字符串 node.style.length //獲取行內(nèi)樣式個數(shù) node.style.item(0) //獲取指定位置的樣式
獲取和修改元素樣式
HTML5為元素提供了一個新的屬性:classList 來實現(xiàn)對元素樣式表的增刪改查。操作如下:
node.classList.add(value); //為元素添加指定的類 node.classList.contains(value); // 判斷元素是否含有指定的類,如果存在返回true node.classList.remove(value); // 刪除指定的類 node.classList.toggle(value); // 有就刪除,沒有就添加指定類
修改DOM特性的方法
Node.getAttribute('id') // 獲取 Node.setAttribute('id') // 設(shè)置 Node.removeAttribute() // 移除 Node.attributes // 獲取DOM全部特性
只讀方法
getComputedStyle是window的方法。它能夠獲取當前元素所有最終使用的CSS屬性值,但是是只讀的。它有兩個參數(shù),第一個為傳入的節(jié)點,第二個可以傳入:hover, :blur等獲取其偽類樣式,如果沒有則傳入null。
然而IE并不支持getComputedStyle方法,可以使用currentStyle來保持兼容性:
window.getComputedStyle ? window.getComputedStyle(node, null) : node.currentStyle
以上這篇JavaScript DOM節(jié)點操作方法總結(jié)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript跨平臺的開源框架NativeScript
本文給大家分享的是一款使用javascript來構(gòu)建跨平臺原生移動應(yīng)用的開源框架--NativeScript,可以使用JavaScript開發(fā)跨平臺、真正原生的iOS, Android 和 Windows 移動App。開發(fā)人員使用NativeScript提供的庫來構(gòu)建應(yīng)用UI,其抽象了各種原生平臺之間的不同。2015-03-03js通過var定義全局變量與在window對象上直接定義屬性的區(qū)別說明
這篇文章主要介紹了js通過var定義全局變量與在window對象上直接定義屬性的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09分別用marquee和div+js實現(xiàn)首尾相連循環(huán)滾動效果,僅3行代碼
這是本人2007年進行的一項研究,當時網(wǎng)絡(luò)上沒有什么既精簡又實用的循環(huán)滾動代碼,所以就自己琢磨了段時間,最終找到這個辦法2011-09-09JavaScript常用數(shù)組去重實戰(zhàn)源碼
本文給大家分享js常用8種數(shù)組去重實戰(zhàn)源碼,針對每種方法通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2021-07-07JavaScript使用canvas實現(xiàn)flappy bird全流程詳解
這篇文章主要介紹了JavaScript使用canvas實現(xiàn)flappy bird流程,canvas是HTML5提供的一種新標簽,它可以支持JavaScript在上面繪畫,控制每一個像素,它經(jīng)常被用來制作小游戲,接下來我將用它來模仿制作一款叫flappy bird的小游戲2023-03-03