dom操作？

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

一、DOM樹

DOM樹有兩種，分別為節點樹和元素樹。

節點樹：把文檔中所有的內容都看成樹上的節點；

元素樹：僅把文檔中的所有標簽看成樹上的節點。

二、DOM常用操作

2.1 查找節點

document.getElementById('id屬性值');

返回擁有指定id的第一個對象的引用

document/element.getElementsByClassName('class屬性值');

返回擁有指定class的對象集合

document/element.getElementsByTagName('標簽名');

返回擁有指定標簽名的對象集合

document.getElementsByName('name屬性值');

返回擁有指定名稱的對象結合

document/element.querySelector('CSS選擇器');

僅返回第一個匹配的元素

document/element.querySelectorAll('CSS選擇器');

返回所有匹配的元素

document.documentElement

獲取頁面中的HTML標簽

document.body

獲取頁面中的BODY標簽

document.all['']

獲取頁面中的所有元素節點的對象集合型

2.2 新建節點

document.createElement('元素名');

創建新的元素節點

document.createAttribute('屬性名');

創建新的屬性節點

document.createTextNode('文本內容');

創建新的文本節點

document.createComment('注釋節點');

創建新的注釋節點

document.createDocumentFragment( );

創建文檔片段節點

2.3 添加新節點

parent.appendChild( element/txt/comment/fragment );

向父節點的最后一個子節點后追加新節點

parent.insertBefore( newChild, existingChild );

向父節點的某個特定子節點之前插入新節點

element.setAttributeNode( attributeName );

給元素增加屬性節點

element.setAttribute( attributeName, attributeValue );

給元素增加指定屬性，并設定屬性值