JavaScript-获取当前元素的相关元素或节点--方法总结

 

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

document.getElementById("uu").firstChild

 


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

document.getElementById("uu").firstElementChild

 


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

document.getElementById("uu").lastChild

 


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

document.getElementById("uu").lastElementChild

 


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

document.getElementById("uu").parentNode

 


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

document.getElementById("uu").parentElement

 


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

document.getElementById("uu").childNodes

 


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

document.getElementById("uu").children

 


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

document.getElementById("three").previousSibling

 


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

document.getElementById("three").previousElementSibling

 


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

document.getElementById("three").nextSibling

 


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

document.getElementById("three").nextElementSibling

 

 

测试所用代码：

<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>

 

posted @ 2016-12-29 23:34  张润昊  阅读(9073)  评论(0)    收藏  举报