DOM 操作

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.