访问子节点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. JS-得到屏幕宽高、页面宽高

    window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width ...

  2. Windows Server 2012 R2如何编辑hosts文件

    在我的Windows Server 2012 R2系统里编辑hosts文件则会出现没有无法保存的问题,原因是权限不足 错误信息:" Unable to save C:\Windows\Sys ...

  3. [AngularJS] Angular 1.3 ng-model-options - getterSetter

    getterSetter:  boolean value which determines whether or not to treat functions bound to ngModel as ...

  4. 关于listview,scrollview显示模糊边缘的设置

    朋友们有时可能在开发中遇到这样的莫名其妙的问题,listview或scrollview滑动时上边和下边会出现两条模糊的边缘,有时会影响到我们app的视觉效果,我们怎么去掉这两条模糊的边缘呢?很简单,一 ...

  5. windows下安装msysgit 及ruby

    一:安装msysgit git是目前最流行的软件版本控制软件,在window下通常使用msysgit 下载:http://msysgit.github.io/ 安装:基本上一路默认下一步就行 安装之后 ...

  6. SpringMVC配置全局日期转换器,处理日期转换异常

    Spring 3.1.1使用Mvc配置全局日期转换器,处理日期转换异常链接地址: https://www.2cto.com/kf/201308/236837.html spring3.0配置日期转换可 ...

  7. CentOS如何安装linux桌面?

    CentOS如何安装linux桌面? 以前默认安装分centos没有图形界面,今天想用下, yum groupinstall "GNOME Desktop" "Graph ...

  8. ThinkPHP框架返回插入记录的id号

    ThinkPHP返回插入记录的id号 $Form->create()) $result = $Form->add(); 在执行上述语句后,若存在auto_increment字段,则可以使用 ...

  9. Android 读取assets文件下的txt文件

    android 读取assets文件下的txt文件,解决了读取txt文件的乱码问题: package com.example.com.scrollview; import java.io.Buffer ...

  10. [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件

    本人小菜鸟一仅仅.为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识,小菜鸟创建了一个群.希望光临本博客的人能够进来交流.寻求 ...