DOM概述

一、概述
　　HTML：超文本标记语言
　　XHTML：严格的HTML语言标准
　　DHTML：动态网页技术的统称 =HTML+CSS+JS
　　XML：可扩展的标记语言，可自定义标签

　　BOM(Brower Object Model)：浏览器对象模型(专门操作浏览器窗口的API),没标准。
　　DOM(Document Object Model)：文档对象模型(专门操作网页内容的API)

　　核心DOM:操作所有结构化文档(XML,HTML)的通用API
　　HTML DOM:针对HTML文档的简化API
　　HTML DOM不能完成所有功能,实际开发中都是核心DOM与HTML DOM配合使用

二、DOM树
　　文档中的每一个元素，属性，文本，注释，都被看做一个节点对象--Node(所有节点对象的父类型)
　　所有节点对象都是document对象的子节点

 1 <script>
 2     //打印任意对象的原型链
 3     function getProto(obj){
 4         while((obj=Object.getPrototypeOf(obj))!=null){
 5             console.log(console.log(obj));
 6         }
 7     }
 8     getProto(document);
 9         getProto(document.body.childNodes[1].childNodes[0]);//a
10 </script>
11 /*输出document对象的原型链
12     HTMLDocument   -->
13     Document  -->
14     Node  -->
15     EventTarget  -->
16     Object
17 */
18 /*输出一个a标签的原型链
19     Text  -->
20     CharacterData  -->
21     Node  -->
22     EventTarget  -->
23     Object  -->
24 */

　　节点树:

　　整个文档是一个文档节点(document node)
　　每个HTML标签是一个元素节点(element node)
　　包含在HTML元素中的文本是文本节点(text node)
　　每一个HTML属性是一个属性节点(attribute node)
　　注释属于注释节点(comment node)

节点类型	Document	Element	Attr	Text	Comment
描述	document节点对象的父类型	所有元素节点的父类型	属性节点对象的类型	文本节点对象的类型	注释节点对象的类型

　　HTML文档内的所有内容都被视为文档树中的一个节点

　　Node类型定义的3个公共属性
　　　　nodeType:节点的类型的数值
　　　　用于判断获得的节点类型;如果是元素节点,返回1;如果是文本节点,返回3;

节点类型	元素节点	文本节点	属性节点	注释节点	文档节点
nodeType	1	3	2	8	9

　　　　nodeName:节点的名称(只读)
　　用于判断获得的标签名;如果是元素节点,返回标签名(都是大写);如果是文本节点,返回#text(小写);

节点类型	元素节点	文本节点	属性节点	注释节点	文档节点
nodeName	标签名(大写)	#text	属性名	#comment	#document

　　　　nodeValue:节点的值

　　　　　　元素节点,返回null;文本节点,返回文本内容;

节点类型	元素节点	文本节点	属性节点	注释节点	文档节点
nodeValue	undefiend或null	文本本身	属性值	注释文本本身	undefiend或null

 1 <body>
 2     <a href="http://tmooc.cn">我的链接</a>
 3     <h1>我的标题</h1>
 4  </body>
 5  <script>
 6     console.log(document.body.nodeType);//1
 7     console.log(document.body.nodeName);//BODY
 8     console.log(document.body.nodeValue);//null
 9 
10     console.log(document.body.childNodes.length);//6 空格换行都属于childNodes获取的节点
11  </script>

　　DOM树的6种关系,6个属性(6个API):

　　　　父子(4个):parentNode(父节点) childNodes(子节点集合) firstChild(第一个子节点) lastChild(最后一个子节点)
　　　　兄弟(2个):previousSibling(上一个兄弟节点) nextSibling(下一个兄弟节点)

　　元素树 节点树的一个子集，只包含其中的元素节点

　　　(IE8不兼容) children可用