现在的位置: 首页 > 综合 > 正文

【078】◀▶ HTML DOM

2012年03月17日 ⁄ 综合 ⁄ 共 9568字 ⁄ 字号 小 中 大 ⁄ 评论关闭

●·● 目录：

A0 ………… Core DOM

A1 ………… DOM Node 对象
A2 ………… DOM NodeList 对象
A3 ………… DOM NamedNodeMap 对象
A4 ………… DOM Document 对象
A5 ………… DOM Element 对象
A6 ………… DOM Attr 对象

　　 DOM 对象

G1 ………… DOM Document 对象
G2 ………… DOM Event 对象
G3 ………… DOM Element 对象
G4 ………… DOM Anchor 对象
G5 ………… DOM Area 对象
G6 ………… DOM Body 对象
G6 ………… DOM Button 对象

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A0个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● Core DOM：

　　通过 JavaScript，可以重构整个 HTML 文档，可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。但 DOM 不是 JavaScript 专有的，事实上许多其他语言都实现了它。不过，Web 浏览器中的 DOM 已经用 ECMAScript 实现了，现在是 JavaScript 语言的一个很大组成部分。

　　DOM 被分为不同的部分（核心、HTML及XML）：

  1. Core DOM：定义了一套标准的针对任何结构化文档的对象。
  2. HTML DOM：定义了一套标准的针对 HTML 文档的对象。 学习HTML DOM。
  3. XML DOM：定义了一套标准的针对 XML 文档的对象。 学习XML DOM。

　　DOM 有三个level（1/2/3）：

  1. DOM Level 1 是 W3C 于 1998 年 10 月提出的。它由两个模块组成，即 DOM Core 和 DOM HTML。前者提供了基于 XML 的文档的结构图，以便访问和操作文档的任意部分；后者添加了一些 HTML 专用的对象和方法，从而扩展了 DOM Core。DOM Level 1 只是一个目标，即规划文档的结构。
  2. DOM Level 2 的目标非常广泛。对原始 DOM 的扩展添加了对鼠标和用户界面事件（DHTML 对此有丰富的支持）、范围、遍历（重复执行 DOM 文档的方法）的支持，并通过对象接口添加了对 CSS（层叠样式表）的支持。由 Level 1 引入的原始 DOM Core 也加入了对 XML 命名空间的支持。DOM Level 2 引入了几种 DOM 新模块，用于处理新的接口类型：
    1. DOM 视图 - 描述跟踪文档的各种视图（即 CSS 样式化之前和 CSS 样式化之后的文档）
    2. DOM 事件 - 描述事件的接口
    3. DOM 样式 - 描述处理基于 CSS 样式的接口
    4. DOM 遍历和范围 - 描述遍历和操作文档树的接口
  3. DOM Level 3 引入了以统一的方式载入和保持文档的方法（包含在新模块 DOM Load and Save）以及验证文档（DOM Validation）的方法，从而进一步扩展了 DOM。在 Level 3 中，DOM Core 被扩展为支持所有的 XML 1.0 特性，包括 XML Infoset、XPath 和 XML Base。

▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A1个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● DOM Node 对象：

▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_node.asp

▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html

　　节点对象代表文档树中的一个节点。Node 对象是整个 DOM 的主要数据类型。节点可以是文档节点、元素节点、属性节点、文本节点、注释节点等，详见后面的表格。

请注意，虽然所有的对象均能继承用于处理父节点和子节点的属性和方法，但是并不是所有的对象都拥有父节点或子节点。例如，文本节点不能拥有子节点，所以向类似的节点添加子节点就会导致 DOM 错误。

Node 对象属性 描述 DOM
attributes 返回元素属性的NamedNodeMap 1
baseURI 返回元素的绝对基准 URI 3
childNodes 返回元素的子节点的 NodeList 1
firstChild 返回节点的首个子节点。 1
lastChild 返回节点的最后一个子节点。 1
localName 返回节点的本地名称。 2
namespaceURI 返回元素的命名空间 URI 2
nextSibling 返回节点之后紧跟的同级节点。 1
nodeName 返回节点的名称，根据其类型。 1
nodeType 返回节点的类型。 1
nodeValue 设置或返回节点的值，根据其类型。 1
ownerDocument 返回节点的根元素（document 对象）。 2
parentNode 返回节点的父节点。 1
prefix 设置或返回节点的命名空间前缀。 2
previousSibling 返回节点之前紧跟的同级节点。 1
textContent 设置或返回节点及其后代的文本内容。 3
Node 对象方法 描述 DOM
append
Child()		 向节点的子节点列表的结尾添加新的子节点。 1
cloneNode() 复制节点。 1

