访问子节点childNodes

Posted 行尸走肉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了访问子节点childNodes相关的知识,希望对你有一定的参考价值。

访问子节点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的主要内容,如果未能解决你的问题,请参考以下文章

DOM探索之基础详解——学习笔记

获取子元素节点(children,childNodes)

js子节点children和childnodes的用法

childNodes

DOM

JavaScript操作DOM对象