解析JS操作DOM

时间：2016-09-09 22:27:24 阅读：169 评论：0 收藏：0 [点我收藏+]

标签：

首先，如何操作DOM可大致分为以下几项：

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

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

//创建节点

var createNode = document.createElement("div");

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

createNode.appendChild(createTextNode);

document.body.appendChild(createNode);

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);

注意：

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

可以看到有关列表的html片段没有用

<li>sdsssssss</li>

</ul>

这种书写格式而是使用没有换行的格式书写，是因为在不同的浏览器中，获取ul.childNodes.length的结果有差异：

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

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

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

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

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

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

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

js基本DOM操作方法:

childNodes 返回当前元素所有子元素的数组
firstChild 返回当前元素的第一个下级子元素
lastChild 返回当前元素的最后一个子元素
nextSibling 返回紧跟在当前元素后面的元素
nodeValue 指定表示元素值的读/写属性
parentNode 返回元素的父节点
previousSibling 返回紧邻当前元素之前的元素

getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素
getElementsByTagName_r(name) 返回当前元素中有指定标记名的子元素的数组
hasChildNodes() 返回一个布尔值，指示元素是否有子元素
getAttribute(name) 返回元素的属性值，属性由name指定

document.createElement_x(tagName) 文档对象上的createElement_x方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素
document.createTextNode(text) 文档对象的createTextNode方法会创建一个包含静态文本的节点
.appendChild(childNode) appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如，可以增加一个option元素，作为select元素的子节点
.getAttribute(name)
.setAttribute(name, value) 这些方法分别获得和设置元素中name属性的值
.insertBefore(newNode, targetNode) 这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面
.removeAttribute(name) 这个方法从元素中删除属性name
.removeChild(childNode) 这个方法从元素中删除子元素childNode
.replaceChild(newNode, oldNode) 这个方法将节点oldNode替换为节点newNode
.hasChildnodes() 这个方法返回一个布尔值，指示元素是否有子元素

解析JS操作DOM

标签：

原文地址：http://www.cnblogs.com/blackoath/p/5858088.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行