JavaScript节点,JS创建节点
本文为大家带来了一些关于javascript的知识，主要介绍了一些关于节点操作的相关问题，包括父节点、子节点、兄弟节点、添加和删除重复节点等。下面就来看看吧，希望对你有帮助。
【相关推荐：javascript视频教程，web前端】
在我们的网页中，除了使用DOM提供的方法来获取节点，还可以使用节点的层次关系来获取节点，这是比较简单的。今天来总结一下吧！
节点概述
网页中的一切都是一个节点(标签、属性、文本、评论等。).在DOM中，节点由节点表示。
HTML DOM树中的所有节点都可以通过JavaScript访问，所有HTML元素(节点)都可以修改、创建或删除。
一般一个节点至少有三个基本属性：nodeType(节点类型)、nodeName(节点名)和nodeValue(节点值)。
节点nodeType为1，属性节点nodeType为2，文本节点nodeType为3(文本节点包含单词、空格、换行符等。).在我们的实际开发中，节点操作主要是对元素节点进行操作。
节点层级
使用DOM树，节点可以分为不同的层次关系，常见的是父子兄弟姐妹层次关系。
1.父级节点
节点.父节点
ParentNode属性可以返回节点的父节点。请注意，它是最近的父节点。如果指定的节点没有父节点，则返回null。p class=parent
儿子
/p
脚本
var son=document.querySelector(。子’)；
console . log(son . parent node)；
/脚本
2.子节点
node.childNodes返回包含指定节点的子节点集合，这是一个即时更新的集合。
保险商实验所
我是李。
我是李。
我是李。
我是李。
/ul
脚本
var ul=document . query selector( ul )；
//childNodes所有子节点，包括元素节点、文本节点等。
console . log(ul . child nodes)；
/脚本
为什么这里有五个文本节点？事实上，它们对应于五个换行符。见下图：
这五个换行符是文本节点，加上四个li元素节点，总共是9个。
注意：返回值包含所有子节点，包括元素节点、文本节点等。
如果只想得到里面的元素节点，就需要特殊处理。所以我们一般不提倡使用childNodes。
var ul=document . query selector( ul )；
for(var I=0；iul.lengthi ){
if (ul.childNodes[i].nodeType==1){
console . log(ul . child nodes[I])；
}
}node.children是一个只读属性，它返回所有子元素节点。它只返回子元素节点，其余节点不返回(这是我们重点关注的)。
虽然children是非标准的，但是各种浏览器都支持，所以我们可以放心使用。
保险商实验所
我是李。
我是李。
我是李。
我是李。
/ul
脚本
var ul=document . query selector( ul )；
console . log(ul . children)；
/脚本
3.第一个子节点和最后一个子节点
微升
我是李。
我是李。
我是李。
我是李。
/ul
脚本
var ul=document . query selector( ul )；
//1.无论是文本节点还是元素节点
console . log(ul . first child)；
console . log(ul . last child)；
//2.返回对应的自元素节点，只有IE9以上才支持。
console . log(ul . firstelementchild)；
console . log(ul . lastelementchild)；
//3.不存在兼容性问题。
console . log(ul . children[0])；
console . log(ul . children[ul . children . length-1])；
/脚本
4.兄弟节点
那么如何封装一个满足兼容性并能找到其兄弟节点的函数呢？
函数getNextElementSibling(element){
var el=元素；
while(el=el.nextSibling){
if(el.nodeType==1){
返回El；
}
}
返回null
}以上封装的代码可以解决，但是不用想太多，因为ie浏览器即将停止服务，你只要记住节点就行了。nextElementSibling并且不用担心兼容性问题。
创建节点
document . create element()方法创建由tagName指定的 tml元素。因为这些元素一开始是不存在的，是根据我的需求动态生成的，所以我们也称之为动态创建元素节点。
添加节点与添加节点
node.appendChild()方法将一个节点添加到指定父节点的子节点列表的末尾。类似于css中的after伪元素。
ul/ul
脚本
var ul=document . query selector( ul )；
var Li=document . createelement( Li )；
var span=document . createelement( span )
ul.appendChild(李)；
ul.insertBefore(span，ul . children[0])；
/脚本
删除节点
node.removeChild(child)方法从DOM中删除子节点并返回删除的节点。
保险商实验所
连牛/李
李/李
李/李
/ul
脚本
var ul=document . query selector( ul )；
ul . remove child(ul . children[2])；
/脚本
复制节点（克隆节点）
node.cloneNode()方法返回调用该方法的节点的副本。也称为克隆节点/复制节点
1.如果括号参数为空或false，则为浅复制，即只能克隆被复制的节点本身，不能删除其中的子节点。
2.如果括号参数为true，则是深度复制，将复制节点本身及其所有子节点。
保险商实验所
连牛/李
李/李
李/李
/ul
脚本
var ul=document . query selector( ul )；
var li1=ul.children[0]。clone node()；//浅层复制
var li2=ul.children[0]。cloneNode(真)；//深层复制
ul . appendchild(li1)；
ul . appendchild(li2)；
/脚本
【相关推荐：javascript视频教程，web前端】以上是一篇关于JavaScript的节点操作的文章的详细内容。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。