compareDocumentPosition()		 对比两个节点的文档位置。 1
getFeature(feature,version) 返回一个 DOM 对象，此对象可执行带有指定特性和版本的专门的 API。 3
getUserData(key) 返回与此节点上的某个键相关联的对象。此对象必须首先通过使用相同的键来调用
setUserData 被设置到此节点。		 3
hasAttributes() 判断当前节点是否拥有属性。 2
hasChildNodes() 判断当前节点是否拥有子节点。 1
insertBefore() 在指定的子节点前插入新的子节点。 1
isDefaultNamespace() 返回指定的命名空间 URI 是否为默认。 3
isEqualNode() 检查两个节点是否相等。 3
isSameNode() 检查两个节点是否是相同的节点。 3
isSupported() 返回当前节点是否支持某个特性。 2
lookupNamespaceURI() 返回匹配指定前缀的命名空间 URI。 3
lookupPrefix() 返回匹配指定命名空间 URI 的前缀。 3
normalize() 合并相邻的Text节点并删除空的Text节点。 2
removeChild() 删除（并返回）当前节点的指定子节点。 1
replaceChild() 用新节点替换一个子节点。 1
setUserData(key,data,handler) 把对象关联到节点上的一个键上。 3
节点类型nodeType 描述 nodeName
返回值		 nodeValue
返回值		 子节点
1 Element 表示 element（元素）元素。 element name null Element, Text, Comment,
ProcessingInstruction, CDATASection, EntityReference
2 Attr 表示属性。 属性名称 属性值 Text, EntityReference
3 Text 表示元素或属性中的文本内容。 #text 节点内容 None
4 CDATASection 表示文档中的 CDATA 区段（文本不会被解析器解析）。 #cdata-section 节点内容 None
5 EntityReference 表示实体引用元素。 实体引用名称 null Element, ProcessingInstruction, Comment,
Text, CDATASection, EntityReference
6 Entity 表示实体。 实体名称 null Element, ProcessingInstruction, Comment,
Text, CDATASection, EntityReference
7 ProcessingInstruction 表示处理指令。 target 节点的内容 None
8 Comment 表示注释。 #comment 注释文本 None
9 Document 表示整个文档（DOM 树的根节点）。 #document null Element, ProcessingInstruction, Comment,
DocumentType
10 DocumentType 向为文档定义的实体提供接口。 doctype 名称 null None
11 DocumentFragment 表示轻量级的 Document 对象，其中容纳了一部分文档。 #document fragment null Element, ProcessingInstruction, Comment,
Text, CDATASection, EntityReference
12 Notation 表示在 DTD 中声明的符号。 符号名称 null None

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A2个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● DOM NodeList 对象：

▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_nodelist.asp

▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html

NodeList 对象代表一个有顺序的节点列表。我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。
注释：在一个节点列表中，节点被返回的顺序与它们在 XML 被规定的顺序相同。

NodeList 对象属性 描述 DOM
length 返回节点列表中的节点数目。 1
NodeList
对象方法		 描述 DOM
item() 返回节点列表中处于指定的索引号的节点。 1

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A3个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● DOM NamedNodeMap 对象：

▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_namednodemap.asp

▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html

NamedNodeMap 对象表示一个无顺序的节点列表。我们可通过节点名称来访问 NamedNodeMap 中的节点。NamedNodeMap 可保持其自身的更新。假如节点列表或 XML 文档中的某元素被删除或添加，节点也会被自动更新。
注释：在一个指定的节点地图中，节点不会以任何次序返回。
NamedNodeMap
对象属性		 描述 DOM
length 返回列表中的节点数目 1
NamedNodeMap
对象方法		 描述 DOM
getNamedItem() 返回指定的节点（通过名称） 1
getNamedItemNS() 返回指定的节点（通过名称和命名空间） 2
item() 返回处于指定索引号的节点 1

removeNamedItem()		 删除指定的节点（根据名称）/td> 1
removeNamedItemNS() 删除指定的节点（根据名称和命名空间） 2
setNamedItem() 设置指定的节点（根据名称） 1
setNamedItemNS() 设置指定的节点（通过名称和命名空间） 2

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A4个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● DOM Document 对象：

▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_core_document.asp

▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html

Document 对象是一棵文档树的根，可为我们提供对文档数据的最初（或最顶层）的访问入口。用于元素节点、文本节点、注释、处理指令等均无法存在于 document 之外，document 对象同样提供了创建这些对象的方法。Node 对象提供了一个 ownerDocument 属性，此属性可把它们与在其中创建它们的 Document 关联起来。
Document 对象属性 描述 DOM
继承所有Node对象的属性
doctype 返回与文档相关的文档类型声明 (DTD)。 1
documentElement 返回文档的根节点 1
documentURI 设置或返回文档的位置 3
domConfig 返回normalizeDocument()被调用时所使用的配置 3
implementation 返回处理该文档的 DOMImplementation 对象。 1
inputEncoding 返回用于文档的编码方式（在解析时）。 3
strictErrorChecking 设置或返回是否强制进行错误检查。 3
xmlEncoding 返回文档的编码方法。 3
xmlStandalone 设置或返回文档是否为 standalone。 3
xmlVersion 设置或返回文档的 XML 版本。 3
Document
对象方法		 描述 DOM
继承所有Node对象的方法
adoptNode(node) 从另一个文档向本文档选定一个节点，然后返回被选节点。 3
createAttribute() 创建拥有指定名称的属性节点，并返回新的 Attr 对象。 1
createAttributeNS(URI,name) 创建拥有指定名称和命名空间的属性节点，并返回新的 Attr 对象。 2

