访问子节点childNodes

访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。

语法:

elementNode.childNodes

注意:

如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。

我们来看看下面的代码:

运行结果:

IE:

  UL子节点个数:3
节点类型:1

其它浏览器:

   UL子节点个数:7
节点类型:3

注意:

1. IE全系列、firefox、chrome、opera、safari兼容问题

2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7,如下图所示:

如果把代码改成这样:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

运行结果:(IE和其它浏览器结果是一样的)

  UL子节点个数:3
节点类型:1

访问子节点childNodes的更多相关文章

  1. JavaScript--DOM访问子结点childNodes

    访问子结点childNodes 访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性. 语法: elementNode.childNodes 注意: 如果选定的节点 ...

  2. 使用JavaScript访问子节点方法elementNode.childNodes时,需要注意的地方

    有这样一个HTML结构 <div> javascript <p>javascript</p> <div>jQuery</div> <h ...

  3. DOM访问关系(父节点 子节点)

    把下面的知识点掌握了,可以做一下下面的案例,都是工作中常用的,很有用 知识点   1.带Eleent和不带区别     a)带Element的获取的是元素节点     b)不带Element的获取文本 ...

  4. js子节点children和childnodes的用法(非原创)

    想要获取子节点的数量,有几种办法. childNodes 它会把空的文本节点当成节点, <ul> 文本节点 <li>元素节点</li> 文本节点 <li> ...

  5. js子节点children和childnodes的用法

    想要获取子节点的数量,有几种办法. childNodes 它会把空的文本节点当成节点, <ul> 文本节点 <li>元素节点</li> 文本节点 <li> ...

  6. DOM的概念及子节点类型

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  7. DOM的概念及子节点类型【转】

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  8. DOM基础之“寻找”子节点

    今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Obj ...

  9. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

随机推荐

  1. go语言基础之defer和匿名函数结合使用

    1.匿名函数结合使用 示例1: package main //必须 import "fmt" func main() { a := 10 b := 20 defer func() ...

  2. 【转】vim折叠功能

    原文:https://www.yupengsir.com/topic/content?i=140 这个作者的vim系列是高级的用法, 要学习一下. https://blog.easwy.com/arc ...

  3. hdoj5645DZY Loves Balls

    Problem Description DZY loves playing balls. He has n balls in a big box. On each ball there is an i ...

  4. HDU2089 ------不要62(数位dp)

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  5. 使用apache-cxf-2.2.10来制作一个极简版WebService程序

    原想拿最新版cxf来制作的,无奈Apache的zip包总下不下来,国内的apache-cxf-2.2.10却一蹴而就,也就用了这个版本.下载地址是:http://pan.baidu.com/s/1td ...

  6. 想控制GIF图片动画播放吗?试试gifffer.js

    在线演示:http://www.gbtags.com/gb/demoviewer/3578/c6bec39a-61ae-4017-8e23-e0bc1eeb740f/example|index.htm ...

  7. rtsp摘要认证协议(Response计算方法)

    rtsp摘要认证协议(Response计算方法) 说明: 例如:OPTIONS rtsp://192.168.123.158:554/11RTSP/1.0   RTSP客户端应该使用username ...

  8. 36、TreeSet详解

    TreeSet是SortedSet接口的实现类,TreeSet可以保证元素处于排序状态.与HashSet相比,TreeSet还提供了如下几个而外的方法: 1).Comparator comparato ...

  9. 在spring+springMvc+mabatis框架下集成swagger

    我是在ssm框架下集成swagger的,具体的ssm搭建可以看这篇博文: Intellij Idea下搭建基于Spring+SpringMvc+MyBatis的WebApi接口架构 本项目的GitHu ...

  10. 委托与事件代码详解与(Object sender,EventArgs e)详解

    委托与事件代码详解 using System;using System.Collections.Generic;using System.Text; namespace @Delegate //自定义 ...