document对象通过节点的局次关系获取节点对象的方法演示：

最新推荐文章于 2022-06-10 09:35:43 发布

xdd_lmd

最新推荐文章于 2022-06-10 09:35:43 发布

阅读量802

点赞数

分类专栏： DOM 文章标签： document对象

本文链接：https://blog.csdn.net/xdd_lmd/article/details/47159719

版权

DOM 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

通过节点的层次关系获取节点对象。
关系：
1，父节点: parentNode:对应一个节点对象。
2，子节点：childNodes:对应一个节点集合。
3，兄弟节点：
上一个兄弟节点：previousSibling
下一个兄弟节点：nextSibling

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>Untitled Document</title>
    </head>
    <body>
        <input type="button" value=" 通过节点层次关系获取节点 " onclick="getNodeByLevel()"/>
        <div>div区域</div>
        <span>span区域</span>
        <table id="tabid">
            <tr>
                <td>单元格一</td>
                <td>单元格二</td>
            </tr>
        </table>
       <span>span区域11</span>
        <dl>
            <dt>上层项目</dt>
            <dd>下层项目</dd>
        </dl>
        <a href=''>一个超链接</a>    
    </body>
        <script type="text/javascrip">
        //获取页面中的表格节点。
        var tabNode = document.getElementById("tabid");
        //获取父节点。parentNode
        // var node = tabNode.parentNode;
        // alert(node.nodeName);//body


        //获取子节点。childNodes
        // var nodes = tabNode.childNodes;
        // alert(nodes[0].nodeName);//结果为：因为浏览器的不同，会出现不同的结果。一种是#text,就是空白文本节点。另外一种就是TBODY



        //获取兄弟节点。
        //上一个。
         var node = tabNode.previousSibling;
         alert(node.nodeName);//SPAN或#text
        //下一个
         var node = tabNode.nextSibling.nextSibling;
         alert(node.nodeName);

// 尽量少用兄弟节点，因为在解析的时候会出现浏览器不同解析不一致，
// 会解析出标签间的空白文本节点
        </script>
</html>