9-8 访问子节点childNodes
本节编程练习不计算学习进度，请电脑登录imooc.com操作

访问子节点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

 

任务

试一试，在script标签内，获取子节点，并输出相应属性。

1. 获取第一个DIV的子节点。

2. 使用for遍历每个节点。

3. 输出相应节点的属性。

注意: 输出内容可能和想的内容不同，想想为什么。

 

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  8. <div>
  9.   javascript  
  10.   <p>javascript</p>
  11.   <div>jQuery</div>
  12.   <h5>PHP</h5>
  13. </div>
  14. <script type="text/javascript">
  15.  
  16.  
  17.  
  18. </script>
  19. </body>
  20. </html>
下一节