www.baike369.com
百科369 > JS教程 > JavaScript文档对象模型(DOM)

JavaScript文档对象模型(DOM)



JavaScript文档对象模型(DOM)

文档对象模型(DOM)是一个基础性概念,主要涉及网页页面元素的层次关系。很好地理解文档对象模型(DOM)的概念,对于编写出高效、实用的JavaScript程序是非常有帮助的。

JavaScript文档对象模型(DOM)概述

DOM是Document Object Model的缩写,由W3C进行标准化。

JavaScript文档对象模型(DOM)分层

W3C对DOM定义了下面3个层次:DOM第0层(简称DOM0):大致相当于Netscape 3和IE 3支持的层次。

JavaScript文档(Document)树的简单例子

现在介绍一个Document树的示例。


JavaScript访问元素

在DOM中,可以对页面元素进行访问,甚至对其进行操作。

JavaScript使用DOM访问具体的HTML元素属性

XHTML属性名与DOM属性名之间几乎存在一对一的关系,HTML的标签也可以在DOM中找到与其对应的对象。

JavaScript使用getElementById()方法访问元素及其关联属性

在JavaScript中,如果可以使用类似document.getElementById()方法访问一个元素,则可以直接操作该元素及其关联属性。

JavaScript使用createElement()方法添加XHTML元素

在JavaScript中,使用document.createElement()方法可以向页面中直接添加XHTML元素。

JavaScript使用元素标识和getElementById()方法访问HTML页面元素

在下面的示例中,<p>标签由其id的属性值“p1”唯一标识:由于该段落被唯一标识,可以使用Document对象的getElementById()方法访问该段落。

JavaScript DOM节点属性及示例

下表列出了DOM节点的所有属性:属性描述nodeName包含了节点名称。

JavaScript DOM HTMLElement的公用属性与方法

除DOM定义的属性之外,在HTML 4和XHTML中,所有的元素都还具有一个公用属性核心集(id、style、class与title)。

JavaScript使用hasChildNodes()方法进行相邻节点及文档树检测实例

如果不知道某个节点的子节点时,可以使用hasChildNodes()方法。


JavaScript节点

JavaScript使用DOM方法创建节点

DOM支持创建节点的方法,这些方法作为Document对象的一部分来使用。

JavaScript使用DOM方法插入和追加节点

Node对象可以使用两个方法来插入节点:appendChild(newChild)方法:可以作为某节点的方法来调用。

JavaScript在DOM中使用cloneNode()方法进行节点复制

有时候,不想创建或插入一个全新的HTML元素,可以使用cloneNode()方法创建某个节点的一个副本。

JavaScript在DOM中使用removeChild()方法删除节点

在网页设计中,经常会遇到从树中删除一个结点的情况。

JavaScript在DOM中使用replaceChild()方法替换节点

在DOM中,还可以使用replaceChild(newChild,oldChild)方法实现对节点的替换,其中的newChild为替换后的节点。

JavaScript在DOM中处理文本节点的方法

虽然HTML元素属性可以修改,但元素不能被直接修改。


JavaScript属性

本节介绍DOM的属性应用、DOM与HTML的联系、DOM遍历以及DOM2中Range选择。

JavaScript DOM属性的使用

DOM支持很多关于属性操作的方法,由于数量较多,且用法简单,这里不逐一列举这些方法了。

JavaScript DOM与HTML元素

由于很多对象属性与XHTML元素之间有着直接的映射关系,所以,要很好地掌握DOM,就必须需要对XHTML语法有很好的掌握。

JavaScript DOM Range选择

DOM第二层(DOM2)提供了一个很有用的扩展即DOM Range API,允许选择文档目录的排列。


JavaScript与DHTML相对的DOM

在DHTML中有很多对DOM的支持,下面介绍DOM对HTML元素内容的读取与修改。由于不同浏览器对DOM的支持不同,显示结果也会有所不同。

JavaScript在DOM中使用innerHTML属性读取HTML元素内容

Netscape 6+、Opera 7+以及IE 4+都支持非标准的innerHTML属性,该属性允许对HTML元素内容的简单读取和修改。

JavaScript在DOM中的document.all[]

在IE浏览器对象模型中,已有大量的脚本代码,最具代表性的就是document.all[]。


JavaScript用DOM处理表格

JavaScript使用DOM设置HTML 4中的表格属性

HTML 4中的<table>有着与DOM中很相似的属性名。

JavaScript使用DOM操作表格元素

可以使用createTHead()、createTFoot()、createCaption()与insertRow(index)等方法创建表格元素。

JavaScript使用DOM操作表格单元

在HTML的<td>标签中,还有一个cellIndex属性,表示当前行中表格单元的索引。


JavaScript DOM应用

JavaScript使用DOM的firstChild属性改变<div>标签的内容

在JavaScript的DOM中。

JavaScript使用DOM的getElementById()方法改变页面样式

在JavaScript的DOM中,使用getElementById()方法可以改变页面的样式。

Copyright© 2011-2016 www.baike369.com All Rights Reserved