dom 节点概览
DOM 文档对象模型
概念：DOM 的目的是为使用 JavaScript 操作 DOM 提供编程接口
节点类型
全部的节点类型
Node 构造函数的属性，也是节点属性 nodeType 的值
ELEMENT_NODE----1
ATTRIBUTE_NODE----2
TEXT_NODE----3
CDATA_SECTION_NODE----4
ENTITY_REFERENCE_NODE----5
ENTITY_NODE----6
PROCESSING_INSTRUCTION_NODE----7
COMMENT_NODE----8
DOCUMENT_NODE----9
DOCUMENT_TYPE_NODE----10
DOCUMENT_FRAGMENT_NODE----11
NOTATION_NODE----12
DOCUMENT_POSITION_DISCONNECTED----1
DOCUMENT_POSITION_PRECEDING----2
DOCUMENT_POSITION_FOLLOWING----4
DOCUMENT_POSITION_CONTAINS----8
DOCUMENT_POSITION_CONTAINED_BY----16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC----32
常用节点类型
DOCUMENT_NODE ---- 9 (window.document)
ELEMENT_NODE ---- 1 (<body> <p> 等标签元素)
ATTRIBUTE_NODE ---- 2 (class="test")
TEXT_BODE ---- 3 (文本节点)
DOCUMENT_FRAGMENT_NODE ---- 11 (document.createDocumentFragment())
DOCUMENT_TYPE_NODE ---- 10 (<!DOCUMENT html>)
节点继承链
所有节点类型都继承自 Node，并且这个继承链可能更长
Object -> EventTarget -> Node -> Element -> HTMLElement -> HTML*Element
Object -> EventTarget -> Node -> Attr (DOM4 弃用)
Object -> EventTarget -> Node -> CharacterData -> Text
Object -> EventTarget -> Node -> Document -> HTMLDocument
Object -> EventTarget -> Node -> DocumentFragment
继承链中的每一个环节都为最终的节点类型提供了大量的属性和方法
节点属性
nodeType
- 读写特性：只读
- 描述：节点的类型，返回以上常量值
nodeName
- 读写特性：只读
- 描述：节点名字，该属性的返回值根据节点类型不同而异：
元素节点返回标签名，与 tagName 值相同 文本节点返回 #text Comment 节点返回 #comment Document 返回 #document DocumentFragment 返回 #document-fragmentnodeValue
- 读写特性：读写
- 描述：除了 Text 和 Comment 节点以及 Attr 节点，所有节点的 nodeValue 都返回 null nodeValue 的作用就是获取 Text 和 Comment 节点的实际文本字符串，也可以通过设置 nodeValue 的值修改 这两个节点内的文本内容
innerHTML
- 读写特性：读写
- 描述：
读：读取元素节点的内容（标签和文本) 作为 JavaScript 字符串
写：设置元素节点的内容（标签将被解析为真正的 HTML 元素)。
注意：因为 innerHTML 会调用一个沉重且高消耗的 HTML 解析器。所以慎用
outerHTML
- 读写特性：读写
- 描述：
读：读取包含元素本身及其内容作为 JavaScript 字符串
写：设置的内容将替换自身标签将被解析为真正的 HTML 元素
textContent
- 读写特性：读写
- 描述：
读：获取元素节点内所有文本节点的值，包括其子元素节点的文本节点
写：将 JavaScript 字符串创建为文本节点作为该元素的子节点（原有的所有子节点将被删除)
注意：在 文档节点(document) 或 文档类型节点(document.doctype) 调用 textContent 返回 null textContent 属性也能返回 `
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： 主流的异步处理方案
下一篇： WAF Bypass 介绍分析
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论