JavaScript系列之DOM節點知識總結

• 查詢HTML元素方式

通常，通過JavaScript，操作HTML元素必須首先找到該元素。
有三種方法查詢HTML元素：

• 通過 id 找到HTML元素

document.getElementById('demo') //demo是元素對應的ID

• 通過標籤名找到HTML元素

document.getElementsByTagname('li')  //li是標籤的名字

• 通過類名找到HTML元素

document.getElementsByClassName('demo')    //demo為元素指定的class名

注意：通過類名獲取元素在IE6-8

不相容

• 獲取節點（節點分為兩種：文字節點 和 元素節點）

注意：元素(Element)和結點(Node)的區別，

元素是一個小範圍的定義，必須是含有完整資訊的結點才是一個元素，例如<div>...</div>。

但是一結點不一定是一個元素，而一個元素一定是一個結點。

• 獲取子節點

獲取子節點的方式有兩種：childNodes(包含文字節點)   children(不包含文字節點)

<ul id="ul1">
    這是一個文字節點
   <li></li>
    <li></li>
    這是一個文字節點
</ul>
 

用childNodes(包含文字節點)獲取後的length為5；

注意：下例用childNodes(包含文字節點)獲取後的length依然為5；有沒有文字都會佔著

<ul id="ul1">
    <li></li>
    <li></li>
</ul>

用children(不包含文字節點)獲取後的length為2；

nodeType是用來判斷節點型別，控子節點：

nodeType==3是文字節點

nodeType==1是元素節點

注：帶Element的IE不支援，需要做判斷

• 獲取父節點

獲取父節點的常用方式有兩種：parentNode    parentElement

parentElement 和 parentNode一樣,但parentNode是W3C標準的，parentElement 只在IE中可用

• 獲取首尾子節點

獲取首節點：firstChild(包含文字節點)  firstElementChild(不包含文字節點)
獲取尾節點：lastChild(包含文字節點)   lastElementChild(不包含文字節點)
注：如果對文字節點不瞭解的獲取子節點部分有簡單的描述。

• 獲取兄弟節點

nextSibling(包含文字節點)、nextElementSibling(不包含文字節點) previousSibling(包含文字節點)、previousElementSiblin(不包含文字節點)

• 建立、追加節點：是在最後面新增新節點

一、建立節點：createElement(標籤名)  建立一個節點
二、追加節點：appendChild(節點)  追加一個節點

    var oLi=document.createElement("li");
    父級.appendChild(oLi);

• 插入節點：insertBefore(插入的標籤，標籤位置前)

var olis=父級.getElementsByTagName("li"); varoDiv=document.createElement('div'); 父級.insertBefore(oDiv,olis[0]);

• 刪除子節點:removeChild(刪除的標籤索引)
  

var olis=父節點.getElementsByTagName("li"); 父節點.removeChild(olis[0]);

• 元素屬性的操作

class:

第一種：oDiv.style.display=“block”; 第二種：oDiv.style[“display”]=“block”; 第三種：Dom方式

獲取：getAttribute(名稱) 設定：setAttribute(名稱, 值) 刪除：removeAttribute(名稱)