DOM節(jié)點(diǎn)創(chuàng)建最常用的便是document.createElement和document.createTextNode方法：

var el1 = document.createElement('div');
var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');

DOM 查詢

元素查詢的API返回的的結(jié)果是DOM節(jié)點(diǎn)或者DOM節(jié)點(diǎn)的列表。document提供了兩種Query方法：

// 返回當(dāng)前文檔中第一個類名為 "myclass" 的元素
var el = document.querySelector(".myclass");

// 返回一個文檔中所有的class為"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");

// 獲取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');

Element也提供了很多相對于元素的DOM導(dǎo)航方法：

// 獲取父元素、父節(jié)點(diǎn)
var parent = ele.parentElement;
var parent = ele.parentNode;

// 獲取子節(jié)點(diǎn)，子節(jié)點(diǎn)可以是任何一種節(jié)點(diǎn)，可以通過nodeType來判斷
var nodes = ele.children;    

// 查詢子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');

// 當(dāng)前元素的第一個/最后一個子元素節(jié)點(diǎn)
var el = ele.firstElementChild;
var el = ele.lastElementChild;

// 下一個/上一個兄弟元素節(jié)點(diǎn)
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;

DOM 更改

// 添加、刪除子元素
ele.appendChild(el);
ele.removeChild(el);

// 替換子元素
ele.replaceChild(el1, el2);

// 插入子元素
parentElement.insertBefore(newElement, referenceElement);

屬性操作

// 獲取一個{name, value}的數(shù)組
var attrs = el.attributes;

// 獲取、設(shè)置屬性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');

// 判斷、移除屬性
el.hasAttribute('class');
el.removeAttribute('class');

// 是否有屬性設(shè)置
el.hasAttributes()