js-节点关系
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"> <p>我是段落A</p> <p id="para">我是段落B</p> <p>我是段落C</p> </div>
<script>
// 关系 考虑所有节点 只考虑元素节点 // 子节点 childNodes children // 父节点 parentNode children // 第一个子节点 firstChild firstElementChild // 最后一个子节点 lastChild lastElementChild // 前一个兄弟节点 previousSbibling previousElementSbibling // 后一个兄弟节点 nextSibling nextElementSibling
var box = document.getElementById('box') var para = document.getElementById('para')
// 所有子节点 NodeList(7) [text, p, text, p#para, text, p, text] // console.log(box.childNodes); // // 所有的元素子节点(ie9开始兼容) HTMLCollection(3) [p, p#para, p, para: p#para] // console.log(box.children); // // 只能获取 id 元素 // console.log(box.children.para); // <p id="para">我是段落B</p> // // 第一个子节点 // console.log(box.firstChild); // #text // console.log(box.firstChild.nodeType); // 3 // // 第一个元素子节点 (ie9开始兼容) // console.log(box.firstElementChild); //<p>我是段落A</p>
// // 最后一个子节点 // console.log(box.lastChild); // #text // console.log(box.lastChild.nodeType); // 3
// // 最后一个元素子节点 (ie9开始兼容) // console.log(box.lastElementChild); // <p>我是段落C</p>
// 父节点 // console.log(para.parentNode); // <div id="box"> // console.log(para.parentElement); // <div id="box">
// 前一个兄弟节点 // console.log(para.previousSibling); // #text // 前一个元素兄弟节点 (ie9开始兼容) // console.log(para.previousElementSibling); // <p>我是段落A</p> // 后一个兄弟节点 console.log(para.nextSibling); // #text // 后一个元素兄弟节点 (ie9开始兼容) console.log(para.nextElementSibling); // <p>我是段落C</p>
</script> </body> </html>
<div id="box"> <p>我是段落A</p> <p id="para">我是段落B</p> <p>我是段落C</p> </div>
<script>
// 关系 考虑所有节点 只考虑元素节点 // 子节点 childNodes children // 父节点 parentNode children // 第一个子节点 firstChild firstElementChild // 最后一个子节点 lastChild lastElementChild // 前一个兄弟节点 previousSbibling previousElementSbibling // 后一个兄弟节点 nextSibling nextElementSibling
var box = document.getElementById('box') var para = document.getElementById('para')
// 所有子节点 NodeList(7) [text, p, text, p#para, text, p, text] // console.log(box.childNodes); // // 所有的元素子节点(ie9开始兼容) HTMLCollection(3) [p, p#para, p, para: p#para] // console.log(box.children); // // 只能获取 id 元素 // console.log(box.children.para); // <p id="para">我是段落B</p> // // 第一个子节点 // console.log(box.firstChild); // #text // console.log(box.firstChild.nodeType); // 3 // // 第一个元素子节点 (ie9开始兼容) // console.log(box.firstElementChild); //<p>我是段落A</p>
// // 最后一个子节点 // console.log(box.lastChild); // #text // console.log(box.lastChild.nodeType); // 3
// // 最后一个元素子节点 (ie9开始兼容) // console.log(box.lastElementChild); // <p>我是段落C</p>
// 父节点 // console.log(para.parentNode); // <div id="box"> // console.log(para.parentElement); // <div id="box">
// 前一个兄弟节点 // console.log(para.previousSibling); // #text // 前一个元素兄弟节点 (ie9开始兼容) // console.log(para.previousElementSibling); // <p>我是段落A</p> // 后一个兄弟节点 console.log(para.nextSibling); // #text // 后一个元素兄弟节点 (ie9开始兼容) console.log(para.nextElementSibling); // <p>我是段落C</p>
</script> </body> </html>
标签：关系,box,console,log,para,text,js,节点 来源： https://www.cnblogs.com/eric-share/p/15645125.html