DOM

1.获取DOM节点

document.getElementById();   //通过ID获取
document.getElementsByTagName();   //通过标签名获取
document.getElementsByClassName();   //通过类名获取

document.getElementsByTagName();document.getElementsByClassName();总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。
querySelector();和querySelectorAll();
2.插入DOM

• innerHTML属性，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树
  若DOM节点是空的，可通过innerHTML="<span>child</span>";
• appendChild()
  可通过appendChild()，把一个子节点添加到父节点的最后一个子节点。

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>
<!-- JS -->
var
    list = document.getElementById('list'),
    haskell = document.createElement('p');  //创建一个p标签
haskell.id = 'haskell';
haskell.innerText = 'Haskell';   //插入文本内容
list.appendChild(haskell);

• insertBefore()
parentElement.insertBefore(newElement, referenceElement);，新子节点会插入到referenceElement之前。
• innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签
  innerText不返回隐藏元素的文本，而textContent返回所有文本
• 设置CSS属性 font-size等设置为fontSize

3.删除DOM
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild()把自己删掉。

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

children属性是一个只读属性，并且它在子节点变化时会实时更新