JS经常使用操做节点的方法

时间 2019-12-11

标签经常使用节点方法栏目 JavaScript 繁體版

原文原文链接

js常见的建立dom节点的方法有html

createElement() 建立一个元素节点 => 接收参数为string类型的nodenamenode

createTextNode() 建立一个文本节点 => 接收参数为string类型的text内容浏览器

createAttribute() 建立一个属性节点 => 接收参数为string类型的属性名称app

createComment() 建立一个注释节点 => 接收参数为string类型的注释文本dom

1、建立DOM节点
使用的命令是优化

var oDiv = document.createElement('div');url

这样就建立了一个div标签。spa

2、插入DOM节点code

移动DOM节点也就是把这个节点插入到html文档中的某个地方，这里js给了咱们两个方法：htm

1.appendChild()：把节点插入到父节点的末尾。

document.body.appendChild(oDiv); //把div插入到body中，而且位于末尾

2.insertBefore()：把节点插入到父节点的某个兄弟节点的前面。

var oP = createElement('p'); //建立一个p节点
document.body.insertBefore(oP,oDiv); //把p节点插入到div的前面

三.删除DOM节点

删除DOM节点的方法是removeChild()。

document.body.removeChild(oP); //删除p节点

四.查找DOM节点

查找DOM节点的方法不少，经常使用的有：

getElementById() //经过元素Id，惟一性

如html文档以下：

这是可使用getElementById()获取到id为box的div。

var oDiv = document.getElementById('box');

2.getElementsByTagName() //经过元素的标签名来选择元素

var aDiv = getElementsByTagName('div');
要注意的是，getElementsByTagName()获取的是一组元素，因此若是想取得上面那个id为box的div要在后面加上[0];

var oDiv = getElementsByTagName('div')[0];

5、替换DOM节点

替换DOM节点的方法是replaceChild()。

var oSpan = document.createElement('span'); //建立一个span标签
document.body.replaceChild(oSpan,oBox); //用span标签替换div标签
最经常使用的DOM操做就是这些了，其余还有不少的方法，就目前而言，各浏览器兼容性不太好，因此仍是推荐你们暂时只使用上述这些方法。

DocumentFragment节点不属于文档树，继承的parentNode属性老是null。它有一个很实用的特色，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的全部子孙节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操做。
另外，当须要添加多个dom元素时，若是先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减小页面渲染dom的次数，效率会明显提高。

DocumentFragment文档碎片(高效批量更新多个节点)

原始方法：

var parentNode = document.getElementsByTageName('ul')[0];

function appendDataToElement (appendToElement, num) {

　　let node;　

　　for (let i = 0; i < num.length; i++) {

　　　　node = document.createElement('li');

　　　　node.innerHTML = i;

　　　　appendToElement.appendChild(node);

　　}

appendDataToElement (parentNode, num);

优化后：

var parentNode = document.ElementsByTageName('ul')[0],

　 fragment = document.createDocumentFragment();

function appendDataToElement(appendToElement, num) {

　　let node;

　　for (let i = 0; i < num.length; i++) {

　　　　node = document.createElement('li');

　　　　node.innerHTML = i;

　　　　fragment.appendChild(node);

　　}

　　appendToElement.appendChild(fragment);

}

appendDataToElement(parentNode, num);