DOM(Document Object Model)文档对象模型,将网页转为一个JS对象,从而用脚本进行各种操作。
七种节点类型:
-
Document
:,文档树的顶层节点 -
DocumentType
:doctype标签 -
Element
:各种HTML标签 -
Attribute
:网页元素的属性 -
Text
:标签之间或标签包含的文本 -
Comment
:注释 -
DocumentFragment
:文档的片段
浏览器提供一个原生的节点对象Node
,具有共同的属性和方法。
节点树中各节点的关系:
- 父节点关系
- 子节点关系
- 同级节点关系
Node接口
DOM操作的基础是Node。
nodeType
属性,表示节点的类型
document.nodeType //9
不同节点的nodeType属性值和对应的常量如下:
- document:9, 对应常量
Node.DOCUMENT_NODE
- element:1, 对应常量
Node.ELEMENT_NODE
- attr:2, 对应常量
Node.ATTRIBUTE_NODE
- text:3, 对应常量
Node.TEXT_NODE
- DocumentFragment:11, 对应常量
Node.DOCUMENT_FRAGMENT_NODE
- DocumentType:10,对应常量
Node.DOCUMENT_TYPE_NODE
- Comment:8,对应常量
Node.COMMENT_NODE
文档节点:
- nodeName:#document
- nodeValue:null
元素节点:
- nodeName:大写的标签名
- nodeValue:null
属性节点:
- nodeName:属性的名称
- nodeValue:null
文本节点:
- nodeName:#text
- nodeValue:文本内容
文档片段节点:
- nodeName:#document-fragment
- nodeValue:null
文档类型节点:
- nodeName:文档的类型
- nodeValue:null
注释节点:
- nodeName:#comment
- nodeValue:文本内容
未完待续。。。