js node节点深入理解

最新推荐文章于 2024-03-09 10:58:18 发布

佛系努力中……

最新推荐文章于 2024-03-09 10:58:18 发布

阅读量1k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_45706352/article/details/113539387

版权

第一部分：什么是node节点

node是个接口，有许多DOM类型从这个接口继承，并允许类似的处理（或检测）这些各种类型。在方法和属性不相关的特定情况下，这些接口可能会返回null。
比如说，DOM中的Element，Text和Comment都继承于它。换句话说，Element，Text和Comment是三种特殊的Node，它们分别叫做ELEMENT_NODE,TEXT_NODE和COMMENT_NODE。
在这里插入图片描述 Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，文本节点，注释节点等，通过NodeType区分，常见的有：

节点类型	NodeType
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

节点的属性

节点值页面中的所有内容，包括标签、属性、文本
nodeType，节点类型：如果是标签，则是1；如果是属性。则是2；如果是文本，则是3
nodeName，节点名字：如果是标签，则是大写的标签，如果是属性，则是小写的属性；如果是文本，则是#text
nodeValue，节点的值：如果是标签，则是null；如果是属性，则是属性值；如果是文本，则是文本内容

例如：

实际上Node表示的是DOM树的结构，在html中，节点与节点之间是可以插入文本的，这个插入的空隙就是TEXT_NODE，即：

<body>
    we can put text here 1...
    <h1>China</h1>
    we can put text here 2...
    <!-- My comment ...  -->
    we can put text here 3...
    <p>China is a popular country with...</p>
    we can put text here 4...
    <div>
      <button>See details</button>
    </div>
    we can put text here 5 ...
</body>

所以：body的直系元素（3）＋ COMMENT_NODE(1) + TEXT_NODE(5) = 9

第二部分：常用操作

获取元素节点
getElementById()：获取指定唯一id的元素。
getElementByTagName()：获取指定元素标签名的元素数组。
getElementByName()：获取具有指定属性name的元素数组。
子节点
element.childNodes：返回该元素的子节点数组。注意：换行在浏览器中作为text节点，需要进行过滤
element.firstChild：该元素的第一个子节点。
element.lastChild：该元素最后一个子节点。
父节点
element.parentNode
兄弟节点
element.previousSibling：返回相同的树层级中的前一个节点，如果没有，则为null
element.nextSibling：返回相同的树层级中的后一个节点，如果没有，则为null
创建节点
createElement() 按指定标签名创建节点
复制节点
clonedNode = Node.cloneNode(boolean) 传入布尔值，true表示复制该节点下的所有子节点
加入节点
parentNode.appendChild(childNode) 将新节点加入到子节点末尾
parentNode.insertBefore(newNode, targetNode) 将newNode 加入到targNode之前
移除目标节点
parentNode.removeChild(childNode)
替换目标节点
parentNode.replace(newNode, targetNode) 使用newNode 替换targetNode

佛系努力中……

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js node节点深入理解

node是个接口，有许多DOM类型从这个接口继承，并允许类似的处理（或检测）这些各种类型。在方法和属性不相关的特定情况下，这些接口可能会返回null。比如说，DOM中的Element，Text和Comment都继承于它。换句话说，Element，Text和Comment是三种特殊的Node，它们分别叫做ELEMENT_NODE,TEXT_NODE和COMMENT_NODE。Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，文本节点，注释节点等，通过N
复制链接

扫一扫