Javascript 节点关系

最新推荐文章于 2025-04-03 21:47:02 发布

原创最新推荐文章于 2025-04-03 21:47:02 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

56 篇文章

订阅专栏

本文详细解析了如何使用JavaScript获取HTML元素的父节点、子节点、兄弟节点，并展示了如何遍历这些节点来获取节点的名称、类型和值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>节点关系</title>
    <script type="text/javascript">
        function Demo() {
            var divObj = document.getElementById("divDemo");
            //获取父节点
            var parentNode = divObj.parentNode;
            //displayNodeInfo(parentNode);

            //获取子节点
            var childNodes = divObj.childNodes;    //子节点返回的是一个集合，即数组
            //alert(childNodes.length);            //显示节点个数
            //displayNodeInfo(childNodes[0]);

            //获取兄弟节点
            //----------获取上一个兄弟节点
            var preBrotherNode = divObj.previousSibling.previousSibling;   //标签之间存在空行时，会出现一个空白的文本节点，在获取节点时，一定要注意。
            //displayNodeInfo(preBrotherNode);
            //----------获取下一个兄弟节点
            var nextBrotherNode = divObj.nextSibling;
            displayNodeInfo(nextBrotherNode);
        }

        function displayNodeInfo(node) {
            alert("Name:" + node.nodeName + ",Type:" + node.nodeType + ",Value:" + node.nodeValue);
        }
    </script>
</head>
<body>
    <input type="button" value="测试" onclick="Demo()" />

<div id="divDemo">div内容</div>