childNodes属性

在一个节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素所有子元素的数组。

用法

element.childNodes

实例

检索body元素的所有子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gallery</title>
</head>
<body>
    <h1>Gallery</h1>
    <ul>
        <li>
            <a href="images/1.jpg" title="A Fireworks Display">Fireworks</a>
        </li>
    </ul>
    <img id="placeholder" src="images/5.jpg" alt="My Images Gallery">
    <script>
        window.onload = function bodyChildren() {
            var body_element = document.getElementsByTagName("body")[0];
            alert(body_element.childNodes.length);
        }
    </script>
</body>
</html>

返回值是9

TIPS

  1. childNodes属性返回的数组包含所有类型的节点，而不仅仅是元素节点。
  2. 访问childNodes数组的第一个元素可以用childNodes[0]表示，也可以用firstChild
  3. 访问childNodes数组的最后一个元素可以用lastChild

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

  1. nodeName : 节点的名称
  2. nodeValue ：节点的值
  3. nodeType ：节点的类型

nodeType 属性

nodeType返回的值是一个数字，节点的类型，是只读的。以下常用的几种结点类型:

用法

node.nodeType

TIPS

  1. 元素节点的nodeType属性值是1
  2. 属性节点的nodeType属性值是2
  3. 文本节点的nodeType属性值是3
  4. 注释节点的nodeType属性值是8
  5. 文档节点的nodeType属性值是9

nodeName 属性

节点的名称，是只读的。

  1. 元素节点的 nodeName 与标签名相同
  2. 属性节点的 nodeName 是属性的名称
  3. 文本节点的 nodeName 永远是 #text
  4. 文档节点的 nodeName 永远是 #document

nodeValue 属性

如果想改变一个文本节点的值，那就使用nodeValue 属性，它用来得到或设置一个节点的值

用法

node.nodeValue
  1. 元素节点的 nodeValue 是 undefined 或 null
  2. 文本节点的 nodeValue 是文本自身
  3. 属性节点的 nodeValue 是属性的值

parentNode属性

获取指定节点的父节点

语法

elementNode.parentNode

TIPS

父节点只能有一个

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>parentNode()属性</title>
</head>
<body>
<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div>
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>
</body>
</html>

elementNode.parentNode.parentNode //访问祖节点

访问兄弟节点

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法

nodeObject.nextSibling

TIPS

如果无此节点，则该属性返回 null。

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法

nodeObject.previousSibling

TIPS

如果无此节点，则该属性返回 null。

注意

两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

解决方法

判断节点nodeType是否为1, 如是为元素节点，跳过。