文档对象模型

来源：互联网发布：淘宝店铺抽奖活动设置编辑：程序博客网时间：2024/06/08 01:23

DOM是针对HTML和XML文档的一个API（应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。1998年10月DOM1级规范成为W3C的推荐标准，为基本的文档结构以及查询提供了接口。但是要注意，IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点拥有各自的特点，数据和方法，另外也有与其他节点存在某种关系。节点之间的关系构成了层次，所有页面标记则表现为一个以特定节点为根节点的树形结构。

1) Node类型

DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。除了IE之外，在其他所有浏览器中都可以访问到这个类型。javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。

1. 节点关系

属性：

nodeType

表示节点类型

Element 1;TextNode 3;Comment 8;Document 9

nodeName

该属性取决于节点类型，如果是元素类型，值为元素的标签名

nodeValue

该属性取决于节点类型，如果是元素类型，值有null

childNodes

属性，保存一个NodeList对象，NodeList是一种类数组对象用来保存一组有序的节点，NodeList是基于DOM结构动态执行查询的结果，DOM结构变化可以自动反应到NodeList对象中。访问时可以通过中括号访问，也可以通过item()方法访问。

parentNode

指向文档树中的父节点。包含在childNodes列表中所有的节点都具有相同的父节点，每个节点之间都是同胞/兄弟节点。

previousSibling

兄弟节点中的前一个节点

nextSibling

兄弟节点中的下一个节点

firstChild

childNodes列表中的第一个节点

lastChild

childNodes列表中的最后一个节点

ownerDocument

指向表示整个文档的文档节点。任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。

方法：

hasChildNodes()

在包含一个或多个子节点的情况下返回true

2) Document类型

javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document

1. 文档子节点

可以继承Node中所有的属性和方法

属性：

documentElement始终指向HTML页面中的<html>元素。

body直接指向<body>元素

doctype访问<!DOCTYPE>, 浏览器支持不一致，很少使用

title获取文档的标题

URL取得完整的URL

domain取得域名，并且可以进行设置，在跨域访问中经常会用到。

referrer取得链接到当前页面的那个页面的URL，即来源页面的URL

images获取所有的img对象，返回HTMLCollection类数组对象

forms获取所有的form对象，返回HTMLCollection类数组对象

links获取文档中所有带href属性的<a>元素

2. 查找元素

getElementById()

参数为要取得元素的ID，如果找到返回该元素，否则返回null如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID，该元素也会被匹配。

getElementsByTagName()

参数为要取得元素的标签名，返回包含0个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似。可以通过[index/name],item(),namedItem(name)访问

getElementsByName()

参数为元素的name,返回符合条件的HTMLCollection

getElementsByClassName()

参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的class属性值包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。

3.操作节点和节点内容

document对象的方法：

write()这个方法可以把任意字符串插入到文档中

createElement()创建一个元素节点

createTextNode()创建一个文件节点

以下四个方法都需要父节点对象进行调用!

appendChild()

向childNodes列表末尾添加一个节点。返回新增的节点。关系更新如果参数节点已经为文档的一部分，位置更新而不插入，dom树可以看做是由一系列的指针连接起来的，任何DOM节点不能同时出现在文档中的多个位置。

insertBefore()

第一个参数：要插入的节点；

第二个参数：作为参照的节点；

被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。如果第二个参数为null将会将该节点追加在NodeList后面

replaceChild()

第一个参数：要插入的节点；

第二个参数：要替换的节点；

要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。

removeChild()

一个参数，即要移除的节点。

移除的节点将作为方法的返回值。其他方法,任何节点对象都可以调用。

3 Element类型

1. HTML元素

所有的HTML元素都由HTMLElement类型表示，或者其子类型表示。每个HTML元素都应具有如下一些属性以及html元素特有的属性。

id元素在文档中的唯一标识符

title有关元素的附加说明信息

className与元素class特性对应

srcimg元素具有的属性

altimg元素具有的属性

lang元素内容的语言代码，很少使用！

dir语言方向，ltr,rtl 左到右，右到左、

每个元素都有一个或者多个特性，这些特性的用途是给出相应元素或内容的附加信息。可以通过属性访问到该属性对应的值,特性的名称是不区分大小写的，即"id""ID"表示相同的特性，另外需要注意的是，根据HTML5规范，自定义特性应该加上data-前缀，以便验证。

1)取得自定义属性

getAttribute() 参数为实际元素的属性名，calss,name,id,title,lang,dir一般只有在取得自定义特性值的情况下，才会用该方法大多数直接使用属性进行访问，比如style,onclick

2)设置属性

dom.className = "one"

dom.setAttribute("className","one");

setAttribute() 两个参数，第一个参数为要设置的特性名，第二个参数为对应的值。如果该值存在，替换。

3)移除属性

removeAttribute() 移除指定的特姓

4)attributes属性，其中包含了一个NamedNodeMap,与NodeList类似。

getNamedItem(name)返回nodeName属性等于name的节点

removeNamedItem(name) 从列表中删除nodeName属性等于name的值

setNamedItem(node) 向列表中添加一个节点

item(pos)返回位于数字pos位置处的节点

6)元素的子节点

<ul>

</ul>

ie8及以下版本浏览器3个子节点

其他浏览器7个子节点

7)特殊特性

style

通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问返回一个对象，由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性

onclick类似的事件处理程序

通过getAttribute()访问时，返回相应代码字符串；访问onclick属性时，返回一个javascript函数

2. 作为文档树的文档

将文档看做是Element对象树，忽略文档Text,Comment节点。Element中的属性

children

类似于childNodes,返回NodeList对象，但是该对象中仅包含Element对象

firstElementChild

第一个孩子元素节点

lastElementChild

最后一个孩子元素节点

nextElementSibling

下一个兄弟元素节点

previousElementSibling

上一个兄弟元素节点

childElementCount

子元素的数量，返回值和children.length值相等

3. 元素内容

innerHTML 返回元素内容

textContent 非ie浏览器

innerText ie浏览器

4 Text类型：文本类型

文本节点。包含的是可以按照字面解释的存文本内容。

length

文本长度

appendData(text)

追加文本

deleteData(beginIndex,count)

删除文本

insertData(beginIndex,text)

插入文本

replaceData(beginIndex,count,text)

替换文本

splitText(beiginIndex)

从beginIndex位置将当前文本节点分成两个文本节点

substringData(beiginIndex,count)

从beginIndex开始提取count个子字符串

<span>这个是文本节点</span>

document.createTextNode()

创建文本节点，参数为要插入节点中的文本

5 Comment类型：注释类型

Comment类型

阅读全文

0 0