原⽣js操作dom的⽅法
今天学习了原⽣js的dom节点的操作，就记录下来，仅供⾃⼰以后参考。
1)创建节点：除了可以使⽤createElement创建元素，也可以使⽤createTextNode创建⽂本节点.
document.body指向的是<body>元素;document.documentElement则指向<html>元素
//创建节点
var createNode = ateElement("div");
var createTextNode = ateTextNode("hello world");
createNode.appendChild(createTextNode);
document.body.appendChild(createNode);
document.documentElement.appendChild(createNode);
2)插⼊节点：可以使⽤appendChild，insertBefore，insertBefore接收两个参数，第⼀个是插⼊的节点，第⼆个是参照节点，如insertBefore(a,b)，则a会插⼊在b的前⾯
//插⼊节点
var createNode = ateElement("div");
var createTextNode = ateTextNode("hello world");
createNode.appendChild(createTextNode);
var div1 = ElementById("div1");
document.body.insertBefore(createNode,div1);
3)替换和删除元素，从replaceChild和removeChild的字⾯意思看，就是删除⼦节点，因此调⽤者，需要包含⼦节点div1，不然调⽤会报错。返回的节点是替换的或删除的元素，被替换/删除的元素仍然存在，但document中已经没有他们的位置了。
//替换元素
var replaceChild = placeChild(createNode,div1);
//删除元素
var removeChild = veChild(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 = ElementById("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 = ateDocumentFragment();
var ul = ElementById("ul");
var li = null;
for (var i = 4; i >= 0; i--) {
li = ateElement("li");
li.ateTextNode("item "+i));
fragment.appendChild(li);
}
ul.appendChild(fragment);
6）克隆元素
someNode.cloneNode(true)：深度克隆，会复制节点及整个⼦节点
html document是什么someNode.cloneNode(false)：浅克隆，会复制节点，但不复制⼦节点
//克隆
var clone = ul.cloneNode(true);
document.body.appendChild(clone);
注意：
1、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之间的换⾏去掉，改成⼀⾏书写格式。
2、cloneNode存在跨浏览器的问题
在IE中，通过cloneNode⽅法复制的元素，会复制事件处理程序，⽐如，var b = a.cloneNode(true).若a存在click,mouseover等事件监听，则b也会拥有这些事件监听。
在ff,chrome,safari中，通过cloneNode⽅法复制的元素，只会复制特性，其他⼀切都不会复制
因此，若要解决跨浏览器问题，在复制前，最好先移除事件处理程序。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论