<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 父子节点和父子元素 </title>
</head>
<body>
子节点：
childNodes,找到的内容会包括标签、文本、注释等
子元素：
children，找到的内容只有标签
是一个伪数组，伪数组里就保存了所有的子元素 -->
父节点
parentNode：找到父节点，其实本质上找到的就是父元素或者说父标签
因为只有标签才能成为别人的父节点
父元素
parentElement：（这个不常用），找到父元素
<ul>
<!-- 注释 -->
<li>隔壁老王1</li>
<li id="li2">隔壁老王2</li>
<li>隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
</ul>
<script>
// 子节点
// 找到ul
var ulList = document.getElementsByTagName('ul')[0];
console.log(ulList.childNodes); // ul 里有 13 个子节点;
console.log(ulList.children); // ul 里有 5 个子元素;
console.log(ulList.children[2]); // 找到 ul 里下标为 2 的 子元素;
// 遍历ul给ul里的子元素加背景色
for (var i = 0; i < ulList.children.length; i++) {
ulList.children[i].style.backgroundColor = "red";
}
// 父节点
var li2 = document.getElementById('li2');
console.log(li2.parentNode); // ul...
console.log(li2.parentElement); // ul...
//BODY
console.log(li2.parentNode.parentNode); // body...
console.log(li2.parentElement.parentElement); //body...
//HTML
console.log(li2.parentNode.parentNode.parentNode); // html...
console.log(li2.parentElement.parentElement.parentElement); // html...
//document
console.log(li2.parentNode.parentNode.parentNode.parentNode); // #document
console.log(li2.parentElement.parentElement.parentElement.parentElement); // null
</script>
</body>
</html>
网友评论