Javascript学习笔记（10）

来源：互联网发布：js防水涂料是柔性的吗编辑：程序博客网时间：2024/04/30 21:42

第十章 DOM

DOM是针对HTML和XML文档的一个API。
DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一个部分。

10.1 节点层次

DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构。节点分为几种不同类型，每种类型分别表示文档不同的信息及标记。
每个节点都拥有各自的特点、数据和方法，另外的也与其他节点存在某种关系。
节点之间的关系构成了层次。
所有页面标记则表现为一个一特定节点为根节点的属性结构。

文档节点是每个文档的根节点。
文档元素是文档的最外层元素。
在HTML页面中，文档元素始终都是<html>元素。

12个节点类型。

10.1.1 Node类型

除了IE浏览器，其他浏览器都能访问到这个类型
Javascript中的所有节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性用于表明节点的类型。
节点类型有:

Node.ELEMENT_NODE(1);Node.ATTRIBUTE_NODE(2);Node.TEXT_NODE(3);Node.CDATA_SECTION_NODE(4);Node.ENTITY_REFERENCE_NODE(5);Node.ENTITY_NODE(6);Node.PROCESSING_INSTRUCTION_NODE(7);Node.COMMENT_NODE(8);Node.DOCUMENT_NODE(9);Node.DOCUMENT_TYPE_NODE(10);Node.DOCUMENT_FRAGMENT_NODE(11);Node.NOTATION_NODE(12);

1.nodeName和nodeValue
了解节点的具体信息

2.节点关系
文档中的节点关系可以用父子关系表示
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
NodeList对象的独特之处在于它实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反应在NodeList对象中。

3.操作节点
关于指针都是只读的，所以DOM提供了一些操作节点的方法。其中，最常用的方法是appendChild()，用于向childNodes列表的末尾添加一个节点
要把节点放在childNodes列表中的某个特定位置上，使用insertBefore(要插入的节点，参照节点)方法。
replaceChild(要插入的节点，替换的节点)
只想移除而非替换：
removeChild(要被移除的节点)
cloneNode()，用于创建调用这个方法的节点的一个完全相同的副本
true:深复制，复制节点及整个子节点树
false:浅复制，只复制节点本身
复制后并不会有父节点，因此成了孤儿

10.1.2 Document类型

nodeType : 9
nodeName : “#document”
nodeValue null
parentNode null
ownerDocument null
子节点是DoucmentType(最多1个)、Element(最多1个)、ProcessingInstruction或Comment

0 0