childNodes和nodeType

最新推荐文章于 2022-07-03 08:41:11 发布

fuxiaomi2016

最新推荐文章于 2022-07-03 08:41:11 发布

阅读量524

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： childNodes和nodeType

本文链接：https://blog.youkuaiyun.com/fuxiaomi2016/article/details/53750181

JS 专栏收录该内容

27 篇文章

订阅专栏

本文通过一个具体的HTML页面示例介绍了如何使用JavaScript来遍历和操作DOM树中的元素节点，重点展示了如何区分文本节点和元素节点，并对特定元素进行样式修改。

注意li里面的span和h3标签不是ul的子节点。

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){

var oUl=document.getElementById('ul1');
//alert(oUl.childNodes.length); //5个，因为childNodes包括文本节点和元素节点
//alert(oUl.children.length); //2个，因为children只包括元素节点

for(var i=0;i<oUl.childNodes.length;i++){
//alert(oUl.childNodes[i].nodeType); //文本节点值是3，元素节点值是1
//alert(oUl.children[i].nodeType); //children挺好用的
//oUl.children[i].style.background='yellowgreen';