Node.nodeType节点

最新推荐文章于 2022-06-29 16:36:15 发布

晚风吹心事

最新推荐文章于 2022-06-29 16:36:15 发布

阅读量796

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Frazier1995/article/details/116005561

版权

javascript 专栏收录该内容

60 篇文章 2 订阅

订阅专栏

常用的节点类型

文档节点 document 9

元素节点 element 1

属性节点 Attr 2

文本节点 text 3

注释节点 comment 8

示例：获取一行注释节点


<body>
    <input id="ipt" type="text" placeholder="请输入你的用户名">
    <!--这是一行注释，请勿删除-->
</body>
</html>
<script>

    let ipt = document.getElementById('ipt')//这里首先获取元素节点
    
    let nextNode = ipt.nextSibling.nextSibling //第一个节点是回车，所以需要两个下一个兄弟节点

    console.dir(nextNode);
</script>

节点的层级

父级节点parentNode

parentNode属性可返回某节点的父节点，注意是最近的一个父节点！

如果指定的节点没有父节点则返回null

子级节点childNodes

childNodes 获取的是子节点的集合

children（非标准的）是一个只读属性，返回所有子元素节点常用

子节点的第一个元素 firstChild

子节点的最后一个元素 lastChild

兄弟节点

nextSibling 返回当前元素的下一个兄弟节点

previousSibling 返回当前元素的上一个兄弟节点

节点操作

创建节点

docment.createElement('标签名') 创建由标签名指定的HTML元素，也叫动态创建元素节点。

添加节点

node.appendChild(child) 将一个节点添加到他指定的父节点的子节点列表末尾

node.insertBefore(child,指定元素) 将一个节点添加到他指定的父节点的子节点列表前面

删除节点

node.removeChild()方法从node中删除一个子节点。

克隆节点

node.cloneNode() 克隆节点

注意事项：

1 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

2 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。

创建元素的三种方式

document.write()

elemengt.innerHTML()

document.createElement()

区别：

1document.write() 将内容写入页面，会导致页面重绘

2innerHTML将内容写入某个Dom节点，不会导致页面重绘

3如果页面创建元素较多，建议用innerHTML，效率高

4如果页面创建元素较少，建议用increateElement，效率高

晚风吹心事

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
Node.nodeType节点

常用的节点类型文档节点document9元素节点element1属性节点Attr2文本节点text3注释节点comment8示例：获取一行注释节点<body> <input id="ipt" type="text" placeholder="请输入你的用户名"> </body></html><s...
复制链接

扫一扫