Jquery从入门到精通:二、选择器 1、准备篇 1)基础的基础:DOM模型
2008-11-04 15:09
357 查看
[b]二、选择器
1、准备篇
(1)基础的基础:DOM模型
[/b]
什么是DOM
文件对象模型(Document Object Model,DOM)是给 HTML 与 XML 文件使用的一组 API。它提供了文件的结构表述(representation),让你可以更动其中的内容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。
所有网页设计师可操作及建立文件的属性、方法及事件都以[对象]来展现(例如,document 就代表「文件本身」这个对象,table 对象则代表 HTML 的表格对象等等)。这些对象可以由当今大多数的浏览器以 Script 来取用。
DOM 最常被用以[与 JavaScript 沟通],也就是说虽然程序以 JavaScript? 写成,但使用 DOM 来存取页面及其元素。无论如何,DOM 本身是设计为一种独立的程序语言,以一致的 API 存取文件的结构表述;是以虽然本站的焦点放在 JavaScript? 上,但 DOM 其实可以与[任何程序语言]共同运作。
[全球信息网协会](World Wide Web Consortium,W3C)建立了 [DOM] 的标准,称之为「W3C DOM」。在当今主要浏览器都已正确实作的情况下,W3C DOM 使强大、跨浏览器的应用程序成真。这是众网页设计师在 Netscape 4 与 MSIE 多不相容的时代从未梦想过的事情。
DOM的结构:
在DOM 中,我们将代表XML 文件的程序设计对象,称为节点(nodes)。当Internet Explorer 5 处理被链接的XML 文件并储存于DOM 中时,它会为XML 文件的每一个基本组件建立一个节点。这些基本组件包括了元素、属性,与处理指令DOM 会使用不同形态的节点来代表不同形态的XML 组件。例如,元素是储存在Element 节点中,而属性则是储存在Attribute 节点中。表格1 列出了这些节点类型最重要的部分。
节点形态 | 节点对象所代表的XML文件组件 | 节点名称(nodeName 对象属性) | 节点的值(nodeValue 对象属性) |
文件(Document) | 文件阶层中的根节点(代表整个XML 文件) | #document | Null |
元素(Element) | 元素 | 元素形态名称(例如,BOOK) | null(包含在元素中的(Element)任何字符数据,是位在一个或多个子文字节点中) |
文字(Text) | 属于由这个节点的父节点所代表的元素,属性及实体的文字。 | #text | 父XML 组件的文字 |
属性(Attribute) | 属性 (以及其它的名值对,像处理指令中的名字与值) | 属性名称 (如Binding) | 属性值(例如hardcover) |
处理指令 (Processing Instruction ) | 处理指令(XML 宣告或自订的处理指令) | 处理指令的目标(例如xml) | 除了目标之外整个处理指令的内容(例如,Version "1.0") |
批注(Comment) | 批注 | #comment | 在批注符号中的文字 |
CDATA 区段(CDATASection) | CDATA 区段 | #cdata-section | CDATA 区段中的内容 |
文件类型(Document Type) | 文件形态宣告 | 出现在DOCTYPE 宣告中的根元素的名字(例如INVENTORY) | Null |
实体(Entity) | DTD 中的实体宣告 | 实体名称(例如image) | null (实体值是位在子文字节点中) |
标签 | DTD 中的标签宣告 | 标签名称(例如BMP) | >null (卷标的系统literal(Notation)是位在名为SYSTEM 的子Attribute node中) |
你可以从节点中的nodeName 属性获得每个节点的名称(详列于表格9-1 中的第三栏)。这个名称是以字符#起始,代表那些未在文件中命名的XML 组件节点的标准名称。(例如,在XML文件中的批注并未命名。因此,DOM 将使用标准名称#comment。)其它节点的名称则是由指定到XML 文件中相对应组件的名称衍生而来。(例如,代表形态BOOK 元素的元素节点也可以命名为BOOK。)
你可以从节点的 nodeValue 属性取得每个节点的节点值(列于表格9-1 中最后一栏)。如果XML组件拥有一个相关的值(例如,属性),该值将会被储存于节点的节点值中。如果XML 组件并没有节点值(例如,元素),则DOM 将会把节点值设成null。在本章稍后,你将学到更多有关列于表格9.1 中各种节点类型的相关知识。
DOM 会将XML 文件的节点建构成树状的阶层结构,反映出XML 文件本身的阶层结构。DOM将会建立一个单一文件节点来表示整个XML 文件,并将其视为阶层结构的根节点。注意,XML元素的逻辑阶层结构,包含了整个XML 文件,结构中的根节点,只是DOM 节点的阶层结构的一个分枝。
每个节点,就像可程序化的对象,提供了属性和方法,让你可以存取、显示、管理,和取得对应到XML 组件上的信息。例如,nodeName 和nodeValue 属性(表1 所示)提供了元素的名称及内含值。
所有形态的节点共同分享一组公共的属性与方法。这些属性与方法一般是设计来偕同节点一起运作。表格2 列出了一些比较有用的共同属性。在本章稍后你将获得有关这些属性的更多信息及范例。
属性 | 描述 | 范例 |
attributes | 该节点的所有非属性的子节点的NamedNodeMap 集合 | AttributeNode =Element.attributes.getNamedItem ("Binding"); |
childNodes | 该节点的所有非属性的子节点的NodeList 集合 | FirstNode =Element.childNodes (0); |
dataType | 该节点的数据类型(只适用于某些类型Attribute 节点) | AttributeType =Attribute.dataType; |
firstChild | 该节点的第一个非属性的子节点 | FirstChildNode =Element.firstChild; |
lastChild | 该节点的最后一个非属性的子节点 | LastChildNode =Element.lastChild; |
nextSibling | 与本节点位于同一层级的后继前一节点 | NextElement =Element.nextSibling; |
nodeName | 节点的名称 | ElementName =Element.nodeName; |
nodeType | 表示该节点类型的数值码 | NodeTypeCode =Node.nodeType; |
nodeTypeString | 包含该节点类型的字符串,以小写字母撰写(例如,"element"或"attribute") | NodeTypeString=Node.nodeTypeString; |
nodeValue | 该节点的值(如果不含值则为null) | AttributeValue =Attribute.nodeValue; |
ownerDocument | 包含本节点的文件的根Document 节点 | Document =Node.ownerDocument; |
parentNode | 该节点的父节点(并不适用于Attribute 节点) | ParentElement =Element.parentNode; |
previousSibling | 与本节点位于同一层级的先前节点 | PreviousElement =Element.previousSibling; |
text | 该节点与其后裔节点的全部文字内容 | AllCharacterData =Element.text; |
xml | 该节点与其后裔节点的全部XML 内容 | XMLContent =Element.xml; |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.gooddo.com</title>
</head>
<body>
<div>
<p><a href="http://www.gooddo.com/" target="_blank">www.gooddo.com</a></p>
<p><a href="http://www.downke.cn/" target="_blank">www.downke.cn</a></p>
<p><a href="http://www.hotbook.cn/" target="_blank">www.hotbook.cn</a></p>
</div>
</body>
</html>
DOM可以看成是家族式的元素的集合。
html是所以元素的祖元素,其它的元素都是它的后代元素。
head 和body是html的子元素。反之,html是head\body两者的父元素。
div是body的子元素,p是div的子元素,p是body的后代元素。p之间是同辈的元素。
相关文章推荐
- [导入]Jquery从入门到精通:二、选择器 1、准备篇 1)基础的基础:DOM模型
- [导入]Jquery从入门到精通:二、选择器 1、准备篇 (2)$()工厂方法
- jQuery基础教程之强大的选择器(过滤选择器-内容过滤选择器)
- jQuery基础教程之强大的选择器(过滤选择器-子元素过滤选择器)
- JQuery基础 -- 准备工作
- jQuery基础教程--DOM遍历方法
- JQuery基础选择器及过滤选择器的用法,今天刚学,写一下加深印象
- Jquery基础之DOM操作
- jquery基础选择器
- JQuery基础之(三)JQuery选择器
- jQuery选择器、操作DOM、事件、动画
- Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM
- 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作
- jQuery基础篇(二)DOM
- Jquery基础之DOM操作
- jquery学习随笔(基础DOM与CSS)
- JQuery中基础过滤选择器用法实例分析
- JQuery中基础过滤选择器用法实例分析
- jQuery学习笔记之选择器(继基础核心篇)
- JQUERY Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM