判断节点类型
节点属性:(可以使用标签–元素.出来,可以使用属性节点.出来,文本节点.出来)
- 可通过以下属性判断节点,元素的类型
- nodeType 节点类型: 1–标签 2–属性 3—文本
- nodeName 节点名字: 标签节点–大写的标签名字, 属性节点—小写的属性名字, 文本节点 —#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>
//获取div
//获取div
var dvobj=document.getElementById("dv");
//获取的是属性节点
var node=dvobj.getAttributeNode("id");
console.log(dvobj.nodeType+"==="+node.nodeName+"==="+node.nodeValue);
- 得到的结果是:2===id===dv
依据以上判定 本元素是个属性 属性的名字是:dv,属性类型是id
获取节点和元素:
//12行代码:都是获取节点和元素的
var ulobj=document.getElementById("uu");
//父级节点
console.log(ulobj.parentNode);
//父级元素
console.log(ulobj.parentElement);
//子节点
console.log(ulobj.childNodes);
//子元素
console.log(ulobj.children);
//第一个子节点
console.log(ulobj.firstChild); //----------ie8凡是节点的都变成一个子元素
//第一个子元素
console.log(ulobj.firstElementChild);//------ie8凡是元素的都变成undefined
//最后一个子节点
console.log(ulobj.lastChild);
//最后一个子元素
console.log(ulobj.lastElementChild);
//某个元素的前一个兄弟节点
console.log(my$("three").previousSibling);
//某个元素的前一个兄弟元素
console.log(my$("three").previousElementSibling);
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);
- 可以把这2段代码复制出去验证一下,因为输出太多我这里就不贴出来了
注意:
- 凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点
- 凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素
- 从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,
- 在IE8中得到的是undefined—-元素的代码,iE中不支持