DOM查询（三）_beforedestroy 获取dom-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51088023/article/details/125816782

这篇博客介绍了如何使用JavaScript的DOM方法获取节点的父节点和兄弟节点。通过`parentNode`属性可以获取当前节点的父节点，而`previousSibling`和`nextSibling`属性则用于获取前一个或后一个兄弟节点。示例代码展示了如何利用这些属性来获取并打印节点的内容。

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

获取父节点和兄弟节点

通过具体的节点调用

parentNode：属性，表示当前节点的父节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var bj = document.getElementById("bj");
            //获取id为bj的li节点
            var pn = bj.parentNode;
            //返回id为bj的li节点的父节点
            alert(pn.innerHTML); 
            //打印pn的元素间的html代码
            alert(pn.innerText); 
            //打印pn的元素间的文本内容
            //innerText和innerHTML类似，不同的是它自动将标签去掉
        };
    </script>
</head>
<body>
    <ul id="shuzi">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

previousSibling：属性，表示当前节点的前一个兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var sh = document.getElementById("sh");
            //获取id为sh的li节点
            var ps = sh.previousSibling;
            //返回id为sh的li节点的前一共兄弟节点(也可能获取到空白的文本)
            alert(ps.innerText);
            //打印ps，undefined
            var ps2 =sh.previousElementSibling;
            //返回id为sh的li节点的前一共兄弟元素
            //IE8及以下不支持使用
            alert(ps2.innerText);
            //打印ps2，北京
        };
    </script>
</head>
<body>
    <ul id="shuzi">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

nextSibling：属性，表示当前节点的后一个兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var sh = document.getElementById("sh");
            //获取id为sh的li节点
            var ps = sh.nextSibling;
            //返回id为sh的li节点的后一个兄弟节点(也可能获取到空白的文本)
            alert(ps.innerText);
            //打印ps，undefined
            var ps2 =sh.nextElementSibling;
            //返回id为sh的li节点的后一个兄弟元素
            //IE8不支持使用
            alert(ps2.innerText);
            //打印ps2，广州
        };
    </script>
</head>
<body>
    <ul id="shuzi">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>