JS 节点的属性 与 元素
节点的属性{
nodeType 是节点的类型；
nodeNam 是节点的名字
nodeValue 节点的值
}可以用节点.属性 取得三个属性的值
节点.nodeType 出来的结果代表类型、如果是：
如果是：数字1 那么代表这个节点是个标签节点类型；
如果是：数字2 那么代表这个节点是个属性节点类型；
如果是：数字3 那么代表这个节点是个文本节点类型；
节点.nodeNam 出来的结果是节点名字、
如果是：大写的标签、 那么代表这个节点是个标签节点；
如果是：小写的属性名、 那么代表这个节点是个属性节点；
如果是：#text、 那么代表这个节点是个文本节点；
节点.nodeValue 出来的结果是节点的值、
如果是：null、 那么代表这个节点是个标签节点；
如果是：属性的值、 那么代表这个节点是个属性节点；
如果是：文本的内容、 那么代表这个节点是个文本节点；
如下图的HTML：
<div id="dv"> <span>这是div中的第一个span标签</span> <p>这是div中的第二个元素,第一个p标签</p> <ul id="uu"> <li>乔峰</li> <li>鹿茸</li> <li id="three">段誉</li> <li>卡卡西</li> <li>雏田</li> </ul> </div>
结果：
var dvObj=document.getElementById("uu"); // 获取里面的每个子节点 // for(var i=0;i<dvObj.childNodes.length;i++){ // var node=dvObj.childNodes[i]; // console.log('节点的类型：'+node.nodeType+' '+"节点的名字："+node.nodeName+' '+"节点的值："+node.nodeValue); // } var liobj=document.getElementById('three'); console.log(liobj.nodeType+' '+liobj.nodeName+' '+liobj.nodeValue) // 1 LI null // 1 代表这个节点是标签类型 // LI 代表这个节点是属性名字 // null 代表这个节点是标签节点
获取相关的节点：
//12行代码:都是获取节点和元素的 //取得 ul整个节点 var ulObj=document.getElementById("uu"); //节点.parentNode：取得父级节点 console.log(ulObj.parentNode); // 整个div的内容 //节点.parentElement 取得父级元素 console.log(ulObj.parentElement); //整个div的内容（跟节点一样） //节点 .childNodes 取得子节点 console.log(ulObj.childNodes); // NodeList(11) 里面是11个子节点 （5个li 6个空格） //节点.children 取得子元素 console.log(ulObj.children);// HTMLCollection(5) 元素只能是标签（5个li标签） //节点..firstChild 取得第一个子节点 console.log(ulObj.firstChild);//------------------------#text 是一个文本节点 在IE8中是第一个子元素 //节点.firstElementChild 取得第一个子元素 console.log(ulObj.firstElementChild);//----------------- <li>乔峰</li> 注意在IE8中不支持 // 节点.lastChild 取得最后一个子节点 console.log(ulObj.lastChild);//------------------------#text 是一个文本节点 IE8中是第一个子元素 // 节点.lastElementChild 取得最后一个子元素 console.log(ulObj.lastElementChild);//-----------------<li>雏田</li> 注意在IE8中不支持 //某个元素的前一个兄弟节点 console.log(my$("three").previousSibling); // #text 是一个文本节点 //某个元素的前一个兄弟元素 console.log(my$("three").previousElementSibling);// <li>鹿茸</li> //某个元素的后一个兄弟节点 console.log(my$("three").nextSibling);// #text 是一个文本节点 //某个元素的后一个兄弟元素 console.log(my$("three").nextElementSibling);// <li>卡卡西</li> //总结:
凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点 凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素 从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
