操作节点

获取节点

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()

querySelector()
querySelectorAll()
// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

获取子节点

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

更新DOM

innerHTML
innerTEXT

插入DOM

appendChild

//插入p
var   list = document.getElementById('list'),
var   haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
//插入style
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

insertBefore
parentElement.insertBefore(newElement, referenceElement);
子节点会插入到referenceElement之前。