一、概述
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)
HTML文档内的所有内容都被视为文档树中的一个节点
Node类型定义的3个公共属性
nodeType:节点的类型的数值
用于判断获得的节点类型;如果是元素节点,返回1;如果是文本节点,返回3;
nodeName:节点的名称
用于判断获得的标签名;如果是文本节点,返回标签名(都是大写);如果是文本节点,返回#text(小写);
nodeValue:节点的值
元素节点,返回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 11 </script>
DOM树的6种关系,6个属性(6个API):
父子(4个):parentNode childNodes firstChild lastChild
兄弟(2个):previousSibling nextSibling