原生js操做dom的方法

时间 2019-11-20

标签原生 dom 方法栏目 JavaScript 繁體版

原文原文链接

今天学习了原生js的dom节点的操做，就记录下来，仅供本身之后参考。html

1)建立节点：除了可使用createElement建立元素，也可使用createTextNode建立文本节点.chrome

document.body指向的是<body>元素;document.documentElement则指向<html>元素浏览器

// 建立节点 app

vardom

createNode = document.createElement("div");性能

var学习

createTextNode = document.createTextNode("hello world");优化

createNode.appendChild(createTextNode);htm

document.body.appendChild(createNode);seo

document.documentElement.appendChild(createNode);

2)插入节点：可使用appendChild，insertBefore，insertBefore接收两个参数，第一个是插入的节点，第二个是参照节点，如insertBefore(a,b)，则a会插入在b的前面

// 插入节点

var

createNode = document.createElement("div");

var

createTextNode = document.createTextNode("hello world");

createNode.appendChild(createTextNode);

var

div1 = document.getElementById("div1");

document.body.insertBefore(createNode,div1);

3)替换和删除元素，从replaceChild和removeChild的字面意思看，就是删除子节点，所以调用者，须要包含子节点div1，否则调用会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。

// 替换元素
var replaceChild = document.body.replaceChild(createNode,div1);

// 删除元素
var removeChild = document.body.removeChild(div1);

4)节点的属性：

firstChild:第一个子节点

lastChild:最后一个子节点

childNodes:子节点集合，获取其中子节点能够someNode.childNodes[index]或者someNode.childNodes.item(index)

nextSibling:下一个兄弟节点

previousSibling：上一个兄弟节点

parentNode：父节点

< ul id ="ul" >< li > sdsssssss </ li >< li > qqqq </ li >< li > wwww </ li >< li > eeee </ li></ ul >

// 节点属性

var

ul = document.getElementById("ul");

var

firstChild = ul.firstChild;

console.log(firstChild.innerHTML);

var

lastChild = ul.lastChild;

console.log(lastChild.innerHTML);

var

length = ul.childNodes.length;

console.log(length);

var

secondChild = ul.childNodes.item(1);

console.log(secondChild.innerHTML);

var

forthChild = ul.childNodes.item(2).nextSibling;

console.log(forthChild.innerHTML);

var

thridChild = forthChild.previousSibling;

console.log(thridChild.innerHTML);

var

parentNode = forthChild.parentNode;

console.log(parentNode.innerHTML);

5) 文档片断，好处在于减小dom的渲染次数，能够优化性能。

// 文本片断

var

fragment = document.createDocumentFragment();

var

ul = document.getElementById("ul");

var li =

null

;

for (

var

i = 4; i >= 0; i--) {

li = document.createElement("li");

li.appendChild(document.createTextNode("item "+i));

fragment.appendChild(li);

}

ul.appendChild(fragment);

6）克隆元素

someNode.cloneNode(true):深度克隆，会复制节点及整个子节点

someNode.cloneNode(false):浅克隆，会复制节点，但不复制子节点

// 克隆
var clone = ul.cloneNode(

true

);

document.body.appendChild(clone);

一、childNodes.length存在跨浏览器的问题

能够看到有关列表的html片断没有用

< ul id ="ul"

< li > sdsssssss </ li

< li > qqqq </ li

< li > wwww </ li

< li > eeee </ li

</ ul

这种书写格式而是使用没有换行的格式书写，是由于在不一样的浏览器中，获取ul.childNodes.length的结果有差别：

在ie中，ul.childNodes.length不会计算li之间的换行空格，从而获得数值为4

在ff、chrome,safari中，会有包含li之间的空白符的5个文本节点，所以ul.childNodes.length为9

若要解决跨浏览器问题，能够将li之间的换行去掉，改为一行书写格式。

二、cloneNode存在跨浏览器的问题

在IE中，经过cloneNode方法复制的元素，会复制事件处理程序，好比，var b = a.cloneNode(true).若a存在click,mouseover等事件监听，则b也会拥有这些事件监听。

在ff,chrome,safari中，经过cloneNode方法复制的元素，只会复制特性，其余一切都不会复制

所以，若要解决跨浏览器问题，在复制前，最好先移除事件处理程序。