文檔對象模型( DOM, Document Object Model )主要用於對HTML和XML文檔的內容進行操作。DOM描繪了一個層次化的節點樹，通過對節點進行操作，實現對文檔內容的添加、刪除、修改、查找等功能。

一、DOM樹

DOM樹有兩種，分別為節點樹和元素樹。
● 節點樹：把文檔中所有的內容都看成樹上的節點；
● 元素樹：僅把文檔中的所有標簽看成樹上的節點。

二、DOM常用操作

2.1 查找節點

通過標簽名查找 HTML 元素

● 本例查找 id="main" 的元素，然後查找 "main" 中的所有

元素：
● var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
==提示==：通過類名查找 HTML 元素在 IE 5,6,7,8 中無效

2.2 新建節點

2.3 添加新節點

添加文本節點，有兩種常見方法：

==document.createTextNode(‘新增文本內容‘);==

  <h2>創建文本節點</h2>
  <button onclick="addText()">創建文本節點</button>
  <p></p>
     <script>
        function addText(){
            var element = document.getElementsByTagName(‘p‘)[0];
            var txt = document.createTextNode(‘新增文本內容‘); //創建文本節點
            element.appendChild(txt); //添加文本節點
        }
     </script>

==element.innerHTML=‘新增文本內容‘; 【推薦】==
```

創建文本節點

 
#### 插入節點
==appendChild()==
　　appendChild()方法用於向childNodes列表的末尾添加一個節點，並返回新增節點。添加節點後，childNodes中的新增節點、父節點和以前的最後一個子節點的關系指針都會相應地得到更新

如果插入的節點已經是文檔的一部分了，那結果就是將該節點從原來的位置轉移到新位置

### 2.4 刪除節點

header 1 | header 2
---|---
parentNode.removeChild( existingChild );|刪除已有的子節點，返回值為刪除節點
element.removeAttribute(‘屬性名‘);|刪除具有指定屬性名稱的屬性，無返回值
element.removeAttributeNode( attrNode );|刪除指定屬性，返回值為刪除的屬性
 
### 2.5 修改節點

header 1 | header 2
---|---
parentNode.replaceChild( newChild, existingChild );|用新節點替換父節點中已有的子節點
element.setAttributeNode( attributeName );|若原元素已有該節點，此操作能達到修改該屬性值的目的
element.setAttribute( attributeName, attributeValue );|若原元素已有該節點，此操作能達到修改該屬性值的目的
 
#### 添加屬性節點，修改屬性值：
  ==element.setAttributeNode( attributeName )==;

<meta charset="UTF-8">
  <title>Document</title>

屬性節點

增添id屬性，並修改class屬性值

 ==element.setAttribute( attributeName, attributeValue );==

  <h2>屬性節點</h2>
  <p class="classValue">增添id屬性，並修改class屬性值</p>
 <script>
     var element = document.getElementsByTagName(‘p‘)[0];

// 添加屬性節點
var attr = document.createAttribute(‘id‘);
attr.value = ‘idValue‘;
element.setAttributeNode(attr);

// 修改屬性值
var attr = document.createAttribute(‘class‘);
attr.value = ‘classNewValue‘;
element.setAttributeNode(attr);

```

DOM節點基本操作