JavaScript操作DOM

创建节点

除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点。document.body指向的是<body>元素,document.documentElement则指向<html>元素。

1
2
3
4
5
6
//创建节点
var createNode = document.createElement("div");
var createTextNode = document.createTextNode("hello world");
createNode.appendChild(createTextNode);
document.body.appendChild(createNode);
document.documentElement.appendChild(createNode);

插入节点

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

1
2
3
4
5
6
//插入节点
var createNode = document.createElement("div");
var createTextNode = document.createTextNode("hello world");
createNode.appendChild(createTextNode);
var div1 = document.getElementById("div1");
document.body.insertBefore(createNode,div1);

替换和删除元素

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

1
2
3
4
//替换元素
var replaceChild = document.body.replaceChild(createNode,div1);
//删除元素
var removeChild = document.body.removeChild(div1);

节点的属性

  • firstChild:第一个子节点
  • lastChild:最后一个子节点
  • childNodes:子节点集合,获取其中子节点可
  • someNode.childNodes[index]或
  • someNode.childNodes.item(index)
  • nextSibling:下一个兄弟节点
  • previousSibling:上一个兄弟节点
  • parentNode:父节点
1
2
3
4
5
6
<ul id="ul">
<li>sdsssssss</li>
<li>qqqq</li>
<li>wwww</li>
<li>eeee</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//节点属性
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);

文档片段

好处在于减少dom的渲染次数,可以优化性能。

1
2
3
4
5
6
7
8
9
10
//文本片段
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);

克隆元素

  • someNode.cloneNode(true):深度克隆,会复制节点及整个子节点
  • someNode.cloneNode(false):浅克隆,会复制节点,但不复制子节点
1
2
3
//克隆
var clone = ul.cloneNode(true);
document.body.appendChild(clone);

注意:

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

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

1
2
3
4
5
6
<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方法复制的元素,只会复制特性,其他一切都不会复制 因此,若要解决跨浏览器问题,在复制前,最好先移除事件处理程序。



本文链接: http://home.meng.uno/articles/2c47a986/ 欢迎转载!

© 2018.02.08 - 2020.06.02 Mengmeng Kuang  保留所有权利!

UV : | PV :

:D 获取中...

Creative Commons License