JS基础-DOM查询02

原创于 2019-05-24 21:33:58 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

35 篇文章

订阅专栏

博客介绍了获取节点的父节点和兄弟节点的方法。通过具体节点调用相关属性，如使用parentNode属性获取当前节点的父节点，使用previousSibling属性获取前一个兄弟节点，使用nextSibling属性获取后一个兄弟节点。

获取父节点和兄弟节点
通过具体的节点调用
1 parentNode
属性,表示当前节点和父节点

2 previousSibling
属性,表示当前节点的前一个兄弟节点

3 nextSibling
属性,表示当前节点的后一个兄弟节点

<button id="btn">点我一下</button>
    <ul id="city">
        <li id="sh">上海</li>
        <li>北京</li>
        <li>福州</li>
    </ul>
    <Script>
        function myClick(idStr, fun){
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        };

        // function test(){
        //     alert("hello");
        // };
        // myClick('btn', test);
        
        /*
        innerText:
            - 该属性可以获取到元素内部的文本内容.
            - 它和innerHTML类似, 不同的是它会自动将html标签去除
        */
        myClick('btn', function(){
            var beijing = document.getElementById('sh');
            var pn = beijing.parentNode;
            alert(pn.innerHTML);
            alert(pn.innerText);
        });
    </Script>