《JavaScript高级程序设计》学习笔记（DOM1）
2007-04-03 16:59
211 查看
《JavaScript高级程序设计》学习笔记（DOM1）
XML
XML（可扩展标记语言）是从称为SGML（标准通用标记语言）的更加古老的语言派生出来的。SGML的主要目的是定义使用标签来表示数据的标记语言的语法。
在XML中，采用了如下的语法：
1 任何的起始标签都必须有一个结束标签。
2 在大于符号之前紧跟一个斜线（/），可以在一个标签中同时表示起始和结束标签。
3 标签必须按合适的顺序进行嵌套
4 所有的特性都必须有值。
5 所有的特性都必须在值的周围加上双引号。
XML的主要目的是使用文本以结构化的方式来表示数据。
在某些方面，XML文件也类似于数据库，提供数据的结构化视图。
每个XML文档都由XML序言开始，例如：<?xml version="1.0"?>
文档元素（document element），它是文件中最外面的标签。所有其他的标签必须包含在这个标签之内来组成一个有效的XML文件。
<![CDATA[ ]]>代码用于表示无需进行解析的文本（CData Section）
处理指令（processing instruction）
处理指令（以下简称PI）的目的是为了给处理页面的程序（例如XML解析器）提供额外的信息。PI通常情况下是没有固定格式的，唯一的要求是紧随第一个问号必须至少有一个字母。在此之后，PI可以包含除了小于号和大于号之外的任何字符串序列。
例如：
最常见的PI是用来指定XML文件的样式表
<?xml-stylesheet type="text/css" href="style.css" ?>
这个PI一般会直接放在XML序言之后，通常由Web浏览器使用，来将XML数据以特殊的样式显示出来。
针对XML的API
DOM是针对XML的基于树的API。它关注的不仅仅是解析XML代码，而是使用一系列互相关联的对象来表示这些代码，而这些对象可以被修改且无需重新解析代码就能直接访问它们。使用DOM，只需解析代码一次来创建一个树的模型。
节点的层次
DOM树（也称之为文档），实际是节点（node）的层次。
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面：
Document
最顶层的节点，所有的其他节点都是附属于它的。
DocumentType
DTD引用（使用<!DOCTYPE >语法）的对象表现形式,不能包含子节点。
例如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
DocumentFragment
可以像Document一样来保存其他节点。
Element
表示起始标签和结束标签之间的内容，例如<tag></tag>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。
Attr
代表一对特性名和特性值。这个节点类型不能包含子节点。
Text
代表XML文档中的在起始标签和结束标签之间，或者CData Section内包含的普通文本。这个节点类型不能包含子节点。
CDataSection
<![CDATA[ ]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。
Entity
表示在DTD中的一个实体定义，这个节点类型不能包含子节点。
例如：<!ENTITY foo "foo">
EntityReference
代表一个实体引用，这个节点类型不能包含子节点。
例如："
ProcessingInstruction
代表一个PI。这个节点类型不能包含子节点。
Comment
代表XML注释。这个节点类型不能包含子节点。
Notation
代表在DTD中定义的记号。这个很少用到，所以在本书中不会讨论。
一个文档是由任意数量的节点的层次组成。
Node接口定义了对应不同节点类型的12个常量（它们会在即将讨论的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)
Node接口也定义了一些所有节点类型都包含的特性和方法。
特性/方法 类型/返回类型
nodeName String
节点的名字；根据节点的类型而定义
nodeValue String
节点的值；根据节点的类型而定义
nodeType Number
节点的类型常量值之一
ownerDocument Document
指向这个节点所属的文档
firstChild Node
指向在childNodes列表中的第一个节点
lastChild Node
指向在childNodes列表中的最后一个节点
childNodes NodeList
所有子节点的列表
previousSibling Node
指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling Node
指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes() Boolean
当childNodes包含一个或多个节点时，返回真
attributes NamedNodeMap
包含了代表一个元素的特性的Attr对象；仅用于Element节点
appendChild(node) Node
将node添加到childNodes的末尾
removeChild(node) Node
从childNodes中删除node
replaceChild(newnode, oldnode) Node
将childNodes中的oldnode替换成newnode
insertBefore(newnode, refnode) Node
在childNodes中的refnode之前插入newnode
DOM还定义了一些助手对象，它们可以和节点一起使用
NodeList
节点数组，按照数值进行索引；用来表示一个元素的子节点。
NamedNodeMap
同时用数值和名字进行索引的节点表；用于表示元素特性。
这些助手对象为处理DOM文档提供附加的访问和遍历方法。
特定语言的DOM
开发XML DOM的同时，W3C还一起开发了一种特别针对XHTML（以及HTML）的DOM。这个DOM定义了一个HTMLDocument和一个HTMLElement作为这种实现的基础。每个HTML元素通过它自己的HTMLElement类型来表示，例如HTMLDivElement代表了<div>，但有少数元素除外，它们只包含HTMLElement提供的属性和方法。
HTML DOM
核心DOM的特性和方法是通用的，是为了在各种情况下操作所有XML文档而设计的。HTML DOM的特性和方法是在专门针对HTML的同时也让一些DOM操作更加简便。这包括将特性作为属性进行访问的能力，以及特定于元素的属性和方法，这些扩展可以完成一些常见的任务，例如搭建表格，更加简便快速。
让特性像属性一样
大部分情况下，HTML DOM元素中包含的所有特性都是可作为属性。
例如：
<img src="pic.jpg" />
用核心DOM来获取和设置src和border特性：
alert(oImg.getAttribute("src"));
oImg.setAttribute("src", "pic2.jpg");
用HTML DOM来获取和设置src和border特性：
alert(oImg.src);
oImg.src = "pic2.jpg";
注意：class特性是唯一特性名和属性名不一样的特性
例如：
<div class="header"></div>
因为class在ECMAScript中是一个保留字，在JavaScript中，它不能被作为变量名、属性名或者函数名。于是，相应的属性名就变成className：
alert(oDiv.className);
oDiv.className = "header2";
使用属性方式来替代核心DOM并无实质性的益处，除了可能缩减代码的长度以及令代码变得易读。
注意：IE在setAttribute()上有个很大的问题：当你使用它时，变更并不会总是正确地反应出来。如果你打算支持IE，最好尽可能使用属性。
table方法
假设想使用DOM来创建HTML表格，代码将十分的冗长而且有些难于理解。
为了协助建立表格，HTML DOM给<table/>、<tbody/>和<tr/>等元素添加了一些特性和方法。
<table/>元素：
caption 指向<caption/>元素（如果存在）
tBodies <tbody/>元素的集合
tFoot 指向<tfoot/>元素（如果存在）
tHead 指向<thead/>元素（如果存在）
rows 表格中所有行的集合
createTHead() 创建<thead/>元素并将其放入表格
createTFoot() 创建<tfoot/>元素并将其放入表格
createCaption() 创建<caption/>元素并将其放入表格
deleteTHead() 删除<thead/>元素
deleteTFoot() 删除<tfoot/>元素
deleteCaption() 删除<caption />元素
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一个新行
<tbody/>元素：
rows <tbody/>中所有行的集合
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一个新行
<tr/>元素：
cells <tr/>元素中所有的单元格的集合
deleteCell(position) 删除给定位置上的单元格
insertCell(position) 在cells集合的给定位置上插入一个新的单元格
创建<table/>和<tbody/>元素的方式没有改变。
要创建第一行，对<tbody/>元素调用insertRow()方法，并传给它一个参数0，表示新增的一行应该放在什么位置上。
然后，可以通过oTBody.rows[0]来引用新增的这一行，因为这一行已经被自动创建并添加到<tbody/>元素中的第0个位置。
创建单元格，对<tr/>元素调用insertCell()并传入要创建单元格的位置。可以通过oTBody.rows[0].cells[0]来引用新创建的这个单元格，因为单元格已经被创建并插入到这一行的第0个位置。
虽然从技术角度上来说，两种代码都是正确的，但是使用这些特性和方法来创建表格使得代码变得更加有逻辑且更加易读。
XML
XML（可扩展标记语言）是从称为SGML（标准通用标记语言）的更加古老的语言派生出来的。SGML的主要目的是定义使用标签来表示数据的标记语言的语法。
在XML中，采用了如下的语法：
1 任何的起始标签都必须有一个结束标签。
2 在大于符号之前紧跟一个斜线（/），可以在一个标签中同时表示起始和结束标签。
3 标签必须按合适的顺序进行嵌套
4 所有的特性都必须有值。
5 所有的特性都必须在值的周围加上双引号。
XML的主要目的是使用文本以结构化的方式来表示数据。
在某些方面，XML文件也类似于数据库，提供数据的结构化视图。
每个XML文档都由XML序言开始，例如：<?xml version="1.0"?>
文档元素（document element），它是文件中最外面的标签。所有其他的标签必须包含在这个标签之内来组成一个有效的XML文件。
<![CDATA[ ]]>代码用于表示无需进行解析的文本（CData Section）
处理指令（processing instruction）
处理指令（以下简称PI）的目的是为了给处理页面的程序（例如XML解析器）提供额外的信息。PI通常情况下是没有固定格式的，唯一的要求是紧随第一个问号必须至少有一个字母。在此之后，PI可以包含除了小于号和大于号之外的任何字符串序列。
例如：
最常见的PI是用来指定XML文件的样式表
<?xml-stylesheet type="text/css" href="style.css" ?>
这个PI一般会直接放在XML序言之后，通常由Web浏览器使用，来将XML数据以特殊的样式显示出来。
针对XML的API
DOM是针对XML的基于树的API。它关注的不仅仅是解析XML代码，而是使用一系列互相关联的对象来表示这些代码，而这些对象可以被修改且无需重新解析代码就能直接访问它们。使用DOM，只需解析代码一次来创建一个树的模型。
节点的层次
DOM树（也称之为文档），实际是节点（node）的层次。
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面：
Document
最顶层的节点，所有的其他节点都是附属于它的。
DocumentType
DTD引用（使用<!DOCTYPE >语法）的对象表现形式,不能包含子节点。
例如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
DocumentFragment
可以像Document一样来保存其他节点。
Element
表示起始标签和结束标签之间的内容，例如<tag></tag>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。
Attr
代表一对特性名和特性值。这个节点类型不能包含子节点。
Text
代表XML文档中的在起始标签和结束标签之间，或者CData Section内包含的普通文本。这个节点类型不能包含子节点。
CDataSection
<![CDATA[ ]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。
Entity
表示在DTD中的一个实体定义，这个节点类型不能包含子节点。
例如：<!ENTITY foo "foo">
EntityReference
代表一个实体引用，这个节点类型不能包含子节点。
例如："
ProcessingInstruction
代表一个PI。这个节点类型不能包含子节点。
Comment
代表XML注释。这个节点类型不能包含子节点。
Notation
代表在DTD中定义的记号。这个很少用到，所以在本书中不会讨论。
一个文档是由任意数量的节点的层次组成。
Node接口定义了对应不同节点类型的12个常量（它们会在即将讨论的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)
Node接口也定义了一些所有节点类型都包含的特性和方法。
特性/方法 类型/返回类型
nodeName String
节点的名字；根据节点的类型而定义
nodeValue String
节点的值；根据节点的类型而定义
nodeType Number
节点的类型常量值之一
ownerDocument Document
指向这个节点所属的文档
firstChild Node
指向在childNodes列表中的第一个节点
lastChild Node
指向在childNodes列表中的最后一个节点
childNodes NodeList
所有子节点的列表
previousSibling Node
指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling Node
指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes() Boolean
当childNodes包含一个或多个节点时，返回真
attributes NamedNodeMap
包含了代表一个元素的特性的Attr对象；仅用于Element节点
appendChild(node) Node
将node添加到childNodes的末尾
removeChild(node) Node
从childNodes中删除node
replaceChild(newnode, oldnode) Node
将childNodes中的oldnode替换成newnode
insertBefore(newnode, refnode) Node
在childNodes中的refnode之前插入newnode
DOM还定义了一些助手对象，它们可以和节点一起使用
NodeList
节点数组，按照数值进行索引；用来表示一个元素的子节点。
NamedNodeMap
同时用数值和名字进行索引的节点表；用于表示元素特性。
这些助手对象为处理DOM文档提供附加的访问和遍历方法。
特定语言的DOM
开发XML DOM的同时，W3C还一起开发了一种特别针对XHTML（以及HTML）的DOM。这个DOM定义了一个HTMLDocument和一个HTMLElement作为这种实现的基础。每个HTML元素通过它自己的HTMLElement类型来表示，例如HTMLDivElement代表了<div>，但有少数元素除外，它们只包含HTMLElement提供的属性和方法。
HTML DOM
核心DOM的特性和方法是通用的，是为了在各种情况下操作所有XML文档而设计的。HTML DOM的特性和方法是在专门针对HTML的同时也让一些DOM操作更加简便。这包括将特性作为属性进行访问的能力，以及特定于元素的属性和方法，这些扩展可以完成一些常见的任务，例如搭建表格，更加简便快速。
让特性像属性一样
大部分情况下，HTML DOM元素中包含的所有特性都是可作为属性。
例如：
<img src="pic.jpg" />
用核心DOM来获取和设置src和border特性：
alert(oImg.getAttribute("src"));
oImg.setAttribute("src", "pic2.jpg");
用HTML DOM来获取和设置src和border特性：
alert(oImg.src);
oImg.src = "pic2.jpg";
注意：class特性是唯一特性名和属性名不一样的特性
例如：
<div class="header"></div>
因为class在ECMAScript中是一个保留字，在JavaScript中，它不能被作为变量名、属性名或者函数名。于是，相应的属性名就变成className：
alert(oDiv.className);
oDiv.className = "header2";
使用属性方式来替代核心DOM并无实质性的益处，除了可能缩减代码的长度以及令代码变得易读。
注意：IE在setAttribute()上有个很大的问题：当你使用它时，变更并不会总是正确地反应出来。如果你打算支持IE，最好尽可能使用属性。
table方法
假设想使用DOM来创建HTML表格，代码将十分的冗长而且有些难于理解。
为了协助建立表格，HTML DOM给<table/>、<tbody/>和<tr/>等元素添加了一些特性和方法。
<table/>元素：
caption 指向<caption/>元素（如果存在）
tBodies <tbody/>元素的集合
tFoot 指向<tfoot/>元素（如果存在）
tHead 指向<thead/>元素（如果存在）
rows 表格中所有行的集合
createTHead() 创建<thead/>元素并将其放入表格
createTFoot() 创建<tfoot/>元素并将其放入表格
createCaption() 创建<caption/>元素并将其放入表格
deleteTHead() 删除<thead/>元素
deleteTFoot() 删除<tfoot/>元素
deleteCaption() 删除<caption />元素
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一个新行
<tbody/>元素：
rows <tbody/>中所有行的集合
deleteRow(position) 删除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一个新行
<tr/>元素：
cells <tr/>元素中所有的单元格的集合
deleteCell(position) 删除给定位置上的单元格
insertCell(position) 在cells集合的给定位置上插入一个新的单元格
创建<table/>和<tbody/>元素的方式没有改变。
要创建第一行，对<tbody/>元素调用insertRow()方法，并传给它一个参数0，表示新增的一行应该放在什么位置上。
然后，可以通过oTBody.rows[0]来引用新增的这一行，因为这一行已经被自动创建并添加到<tbody/>元素中的第0个位置。
创建单元格，对<tr/>元素调用insertCell()并传入要创建单元格的位置。可以通过oTBody.rows[0].cells[0]来引用新创建的这个单元格，因为单元格已经被创建并插入到这一行的第0个位置。
虽然从技术角度上来说，两种代码都是正确的，但是使用这些特性和方法来创建表格使得代码变得更加有逻辑且更加易读。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DOM----学习笔记
- 学习笔记之Dom_02
- 《JavaScript DOM编程艺术》学习笔记之常用DOM方法属性
- 《javascript高级程序设计》学习笔记（八）：一些DOM基础
- 学习笔记——JavaScript操作DOM
- 《javascript高级程序设计》学习笔记（八）：一些DOM基础
- 学习笔记：HTML DOM(文档对象模型)
- 《JavaScript高级程序设计》学习笔记——DOM
- 锋利的Jquery——学习笔记（三）DOM的操作分类
- 锋利的Jquery——学习笔记（五）DOM操作（二）
- 《JavaScript高级程序设计》学习笔记——DOM
- 学习笔记（三）：jQuery之DOM
- 《JavaScript权威指南》学习笔记 第七天 DOM操作
- 《JavaScript高级程序设计2》学习笔记——DOM2和DOM3（一）
- 学习笔记《锋利的jQuery》-jQuery中的DOM操作
- 《jQuery权威指南》学习笔记之第3章 jQuery操作DOM
- 《JavaScript高级程序设计2》学习笔记——DOM2和DOM3（二）
- 锋利的Jquery——学习笔记（四）DOM操作（一）
- 《JavaScript权威指南》学习笔记 第六天 开始学习DOM了。
- 《java DOM 编程艺术》学习笔记