day-13.2 DOM操作，获取节点

DOM ： Document.Object.Model 文档对象模型；

DOM的节点类型可以分为：

　　document. 文档节点；

　　html元素 元素节点；

　　文本节点（包含文字，空格，换行）；

　　HTML标签属性 属性节点；

　　注释节点；

DOM为所有节点类型预写了对象，JS通过节点对象调用DOM，实现对Document的操作；

根据每个HTML文档的布局，各个节点建立父子关系的关系树，通过关系树去对各个节点对象实现调用；

API1：父元素节点.childNodes;找某个元素节点的所有子节点；（只找儿子，以下的不找）；

 1 <body>
 2         <div id="wrap">
 3             <ul>
 4                 <li>哈哈</li>
 5                 <li>呵呵</li>
 6                 <li>嘘嘘</li>
 7             </ul>
 8         </div>
 9         
10         <script>
11             var oWrap = document.getElementById("wrap");
12                 console.log(oWrap.childNodes); //输出3个节点,1.text;2.ul;3.text; IE8及以下不把空格跟换行当成文档节点，只显示元素节点；
13 </body>

API2：父元素节点.children；只获取子节点的所有元素节点（有标签的节点；），不获取元素节点之外的节点；

 

API3：父元素节点.nodeType，节点类型；

 1 <div id="wrap">
 2       <ul>
 3             <li>哈哈</li>
 4             <li>呵呵</li>
 5             <li>嘘嘘</li>
 6      </ul>
 7 </div>
 8 <script>
 9         var oWrap = document.getElementById("wrap");
10         console.log(oWrap.childNodes[1].nodeType); //childNodes[1]是UL,是一个元素节点，返回1；
11 </script>

 

文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。

存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点：

节点类型编号；

节点类型描述子节点
1 Element 代表元素 Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2 Attr 代表属性 Text, EntityReference
3 Text 代表元素或属性中的文本内容。 None
4 CDATASection 代表文档中的 CDATA 部分（不会由解析器解析的文本）。 None
5 EntityReference 代表实体引用。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6 Entity 代表实体。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7 ProcessingInstruction 代表处理指令。 None
8 Comment 代表注释。 None
9 Document 代表整个文档（DOM 树的根节点）。 Element, ProcessingInstruction, Comment, DocumentType
10 DocumentType 向为文档定义的实体提供接口 None
11 DocumentFragment 代表轻量级的 Document 对象，能够容纳文档的某个部分 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12 Notation 代表 DTD 中声明的符号。 None

 

 获取元素的API集合；

 1 <body>
 2         <div id="wrap">
 3             <p></p>
 4             <ul style="width: 100px;height: 100px;background-color: yellow">
 5                 <li>哈哈</li>
 6                 <li>呵呵</li>
 7                 <li>嘘嘘</li>
 8             </ul>
 9             <span></span>
10         </div>
11 
12         <script>
13             var oWrap = document.getElementById("wrap");
14                 console.log(oWrap.childNodes[3].nodeType);
15                 console.log(oWrap.childNodes[3].nodeName);
16                 console.log(oWrap.childNodes[3].tagName);
17                 console.log(oWrap.childNodes[3].getAttributeNode("style"));
18             var a = document.createAttribute("title"); //这个只是创建一个标签属性，自带等号，给属性添加值是另外的API，这个只是创建一个属性节点；
19             //var b = "style=\"widht:200px;height:200px;background-color=pink\"";
20                 console.log(a); //title
21                 oWrap.setAttributeNode(a); //只能插入一个属性节点，并不能直接插入行内样式；
22                 console.log(oWrap.firstElementChild); //获取第一个元素节点； p
23                 console.log(oWrap.lastElementChild); //获取最后一个元素节点； span
24                 console.log(oWrap.firstChild); //获取第一个元素节点； text  //IE8及以下会返回P
25                 console.log(oWrap.lastChild); //获取最后一个元素节点； text //IE8及以下会返回SPAN
26                 console.log(oWrap.firstElementChild.nextElementSibling);//获取某个节点的下一个兄弟元素节点；
27                 console.log(oWrap.firstElementChild.nextSibling);//获取某个节点的下一个节点；
28                 console.log(oWrap.firstElementChild.previousElementSibling);//获取某个节点的上一个兄弟元素节点；
29                 console.log(oWrap.firstElementChild.previousSibling);//获取某一个基点的上一个兄弟节点；
30                 console.log(oWrap.parentNode); //获取父级节点；IE可以正常使用，不存在兼容问题；
31                 console.log(oWrap.offsetParent); //获取定位参考父级；即父级元素里面以谁为定位参考就获取谁；
32                 console.log(oWrap.childElementCount);//获取子元素节点的数量；不兼容IE8及以下；
33 
34         </script>
35 </body>

 

posted @ 2018-06-19 23:18  bibiguo  阅读(111)  评论(0)    收藏  举报