html中节点类型

佚名 6年前 (2019-04-22) 随笔 965人围观抢沙发百度已收录

常用的节点有元素节点、属性节点、文本节点、注释节点、文档节点

来看例子：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2         "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>节点</title>
 7     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 8     <script type="text/javascript">
 9       $(function(){
10         //元素节点
11         var li = $('li').first()[0];//document.getElementById('firstLi')
12         console.info(li.nodeType);
13         console.info(li.nodeName);
14         console.info(li.nodeValue);
15 
16        //属性节点
17        var idAttr = li.getAttributeNode('id');//li.attributes[0]
18        console.info(idAttr.nodeType);
19        console.info(idAttr.nodeName);
20        console.info(idAttr.nodeValue) 
21 
22        //文本节点
23        var textNode = li.firstChild;//li.childNodes[0]
24        console.info(textNode.nodeType);  
25        console.info(textNode.nodeName);
26        console.info(textNode.nodeValue);  
27 
28        /**
29        childNodes:既有文本节点、也有元素节点
30        children  :没有文本节点、但有元素节点
31        */
32 
33        //注释节点 
34        var comment = document.getElementsByTagName('body')[0].firstChild
35        console.info(comment.nodeType);
36        console.info(comment.nodeName);
37        console.info(comment.nodeValue);
38 
39        //文档节点
40        console.info(document.nodeType);
41        console.info(document.nodeName);
42        console.info(document.nodeValue);              
43 
44       });
45 
46 /*
47 
48 5种节点：
49 
50 { 
51             元素节点   属性节点     文本节点            注释节点    文档节点 
52 nodeType：  1          2           3                  8          9 
53 nodeName：  标签名     属性名称     #text              #comment   #document
54 nodeValue： null       属性value   标签中间夹的文本值   注释内容    null
55 }
56 
57 */
58 
59 
60     </script>
61 </head>
62 <body><!--测试注释~~~-->
63   <ul>
64    <li id='firstLi'>文本1<span>测试span</span></li>
65    <li>2</li>
66    <li>3</li>
67    <li>4</li>
68   </ul>
69 </body>
70 </html>