DOM

什么是DOM树

DOM（Document Object Model）即文档对象模型。通过DOM树这样一种结构，不仅可以直观的看到HTML的整体结构，还可以利用DOM树的一些属性获取到某个元素的子节点和节点名称等信息。

HTML DOM是HTML的标准对象模型和编程接口。其定义了：

作为对象的HTML元素

所有HTML元素的属性

访问所有的HTML元素的方法

所有HTML元素的事件

所有的DOM对象主要有以下部分组成：

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中所有的标签都是元素，DOM中使用 element 表示

节点：网页中所有的内容都是节点（标签，属性，文本，注释等），DOM中用 node 表示

DOM的节点

名称	nodeType	nodeName	nodeValue	说明
元素（标签）节点	Node.ELEMENT_NODE(1)	大写的标签名	null	对应html标签元素
属性节点	Node.ATTRIBUTE_NODE(2)	属性名	属性值	对应html标签的属性，只存在于元素的属性中，并不是dom文档的一部分
文本节点	Node.TEXT_NODE(3)	#text	标签内容	对应html标签中的文本内容
CDATA节点	Node.CDATA_SECTION_NODE(4)	#cdata-section	CDATA区域中的内容	只出现在XML文档中，表示的是CDATA区域
实体引用名称节点	Node.ENTRY_REFERENCE_NODE(5)	实体引用的名称	null	只出现在XML中
实体名称节点	Node.ENTITY_NODE(6)	实体名称	null	只出现在XML中
处理指令节点	Node.PROCESSING_INSTRUCTION_NODE(7)	target	entire content excluding the target
注释节点	Node.COMMENT_NODE(8)	#comment	注释的内容	<!--注释-->
文档节点	Node.DOCUMENT_NODE(9)	#document	null	表示HTML文档，也称为根节点，指向document对象
文档类型节点	Node.DOCUMENT_TYPE_NODE(10)	doctype的名称	null	包含与文档doctype有关的所有信息
文档片段节点	Node.DOCUMENT_FRAGMENT_NODE(11)	#document-fragment	null	表示HTML文档，也称为根节点，指向document对象
DTD声明节点	Node.NOTATION_NODE(12)	符号名称	null	DTD中声明的符号

本页的所有节点

节点的属性和方法

节点类型	方法&属性	说明
所有	.nodeType	属性：返回节点类型的代码，只读
所有	.nodeName	属性：返回节点类型名，只读
所有	.nodeValue	属性：返回/设置节点的文本内容（仅文本节点、注释节点有效，元素节点返回null）
document element	.getElementsByClassName(cssClass)	通过元素的类名获取（即class属性的值）	动态HTMLCollection	空HTMLCollection
document element	.getElementsByTagName(tagName)	通过标签获取	动态HTMLCollection	空HTMLCollection
document element非标准	.getElementsByName()	通过节点的name属性获取（返回值包含非元素节点）	动态NodeList	空NodeList
document element	.querySelectorAll(selector)	根据CSS选择器获取（虽返回NodeList，但其仅支持element）	静态NodeList	空NodeList
document element	.querySelector(selector)	根据CSS选择器获取第一个（虽返回NodeList，但其仅支持element）	静态单个Element	null
element	.closest(selector)	从当前元素开始向上遍历祖先节点（包括自身），返回第一个匹配指定选择器的元素。	静态单个Element	null

本页的所有元素（标签）节点


<script>
function thisDomShowElem(V_obj,V_index)
{
	var x=V_obj.childNodes;
	x.forEach(function(e){
		if(e.nodeType==1)
		{
			var txt="";
			for(var i=0;i<V_index;i++)
			{txt+="--------";}
			document.write(txt+"<"+e.nodeName+"><br>");
			if(e.childNodes.length>0)
			{thisDomShowElem(e,V_index+1);}
		}
	});
}
var x1=document.childNodes;
x1.forEach(function(a){
if(a.nodeType==1)
	{
		document.write("<"+a.nodeName+"><br>");
		if(a.childNodes.length>0)
		{thisDomShowElem(a,1);}
	}
});
</script>