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属性是一个只读属性，并且它在子节点变化时会实时更新
