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可用
