JS示例19-如何读取子节点
JS示例19-如何读取子节点
专注APP开发
发布于 2019-11-07 16:03:44
发布于 2019-11-07 16:03:44
代码可运行
运行总次数：0
代码可运行
一、知识要点
1、childNodes读取元素子节点 2、根据nodeType == 1 判断是元素节点（文本节点为3）
二、源码参考
将元素子节点的背景色设置为红色
方式一：通过childNodes，结合nodeType来实现
<!DOCTYPE >
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
window.onload = function() {
var oUl = document.getElementById('ul1');
for(var i = 0; i < oUl.childNodes.length; i++) {
if(oUl.childNodes[i].nodeType == 1) {
oUl.childNodes[i].style.backgroundColor = 'red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
文本节点
<li>元素节点1</li>
<li>元素节点2</li>
<li>元素节点3</li>
文本节点
</ul>
文本节点
</body>
</html>方式二：通过children方式（推荐：只读取元素节点）
var oUl = document.getElementById('ul1');
for(var i = 0; i < oUl.children.length; i++) {
oUl.children[i].style.backgroundColor = 'red';
}三、运行效果
image.png
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
