childNodes属性和nodeType属性

解析

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

41290
来自专栏web前端-

Jquery的属性操作和DOM操作

       3 val()    :     获取或设置表单内容    (原生JS使用value)

10720
来自专栏阮一峰的网络日志

CSS选择器笔记

这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。

12720
来自专栏Golang语言社区

go语言数组的拷贝

go语言的数组与c语言的数据有一点不太一样的地方,go语言的赋值是值拷贝 package main import "fmt" func main...

41490
来自专栏JetpropelledSnake

Web前端学习笔记之jQuery选择器

经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了。所有代码均经过测试。 首先HTML代码

9010
来自专栏Golang语言社区

【Golang语言社区--基础篇】Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

385110
来自专栏Java帮帮-微信公众号-技术文章全总结

JS之文档对象模型DOM

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> ...

31060
来自专栏老司机的技术博客

golang学习笔记10:数组切片Slice

9820
来自专栏Golang语言社区

Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

368100
来自专栏IMWeb前端团队

JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍

本文为 H5EDU 机构官方 HTML5教程,主要介绍:JavaScript强化教程 —— style、currentStyle、getComputedStyl...

23360

扫码关注云+社区

领取腾讯云代金券