本站目前升级了全新主题zhime,该主题色彩更清新明亮。售价99元/套,你值得拥有,后台配置全,永久更新。另外还有Next.js版本!😃

JavaScript-获取当前元素的相关元素或节点

1.获取当前元素中的第一个子节点

code
document.getElementById("uu").firstChild

2.获取当前元素中的第一个子元素

code
document.getElementById("uu").firstElementChild

 

3.获取当前元素中的最后一个子节点

code
document.getElementById("uu").lastChild

 

4.获取当前元素中的最后一个子元素

code
document.getElementById("uu").lastElementChild

 

5.获取当前元素的父级节点

code
document.getElementById("uu").parentNode

 

6.获取当前元素的父级子元素

code
document.getElementById("uu").parentElement

 

7.获取当前元素的子节点

code
document.getElementById("uu").childNodes

 

8.获取当前元素的子元素

code
document.getElementById("uu").children

 

9.获取当前元素的前一个兄弟节点

code
document.getElementById("three").previousSibling

10.获取当前元素的前一个兄弟元素

code
document.getElementById("three").previousElementSibling

11.获取当前元素的后一个兄弟节点

code
document.getElementById("three").nextSibling

12.获取当前元素的后一个兄弟元素

code
document.getElementById("three").nextElementSibling

 

测试所用代码:

code
<body>
<div id="dv">
    <p>层中的第一个p标签</p>哈哈哈
    <span>层中的第二个标签==span</span>
    <ul id="uu">嘎嘎
        <li>火箭</li>
        <li>热火</li>
        <li id="three">湖人</li>
        <li>小牛</li>
        <li>公牛</li>嘿嘿
    </ul>
</div>
<script>
    function my$(id) {
      return document.getElementById(id);
    }
</script>
<script>
    //获取当前元素中的第一个子节点
    console.log(my$("uu").firstChild);
    //获取当前元素中的第一个子元素
    console.log(my$("uu").firstElementChild);
    //获取当前元素中的最后一个子节点
    console.log(my$("uu").lastChild);
    //获取当前元素中的最后一个子元素
    console.log(my$("uu").lastElementChild);
    //获取当前元素的父级节点
    console.log(my$("uu").parentNode);
    //获取当前元素的父级子元素
    console.log(my$("uu").parentElement);
    //获取当前元素的子节点
    console.log(my$("uu").childNodes);
    //获取当前元素的子元素
    console.log(my$("uu").children);
    //获取当前元素的前一个兄弟节点
    console.log(my$("three").previousSibling);
    //获取当前元素的前一个兄弟元素
    console.log(my$("three").previousElementSibling);
    //获取当前元素的后一个兄弟节点
    console.log(my$("three").nextSibling);
    //获取当前元素的后一个兄弟元素
    console.log(my$("three").nextElementSibling);
</script>
</body>

转载至:http://www.cnblogs.com/zhangrunhao/p/6235330.html

读完了点一下,作者能得积分

赞赏

如果这篇内容帮到了你,不妨请作者喝杯咖啡

分享 微博 QQ

发表评论

发表评论