JavaScript学习-DOM-Node类型

来源：互联网发布：南京网络问政平台编辑：程序博客网时间：2024/06/06 02:57

1，介绍

DOM(文档对象模型)是针对HTML和XML的一个API（应用程序编程接口）
DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
DOM已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

2，节点

特点综述
- 节点分为几种不同的类型，每种类型分别表示文档中不同的信息（或）标记。
- 每个节点都拥有各自的特点、数据和方法，另外也和其他节点存在某种关系。
- 节点之间的关系构成了层次。
以HTML为例阐述文档节点关系
- 代码示例
```
<html>    <head>        <title>Sample Page</title>    </head>    <body>        <p>Hello World!</p>    </body></html>
```
- 文档元素
  - 文档元素是每个文档的根节点。
  - 在上述例子中，文档结点只有一个子节点，即元素，称之为文档元素，文档元素是最外层的元素，文档中的其它所有元素都包含在文档元素中,每个文档只能有一个文档元素。
  - 在HTML中，文档元素始终是元素。在XML中，没有预定义的元素，任何元素都可能成为文档元素。
- 节点类型
  - 每一段标记都可以通过树中的一个节点来表示，HTML元素通过元素节点表示。特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。
  - 总共有12种节点类型，这些类型都继承自一个基类型。

3，Node类型

DOM1级定义了一个Node类型，除了IE之外，其他所有浏览器中都可以访问到这个类型。
JavaSctipt中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
属性
- nodeType属性
  - 每个节点都有一个nodeType属性，用于类型。节点类型由下列12个数值常量来表示，任何节点必居其一。
  - 代码示例
```
if(someNode.nodeType == 1){// 适用于所有浏览器    alert("Node is an element.");}
```
- nodeName和nodeValue属性
  - 用于了解节点的具体信息。
  - 对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值始终未null。
- 节点关系的属性
  - 每个节点都有一个childNodes属性，其中保存着NodeList对象
    - NodeList对象
      - NodeList对象是一种类数组的对象，用于保存一组有序的节点，可以通过为止来访问这些节点，而且这个对象也有 length属性，但它并不是Array的实例
      - DOM是动态的
      - 使用示例
```
var firstChild = someNode.childNodes[0];var secondChild = someNode.childNodes.item(1);var count = someNode.childNodes.length;
```
      - 转换为数组
```
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
```
  - parentNode属性
    - 每个节点都有一个parentNode属性，该属性指向文档数中的父节点。
  - previousSibling和nextSibling属性
    - 可以访问同一列表中的其他节点。
    - 第一个节点的previousSibling属性为nil。最后一个节点的nextSibling属性也为null。
  - firstChild和lastChild属性
    - 相当于someNodes[0]和someNodes[someNode.childNodes.length-1]。
操作节点方法
- appendChild()方法
  - 用于向childNodes列表的末尾添加一个节点。返回新添加的节点。
  - 如果新添加的节点已经是文档的一部分了，那么该节点从原来的位置转移到新位置。
  - 任何DOM节点不能同时出现在文档中的多个位置上。
- insertBefore()方法
  - 接收两个参数：要插入的节点和作为参照的节点。
    - 如果参照节点为null，则insertBefore()与appendChild()相同。
  - 示例：
```
//插入后成为最后一个子节点returnedNode = someNode.insertBefore(newNode,null);
```
- replaceChild()方法
  - 接收两个参数：要插入的节点和要替换的节点。
- removeChild()方法
  - 接收一个参数：要移除的节点。此节点成为方法的返回值。
- 其他方法
  - cloneNode()
    - 用于创建调用这个方法的节点的一个完全相同的副本。
    - 接收一个布尔值参数，表示是否执行深复制。
  - normalize()
    - 当在某个节点上调用这个方法时，就会在该节点的后代节点中超找上述两种情况。如果找到了空文本节点，则删除它；如果找到了相邻的文本节点，则将它们合并为一个文本节点。

0 0