HTMLDOM入门
HTML 文档对象模型(HTML Document Object Model)定义了访问和处理 HTML 文档的标准方法。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。
HTML 文档中的每个成分都是一个节点。
节点
根据 DOM,HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的:
- 整个文档是一个文档节点
- 每个 HTML 标签是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每一个 HTML 属性是一个属性节点
- 注释属于注释节点
Node 层次
节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。
HTMLDOM访问节点
通过 HTMLDOM,您可访问 HTML 文档中的每个节点。
查找并访问节点
你可通过若干种方法来查找您希望操作的元素:
- 通过使用 getElementById() 和 getElementsByTagName() 方法
- 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
getElementById() 和 getElementsByTagName()
getElementById() 和 getElementsByTagName() 这两种方法,可查找整个 HTML 文档中的任何 HTML 元素。
这两种方法会忽略文档的结构。假如您希望查找文档中所有的 <p> 元素,getElementsByTagName() 会把它们全部找到,不管 <p> 元素处于文档中的哪个层次。同时,getElementById() 方法也会返回正确的元素,不论它被隐藏在文档结构中的什么位置。这两种方法会像您提供任何你所需要的 HTML 元素,不论它们在文档中所处的位置!
注释:getElementById() 无法工作在 XML 中。在 XML 文档中,您必须通过拥有类型 id 的属性来进行搜索,而此类型必须在 XML DTD 中进行声明。
getElementsByTagName() 方法会使用指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代。
parentNode、firstChild以及lastChild
这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。
对 firstChild 最普遍的用法是访问某个元素的文本:
var x=[a paragraph]; var text=x.firstChild.nodeValue;
parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点:
var x=document.getElementById("maindiv"); x.parentNode.removeChild(x);
根节点
有两种特殊的文档属性可用来访问根节点:
- document.documentElement
- document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。
HTMLDOM节点的三个重要属性
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
- nodeName(节点名称)
- nodeValue(节点值)
- nodeType(节点类型)
nodeName
nodeName 属性含有某个节点的名称。
- 元素节点的 nodeName 是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
对于文本节点,nodeValue 属性包含文本。
对于属性节点,nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是:
元素类型 | 节点类型 |
---|---|
元素 | 1 |
属性 | 2 |
文本 | 3 |
注释 | 8 |
文档 | 9 |
Browser 对象参考手册
点击以下链接,可以获得以下对象的更多信息,包括它们的集合、属性、方法以及事件。其中包含大量实例!
对象 | 描述 |
---|---|
Window | JavaScript 层级中的顶层对象,表示浏览器窗口。 |
Navigator | 包含客户端浏览器的信息。 |
Screen | 包含客户端显示屏的信息。 |
History | 包含了浏览器窗口访问过的 URL。 |
Location | 包含了当前 URL 的信息。 |
HTML DOM 对象参考手册
请点击下面的链接,学习更多有关对象及其集合、属性、方法和事件的知识。其中包含大量实例!
对象 | 描述 |
---|---|
Document | 代表整个 HTML 文档,可被用来访问页面中的所有元素 |
Anchor | 代表 <a> 元素 |
Area | 代表图像映射中的 <area> 元素 |
Base | 代表 <base> 元素 |
Body | 代表 <body> 元素 |
Button | 代表 <button> 元素 |
Event | 代表某个事件的状态 |
Form | 代表 <form> 元素 |
Frame | 代表 <frame> 元素 |
Frameset | 代表 <frameset> 元素 |
Iframe | 代表 <iframe> 元素 |
Image | 代表 <img> 元素 |
Input button | 代表 HTML 表单中的一个按钮 |
Input checkbox | 代表 HTML 表单中的复选框 |
Input file | 代表 HTML 表单中的文件上传 |
Input hidden | 代表 HTML 表单中的隐藏域 |
Input password | 代表 HTML 表单中的密码域 |
Input radio | 代表 HTML 表单中的单选按钮 |
Input reset | 代表 HTML 表单中的重置按钮 |
Input submit | 代表 HTML 表单中的确认按钮 |
Input text | 代表 HTML 表单中的文本输入域(文本框) |
Link | 代表 <link> 元素 |
Meta | 代表 <meta> 元素 |
Object | 代表 <Object> 元素 |
Option | 代表 <option> 元素 |
Select | 代表 HTML 表单中的选择列表 |
Style | 代表单独的样式声明 |
Table | 代表 <table> 元素 |
TableData | 代表 <td> 元素 |
TableRow | 代表 <tr> 元素 |
Textarea | 代表 <textarea> 元素 |