JavaScript DOM创建元素，添加元素，移动元素，复制节点，删除，替换元素，查找节点的方法？

问题

DOM创建元素，添加元素，移动元素，复制节点，删除，替换元素，查找节点的方法？

答案

创建元素

document.createElement('tagName');

添加元素

parent.appendChild(childNode);

注：父元素调用该方法

移动元素

由于DOM对象属于引用类型，所以在操作appendChild和insertBefore方法时，

控制的节点如果是文档中存在的节点，那么将把这个节点移到目标处。

复制节点

oLi.cloneNode(true);

注：参数true表示深度克隆（深拷贝），false 表示浅度克隆（浅拷贝），深拷贝也就是复制节点及整个节点数；浅拷贝复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。因此，整个节点副本就成为一个‘孤儿’：

<ul id='oUl'>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
<ul>

<script>
var myList = document.getElementById("oUl");
var deepList = myList.cloneNode(true);
console.log(deepList.childNodes.length);//3  (IE<9) 或7 （其它浏览器）

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length);//0
</script>

以上代码注意childNode包含文本节点。

cloneNode()方法不会复制添加DOM节点的JS属性，例如事件处理程序等。这个方法只复制特性，其他一切都不会复制。

删除节点

parentNode.removeChild(childNode);

注：父元素调用该方法，返回值为被删除的节点

替换元素

parentNode.replaceChild(newNode,oldNode);

注：oldNode节点必须是parentNode的子节点。

插入元素

parentNode.insertBefore(newEle, oldNode);

注：父元素调用该方法

查找节点的总结

• childNodes—返回节点到子节点的节点列表
• firstChild—返回节点的首个子节点;
• lastChild—返回节点的最后一个子节点;
• nextSibling—返回节点之后紧跟的同级节点;
• nodeName—返回节点的名字，根据其类型;
• nodeType—返回节点的类型;
• nodeValue—设置或返回节点的值，根据其类型;
• ownerDocument—返回节点的根元素（document对象）;
• parentNode—返回节点的父节点;
• previousSibling—返回节点之前紧跟的同级节点;
• text—返回节点及其后代的文本（IE独有）;
• xml—返回节点及其后代的XML（IE独有）;

节点对象的方法

• appendChild()—向节点的子节点列表的结尾添加新的子节点;
• cloneNode()—复制节点;
• hasChildNodes()—判断当前节点是否拥有子节点;
• insertBefore()—在指定的子节点前插入新的子节点;
• normalize()—合并相邻的Text节点并删除空的Text节点;
• removeChild()—删除（并返回）当前节点的指定子节点;
• replaceChild()—用新节点替换一个子节点;

IE6独有方法

• selectNodes()—用一个XPath表达式查询选择节点;
• selectSingleNode()—查找和XPath查询匹配的一个节点;
• transformNode()—使用XSLT把一个节点转换为一个字符串。transformNodeToObject()—使用XSLT把一个节点转换成为一个文档。

经典的问题解析

创建新节点

• createDocumentFragment() //创建一个DOM片段
• createElement() //创建一个具体的元素
• createTextNode() //创建一个文本节点

添加、移除、替换、插入

• appendChild()
• removeChild()
• replaceChild()
• insertBefore() //在已有的子节点前插入一个新的子节点

查找

• getElementsByTagName() //通过标签名称
• getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
• getElementById() //通过元素Id，唯一性

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！