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>