1.Node对象属性一
* nodeName
* nodeType
* nodeValue
* 使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象
<body> <span id="spanid">哈哈呵呵</span> <script type="text/javascript"> //获取标签对象 var span1 = document.getElementById("spanid"); //alert(span1.nodeType); // 1 ///alert(span1.nodeName); // SPAN ///alert(span1.nodeValue); // null //获取属性对象 var id1 = span1.getAttributeNode("id"); //alert(id1.nodeType); // 2 //alert(id1.nodeName); // id //alert(id1.nodeValue); // spanid //获取文本 var text1 = span1.firstChild; alert(text1.nodeType); // 3 alert(text1.nodeName); // #text alert(text1.nodeValue); // 内容 </script> </body>
* 标签节点对应的值
nodeType： 1
nodeName： 大写标签名称 比如SPAN
nodeValue: null
* 属性节点对应的值
nodeType： 2
nodeName： 属性名称
nodeValue: 属性的值
* 文本节点对应的值
nodeType： 3
nodeName： #text
nodeValue: 文本内容
2.Node对象的属性二
<ul>
<li>qqqqq</li>
<li>wwww</li>
</ul>
* 父节点
- ul是li的父节点
- parentNode
- //得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);
* 子节点
- li是ul的子节点
- childNodes：得到所有子节点，但是兼容性很差
- firstChild：获取第一个子节点
- //获取ul的第一个子节点 id=li1
//得到ul
var ul1 = document.getElementById("ulid");
//第一个子节点
var li1 = ul1.firstChild;
alert(li1.id);
- lastChild：获取最后一个子节点
//得到最后一个子节点
var li4 = ul1.lastChild;
alert(li4.id);
* 同辈节点
- li直接关系是同辈节点
- nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。
- //获取li的id是li3的上一个和下一个兄弟节点
var li3 = document.getElementById("li3");
//alert(li3.nextSibling.id);
alert(li3.previousSibling.id);
<body> <ul id="ulid"> <li id="li1" value="qqq">qqqqq</li> <li id="li2">wwww</li> <li id="li3">yyyyyy</li> <li id="li4">test1111</li> </ul> <script type="text/javascript"> //得到li1 var li1 = document.getElementById("li1"); //得到ul var ul1 = li1.parentNode; // alert(ul1.id); //获取ul的第一个子节点 id=li1 //得到ul var ul1 = document.getElementById("ulid"); //第一个子节点 var li1 = ul1.firstChild; //alert(li1.id); //得到最后一个子节点 var li4 = ul1.lastChild; //alert(li4.id); //获取li的id是li3的上一个和下一个兄弟节点 var li3 = document.getElementById("li3"); alert(li3.nextSibling.id); alert(li3.previousSibling.id); </script> </body>