html中节点类型
常用的节点有元素节点、属性节点、文本节点、注释节点、文档节点
来看例子：
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>
