JS DOM获取 兄弟和子 元素节点
文章目录
JS DOM获取 兄弟和子 元素节点children 和 childNodesfirstChild 和 firstElementChildlastChild 和 lastElementChildparentNode 和 parentElementnextSibling 和 nextElementSiblingpreviousSibling 和 previousElementSiblingchildren 和 childNodes
1.children 返回 子标签 集合
2.childNodes 返回 子节点 集合
<body><div class="wrap"><p>小情歌</p><p>小情歌</p></div><script>let oWrap = document.querySelector(".wrap")console.log(oWrap.children);console.log(oWrap.childNodes);</script></body>
children 结果
childNodes 结果:
firstChild 和 firstElementChild
1.firstChild :返回第一个 子节点
2.firstElementChild :返回第一个 子标签
<body>//p标签前有空格!!!<div class="wrap"> <p>小情歌</p><p>小情歌</p></div><script>let oWrap = document.querySelector(".wrap")console.log(oWrap.firstChild);console.log(oWrap.firstElementChild);</script></body>
firstChild 结果:
firstElementChild 结果:
lastChild 和 lastElementChild
1.lastChild 返回最后一个 子节点
2.lastElementChild 返回最后一个 子标签
<body><div class="wrap"><p>小情歌</p><p>小情歌</p></div><script>let oWrap = document.querySelector(".wrap")console.log(oWrap.lastChild);console.log(oWrap.lastElementChild);</script></body>>lastChild
lastChild 结果:
lastElementChild 结果:
parentNode 和 parentElement
都是获取父标签
<body><div class="wrap"><p>小情歌</p><p>小情歌</p></div><script>let oWrap = document.querySelector("p")console.log(oWrap.parentNode);console.log(oWrap.parentElement);</script></body>
nextSibling 和 nextElementSibling
nextSibling 获取下一个 兄弟节点
nextElementSibling 获取下一个 兄弟元素
<body><div class="wrap"><p>张三</p><p>李四</p></div><script>let oWrap = document.getElementsByTagName("p")[0]console.log(oWrap.nextSibling);console.log(oWrap.nextElementSibling);</script></body>
nextSibling 结果:
nextElementSibling 结果:
previousSibling 和 previousElementSibling
previousSibling 返回上一个 兄弟节点
previousElementSibling 返回上一个 兄弟元素
<body><div class="wrap"><p>张三</p><p>李四</p></div><script>let oWrap = document.getElementsByTagName("p")[1]console.log(oWrap.previousSibling);console.log(oWrap.previousElementSibling);</script></body>
previousSibling 结果:
previousElementSibling 结果:
