<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子节点</title>
</head>
<body>
<div id="box">
<span>span标签</span>
<p>p标签</p>
<!--这里是注释-->
</div>
<script type="text/javascript">
//节点的层次结构
//父子结构
//parentNode 父节点 只有一个
//childNodes 子节点 有很多
//children 子元素
var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
//打印结果为 NodeList(7) [text, span, text, p, text, comment, text]
//其中text为文本元素，换行和空白在DOM中都算是文本元素
//筛选出box内部的所有标签
//方法一：遍历box内部所有子节点，(由于元素节点与非标签的节点的一个区别就是标签的nodeType属性值为1，而非标签的节点nodeType属性值不为1)
//将nodeType属性值为1的节点筛选出来，就是标签节点了
var childNodes = box.childNodes;
for(var i = 0;i < childNodes.length;i++){
childNode = childNodes[i];
if(childNode.nodeType === 1){
console.log(childNode);
}
}
//方法二：children 所有的子元素
console.log(box.children);
</script>
</body>
</html>
1万+
06-13
06-01
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
