JavaScript DOM節點操做總結

節點類型

節點類型主要有三種：元素節點，屬性節點和文本節點。

而對DOM的主要也就是圍繞元素節點和屬性節點的增刪改查。下面就分別從對元素節點的操做和對屬性節點的操做來介紹。

 

元素節點

查

在對DOM進行增刪改以前，首先要找到對應的元素。具體的查找方法以下：

 getElementByID()             // 獲得單個節點
 getElementsByTagName()       // 獲得節點數組 NodeList
 getElementsByName()           // 獲得節點數組 NodeList

同時還能夠利用元素節點的屬性獲取它的父子節點和文本節點：

子節點

Node.childNodes   //獲取子節點列表NodeList; 注意換行在瀏覽器中被算做了text節點，若是用這種方式獲取節點列表，須要進行過濾
Node.firstChild   //返回第一個子節點
Node.lastChild    //返回最後一個子節點

父節點

Node.parentNode      // 返回父節點
Node.ownerDocument   //返回祖先節點（整個document）

同胞節點

Node.previousSibling       // 返回前一個節點，若是沒有則返回null
Node.nextSibling             // 返回後一個節點

 

增

新增節點首先要建立節點，而後將新建的節點插入DOM中，因此下面分別介紹建立節點和插入節點的方法，複製節點的方法也在建立節點中進行介紹。

建立節點

createElement()        // 按照指定的標籤名建立一個新的元素節點

建立代碼片斷（爲避免頻繁刷新DOM，能夠先創造代碼片斷，完成全部節點操做以後統一添加到DOM中）

createDocumentFragment()

複製節點

clonedNode = Node.cloneNode(boolean)  // 只有一個參數，傳入一個布爾值，true表示複製該節點下的全部子節點；false表示只複製該節點

插入節點

/*插入node*/
parentNode.appendChild(childNode);    // 將新節點追加到子節點列表的末尾
parentNode.insertBefore(newNode, targetNode);   //將newNode插入targetNode以前

/*插入html代碼*/
node.insertAdjacentHTML('beforeBegin', html);   //在該元素以前插入代碼
node.insertAdjacentHTML('afterBegin', html);   //在該元素的第一個子元素以前插入代碼
node.insertAdjacentHTML('beforeEnd', html);   //在該元素的最後一個子元素以後插入代碼
node.insertAdjacentHTML('afterEnd', html);   //在該元素以後插入代碼

 

替換節點

parentNode.replace(newNode, targetNode);        //使用newNode替換targetNode

刪

移除節點

parentNode.removeChild(childNode);   // 移除目標節點
node.parentNode.removeChild(node);       //在不清楚父節點的狀況下使用

 

屬性節點

操做屬性節點，就是對DOM樣式進行增刪改查。對於行內樣式、內聯樣式、外部樣式有不一樣的操做方法；各類方法得到的樣式也有可讀可寫和只讀之分。

直接獲取CSS樣式

node.style.color          // 可讀可寫

Style自己的屬性和方法

node.style.cssText          //獲取node行內樣式字符串
node.style.length           //獲取行內樣式個數
node.style.item(0)          //獲取指定位置的樣式

獲取和修改元素樣式

HTML5爲元素提供了一個新的屬性：classList 來實現對元素樣式表的增刪改查。操做以下：

node.classList.add(value);         //爲元素添加指定的類
node.classList.contains(value);    // 判斷元素是否含有指定的類，若是存在返回true
node.classList.remove(value);   // 刪除指定的類
node.classList.toggle(value);   // 有就刪除，沒有就添加指定類

修改DOM特性的方法

Node.getAttribute('id')        // 獲取
Node.setAttribute('id')        // 設置
Node.removeAttribute()         // 移除
Node.attributes                // 獲取DOM所有特性

只讀方法

getComputedStyle是window的方法。它可以獲取當前元素全部最終使用的CSS屬性值，可是是隻讀的。它有兩個參數，第一個爲傳入的節點，第二個能夠傳入:hover, :blur等獲取其僞類樣式，若是沒有則傳入null。

然而IE並不支持getComputedStyle方法，可使用currentStyle來保持兼容性：

window.getComputedStyle ? window.getComputedStyle(node, null) : node.currentStyle