JavaScript HTML DOM元素 节点操作汇总(2)

<div> <p> parentNode 获取指点节点的父节点</p> </div> <script type="text/javascript"> var mynode= document.getElementById("con"); document.write(mynode.parentNode.nodeName); </script>

注意: 父节点只有一个,浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

8.访问兄弟节点

nextSibling //可返回某个节点之后紧跟的节点(处于同一树层级中)。

语法:nodeObject.nextSibling

previousSibling //可返回某个节点之前紧跟的节点(处于同一树层级中)。

语法:nodeObject.previousSibling

eg:

<ul> <li>Coffee</li> <li>Tea</li> </ul> <p>点击按钮来获得首个项目的下一个同胞。</p> <button>试一下</button> <script> function myFunction() { var x=document.getElementById("demo"); x.innerHTML=document.getElementById("item1").nextSibling.innerHTML; } </script>

注意: 如果无此节点,则该属性返回 null。两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。

解决问题方法:判断节点nodeType是否为1, 如是为元素节点,跳过。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ff97a1ba3543145781d2d94e62836c72.html