Dom概述

Dom是javaScript操作网页的接口，全称为“文档对象模型”（Document object Model）,他的作用是将网页转换成一个javaScript对象，从而可以用脚本进行各种操作。

节点

Dom的最小组成单位叫做节点(node)，文档的树形结构(Dom树)，就是由各种不同类型的节点组成。每个节点可以是文档树的一片叶子。

注意：DOM不是javaScript语法的一部分，但是DOM是javaScript最常见的任务，离开了dom,javaScript就无法控制网页。

节点的类型有7种

Document:整个文档树的顶层节点

DocumentType:doctype标签

Element:网页的各种HTML标签

Attribute:网页元素的属性

text:标签之间或标签包含的文本

Comment:注释

DocumentFragment:文档的片段

节点树

他有一个顶层节点，下一层都是顶层节点的子节点，子节点又可以有自己的子节点倒过来就像一棵树。

顶层文档

document//整个文档树

 除了根节点，其他节点都有三种阶层关系

父节点关系（parentNode）:此节点的上级节点

子节点关系（childNodes）:直接的下级节点

同级节点关系（sibling）:拥有同一个父节点的节点

Node.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

 

if(document.nodeType==9){
			console.log("顶层节点");
}

同样的，如果操作的节点为1，那么他就是一个元素节点

主要概括：Dom可以理解为js操作页面的接口，而页面又可以分文一个节点来处理，操作节点来达到最终的目的