Node文本节点简介

289 阅读3分钟

①创建文本节点:
使用 document对象中的createTextNode方法;
如果项目不需要兼容IE浏览器,也可以直接使用 Text() 方法进行构造;
在某些场景下,也可以使用 cloneNode() 方法以克隆的方式进行创建;
②文本节点的内容读写:
文本节点的内容读写可以使用 textContent 属性完成,注意,innerText 是无效的,因为 innerText 是 HTMLElement 方法,不是 Node 方法;
对于文本节点,也可以使用 nodeValue 属性返回文本内容;
然而,有时候,开发人员希望获取的是所有相邻的文本内容,而不是当前文本节点,可以使用 wholeText 属性进行获取;
③节点的插入:
外前插使用 before() 方法,
外后插使用 after() 方法,
内前置使用 prepend() 方法,
内后置使用 append() 方法。
相比传统的 insertBefore() 和 appenChild() 方法,上面几个方法支持一次性操作多个元素,这在多节点同时处理的时候非常有用;
④节点的替换:
在过去,节点替换都是使用 replaceChild() 方法;
如今,只要项目不需要兼容 IE 浏览器,请使用 replaceWith() 或 replaceChildren() 方法代替,语法更简单更符合直观认知,支持多参数。其中,replaceWith 是替换当前元素,replaceChildren 是替换当前元素的所有子元素;
⑤节点的分割与合并:
有时候我们希望一个文字节点分成两个不同的文本节点,以便继续之后精细的控制处理,例如替换,装载,删除等,此时可以使用 splitText() 方法;
如果希望多个独立的文本节点合并为同一个(多文本节点很多时候会增加我们的判断和实现成本),则可以使用 Node.normalize() 方法;
⑥节点的上下求索:
想要获取节点的父级节点,可以使用 Node.parentNode;
想要获取节点的父级元素,可以使用 Node.parentElement;
想要获取某个祖先元素,可以使用 closest(selector) 方法,参数是该元素匹配的选择器;
文本节点是没有子节点的,因此 TextNode.childNodes 的长度一定是 0;
元素节点的所有子元素,使用 element.children,所有节点使用 element.childNodes, 返回值都是类数组,不支持 map, some等数组方法,可以使用 Array.from() 方法,或者 […] 语法转为数组;
查找某个对应选择器的元素,可以使用 querySelector() 或者 querySelectorAll() 方法,
如果是寻找匹配某选择器的子元素,可以辅助 :scope 伪类;
对于第一个子节点,可以使用 element.firstChild 获取,
第一个子元素使用 element.firstElementChild;
对于最后一个子节点可以使用 element.lastChild 获取,
最后一个子元素使用 element.lastElementChild;
前一个兄弟节点可以使用 Node.previousSibling 获取,如果没有,返回值会是 null,
前一个兄弟元素使用 Node.previousElementSibling 获取;
后一个兄弟节点可以使用 Node.nextSibling 获取,
后一个兄弟元素使用 Node.nextElementSibling 获取;
⑦节点的匹配判断:
要判断A节点是否等于B节点,简单点的做法直接 == 判断;
也可以使用 Node.isSameNode() 方法进行判断;
如果希望判断两个节点是否一致,所谓一致就是标签一样,属性一样,内容一样,可以使用 Node.isEqualNode 方法;
如果节点是元素,且判断其是否匹配某种特性,可以使用 matches 方法进行判断;
如果希望判断一个 Node 节点是否在文档中,而不是在内存中(执行 Node.remove() 删除,或者 replaceWidth() 替换后),可以使用 Node.isConnected 判断,返回 true 则表示在DOM树中,在文档流中;
⑧节点的类型判断:
如果 node.nodeType == 1,则当前节点是元素;
如果 node.nodeType == 3,则当前节点是文本;
nodeType属性值还有其他类型,例如评论、文档类型等,不过平常用的不多,只需要记住1和3这两个值就可以了。
如果1和3总是记不住,也可以使用Node常量表示。
其中,Node.ELEMENT_NODE表示元素节点,Node.TEXT_NODE表示文本节点;
⑨节点的位置:
使用的是 compareDocumentPosition 这个 API
(参考:www.zhangxinxu.com/wordpress/2…