1. 增
/*
子节点的增加
若newNode本身是someNode的子节点，则是newNode的移动。
*/
//插入newNode，使其成为someNode.lastChild
someNode.appendChild(newNode);
//插入newNode,使其成为referNode.previousSibling。若referNode=null，则newNode===someNode.lastChid。
//referNode必须为someNode的子节点。
someNode.insertBefore(newNode, referNode);
/*文档写入*/
//writeln()会在输入字符串末尾添加一个换行符（\n），而write()只会原样写入。
document.write(content);
document.writeln(content);
//创建元素
document.createElement(elementName);
//创建文本节点
document.createTextNode(text);
//根据myHTML创建新的DOM树，替换element的子节点树（部分元素不支持innerHTML）
element.innerHTML = myHTML;
//根据myHTML创建新的DOM树，替换element及其子节点树
element.outerHTML = myHTML;
//插入标记(place为插入位置，值必定为"beforebegin"、"afterbegin"、"beforeend"、"afterend"，且必须为小写)，插入位置参照下表
element.insertAdjacentHTML(palce,HTMLText);
| place | 意义 |
|---|---|
| beforebegin | element的前一个同辈元素 |
| afterbegin | element的第一个子元素 |
| beforeend | element的最后一个子元素 |
| afterend | element的最后一个同辈元素 |
2. 删
/*子节点的删除*/
//从DOM树上删除oldNode，但oldNode依旧在文档中
//oldNode必须为someNode的子节点。
someNode.removeChild(oldNode);
3. 改
/*子节点的替换*/
//在DOM树上，使用newNode替换oldNode，但oldNode依旧在文档中
//oldNode必须为someNode的子节点。
someNode.replaceChild(newNode, oldNode);
//属性的读写
element.setAttribute(key,value);
element.getAttribute(key);
4. 查
/*节点的查找*/
//若找到相应的元素则返回该元素，否则返回null。
document.getElementById(IdName);
//返回包含0个或多个元素的NodeList
document.getElementsByTagName(TagName);
/*IE8+支持下列代码*/
//在该元素后代元素范围内查找匹配的元素，返回第一个匹配的元素
element.querySelector(cssSelector);
//在该元素后代元素范围内查找匹配的元素，返回包含0个或多个元素的NodeList
element.querySelectorAll(cssSelector);
/*IE9+支持下列代码*/
element.childElementCount;//返回子元素个数
element.firstElementChild;//指向第一个子元素
element.lastElementChild;//指向最后一个子元素
element.previousElementSibling;//指向前一个同辈子元素
element.nextElementSibling;//指向后一个同辈子元素
//返回包含0个或多个元素的NodeList
document.getElementsByClassName(ClassName);
5. 复制
/*节点的复制*/
//浅复制，只复制someNode。
someNode.cloneNode(flase);
//深复制,复制someNode及其子节点树
someNode.cloneNode(true);
6. 其他
<!--设List为下列ul元素的节点-->
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
console.log(List.childNodes.length); //3 (IE<9) 或 7 (其他浏览器)
由于IE8及更早的版本与其他浏览器处理空白字符的方式不一样，会造成List.childNodes.length的不同。其他浏览器会为空白字符创建节点。为了解决这个问题，可以使用normalize() 来规范化文本节点。
List.normalize();
console.log(List.childNodes.length); //3
9. 参考资料
[1] Nicholas C.Zakas. JavaScript高级程序设计[M]. 人民邮电出版社, 2012.
