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>