前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >childNodes属性和nodeType属性

childNodes属性和nodeType属性

作者头像
天天_哥
发布2018-09-29 13:55:02
1.1K0
发布2018-09-29 13:55:02
举报
文章被收录于专栏:天天天天

解析

代码语言:javascript
复制
1.childNodes:获得元素的所有子元素,返回的是一个数组,
2.nodeType:代表元素的节点类型,
    a.元素节点返回值是1;
    b.属性节点返回的值是2;
    c.文本节点返回的值是3.
<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #333;
        }
        div{
            margin-left: auto;
            margin-right: auto;
            width: 420px;
        }
    </style>
    <title></title>
</head>
<body>
<h2>js图片库的使用</h2>
<ul>
    <li><a href="images/hover1.jpg" title="pic01">图片一</a></li>
    <li><a href="images/hover2.jpg" title="pic02">图片二</a></li>
    <li><a href="images/hover3.jpg" title="pic03">图片三</a></li>
    <li><a href="images/hover4.jpg" title="pic04">图片四</a></li>
</ul>
<div id="picbox">![](images/hover1.jpg)</div>
<p id="showP">请选择图片</p>
</body>
<script>
    var showbox=document.getElementById("pixbox");
    var all=document.getElementsByTagName("a");
    var shopP=document.getElementById("showP");
    var bod=document.getElementsByTagName("body");
//    console.log(bod[0].childNodes.length)
    var child=bod[0].childNodes;//返回值10
    console.log(child.length);
    for (var i= 0;i<child.length;i++){
        console.log(child[i].nodeType);
    }
</script>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.10.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档