createCDATASection()		 创建 CDATA 区段节点，仅适用于XML。 1
createComment() 创建注释节点。 1

createDocumentFragment()		 创建空的 DocumentFragment 对象，并返回此对象。 1
create Element() 创建元素节点。 1
create ElementNS() 创建带有指定命名空间的元素节点。 2

createEntityReference()		 创建 EntityReference 对象，并返回此对象，仅适用于XML。 1
createProcessingInstruction() 创建 ProcessingInstruction
对象，并返回此对象，仅适用于XML。		 1
createTextNode() 创建文本节点。 1

getElementById()		 查找具有指定的唯一 ID 的元素。 2

getElements ByTagName()		 返回所有具有指定名称的元素节点。 1

getElementsByTagNameNS()		 返回所有具有指定名称和命名空间的元素节点。 2
importNode() 把一个节点从另一个文档复制到该文档以便应用。 2

normalizeDocument()		 Removes empty Text nodes, and joins
adjacent nodes		 3
renameNode() 重命名指定的节点。 3

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A5个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● DOM Element 对象：

▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_element.asp

▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html

Element 对象表示的元素可包含属性、其他元素或文本。如果元素含有文本，则在文本节点中表示该文本。文本永远存储在文本节点中。在 DOM 处理过程中的一个常见的错误是，导航到元素节点，并认为此节点含有文本。不过，即使最简单的元素节点之下也拥有文本节点。举例，在 <year>2005</year> 中，有一个元素节点（year），同时此节点之下存在一个文本节点，其中含有文本（2005）。
Element 对象属性 描述 DOM
继承所有Node对象的属性
schemaTypeInfo 返回与元素相关联的类型信息 3
tagName 返回元素的名称 1
Element
对象方法		 描述 DOM
继承所有Node对象的方法
getAttribute() 返回属性的值。 1
getAttributeNS() 返回属性的值，仅适用于XML。 2
getAttributeNode() 以 Attribute 对象返回属性节点 1

getAttributeNodeNS()		 以 Attribute 对象返回属性节点，仅适用于XML。 3

getElements ByTagName()		 找到具有指定标签名的子孙元素。 1

getElementsByTagNameNS()		 找到具有指定标签名和命名空间的元素，仅适用于XML。 2
hasAttribute() 返回元素是否拥有指定的属性。 2
hasAttributeNS() 返回元素是否拥有指定的属性，仅适用于XML。 2
removeAttribute() 删除指定的属性。 1
removeAttributeNS() 删除指定的属性，仅适用于XML。 2

removeAttributeNode()		 删除指定的属性节点。 1
setAttribute() 添加新属性。 1
setAttributeNS() 添加新属性，仅适用于XML。 2
setAttributeNode() 添加或改变属性节点。 1

setAttributeNodeNS()		 添加或改变属性节点。 2
setIdAttribute() 如果 Attribute 对象 isId 属性为
true，那么此方法会把指定的属性声明为一个用户确定 ID 的属性（user-determined ID
attribute）。		 3
setIdAttributeNS() 如果 Attribute 对象 isId 属性为
true，那么此方法会把指定的属性声明为一个用户确定 ID 的属性（user-determined ID
attribute）（带有命名空间）。		 3
setIdAttributeNode() 如果 Attribute 对象 isId 属性为
true，那么此方法会把指定的属性声明为一个用户确定 ID 的属性（user-determined ID
attribute）。		 3

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第A6个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● DOM Attr 对象：

▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_attr.asp

▷ 中文参考：http://blog.sina.com.cn/s/blog_61e439e5010167in.html

Attr 对象表示 Element 对象的属性。
Attr 对象属性 描述 DOM
继承所有Node对象的属性
isId 如果属性是 id 类型，则返回 true，否则返回 false。 3
name 返回属性的名称。 1
ownerElement 返回属性所附属的元素节点。 2
schemaTypeInfo 返回与属性相关联的类型信息。 3
specified 如果属性值被设置在文档中，则返回 true，如果其默认值被设置在 DTD/Schema 中，则返回 false。 1
value 设置或返回属性的值。 1

 

---------------------------------------------------------------------------------------------------------

            ╔════════╗
╠════╣    第G1个    ╠══════════════════════════════════════════════════╣
            ╚════════╝

●·● DOM Document 对象：

▷ w3school (英)：http://www.w3schools.com/jsref/dom_obj_document.asp

▷ w3school (中)：http://www.w3school.com.cn/htmldom/dom_obj_document.asp

1. 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问.

　　Document 对象是 Window 对象的一部分, 可通过 window.document 属性对其进行访问.

2. 方法：

  • getElementById(id)：返回对拥有指定 id 的第一个对象的引用.
  • getElementByName(name)：返回带有指定名称的对象集合.
  • -->

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