DOM節點創建最常用的便是document.createElement和document.createTextNode方法：

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

DOM 查詢

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

// 返回當前文檔中第一個類名為 "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導航方法：

// 獲取父元素、父節點
var parent = ele.parentElement;
var parent = ele.parentNode;

// 獲取子節點，子節點可以是任何一種節點，可以通過nodeType來判斷
var nodes = ele.children;    

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

// 當前元素的第一個/最后一個子元素節點
var el = ele.firstElementChild;
var el = ele.lastElementChild;

// 下一個/上一個兄弟元素節點
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}的數組
var attrs = el.attributes;

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

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

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