文档对象模型DOM

最新推荐文章于 2025-02-08 15:21:28 发布

转载最新推荐文章于 2025-02-08 15:21:28 发布 · 217 阅读

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了DOM（文档对象模型）的基础知识，包括其定义、浏览器支持情况及节点树的概念。详细讲解了各种节点类型和属性，如document节点、Element节点等，并提供了创建、操作节点的方法。同时，还介绍了如何通过DOM实现元素属性的读取和修改。

DOM简介

DOM是文档对象模型，由W3C组织提出的标准。

DOM是一种XML文档的解析标准。

DOM的原理是将XML/XHTML文档装入内容，并以节点的形式解析为一棵节点树。

DOM提供相应的API，可以对节点树进行增删改查。

利用DOM可以让JavaScript对网页中的元素进行控制，实现动态网页的功能。

浏览器对DOM的支持情况

Mozilla ：支持全部Level2,部份Level3
Opera,Safair：支持全部Level1和大部份Level2
IE：只支持大部份Level1

DOM节点树例子

<html>
<head>
    <title>MyHtml.html</title>
</head>
<body>
    <input type="button" name="name"/>
   <label>aaaaaaaaaaaa</label>
</body>
</html>

节点类型
document节点：代表整个文档，也代表根节点。
DocType节点：DTD样式
DocumentFragment：片段节点。
Element：元素节点
Text：文本节点
Attr：属性节点
CDataSection：CData类型的文本节点
Comment：注释节点

注：通过node.nodeType属性可以得到节点类型值，它们对应有一些常量，但IE不支持这些常量。

节点属性

nodeName：节点名字（节点名/#text）。
nodeValue：节点的值（nodeValue/null）。
nodeType ：节点类型
document.documentElement : 取得<html>元素节点
ownerDocument：节点所属文档
firstChild,lastChild：第1个/最后一个节点。
childNodes：所有子节点列表
previousSibling：前一个兄弟节点，没有则为null。
nextSibling：后一个兄弟节点，没有则为null。
hasChildNodes()：是否有子节点，返回true/false
attributes：元素节点的属性对象集合。
appendChild(node) ：添加元素节点到childNodes中
removechild(node)：从childNodes中删除节点
replaceChild(newNode,oldNode)：替换节点
insertBefore(newNode,refNode):在refNode前插入节点

DOM的辅助对象

NodeList ：节点集合，可用于遍历节点
NamedNodeMap : 以键/值对表示属性节点.

处理元素属性

元素节点.attributes取得元素属性集合，
类型是NamedNodeMap具有如下方法
getNamedItem(name)-返回指定名称的属性节点
removeNamedItem(name)-删除指定名称的属性节点
setNamedItem(node)-添加属性节点
item(pos)-返回指定位置的节点
length属性 - 属性节点数量
getAtrribute(name)-取得指定名称属性的值。
（元素节点.get...）
setAttribute(name,value)-设置属性的名值对
removeAttribute(name)-删除属性

访问元素节点

getElementsByTagName(name)
返回指定元素的称的元素节点集合
getElementByTagName(*)能得到所有元素节点，IE支持，不推荐使用。
getElementsByName(name)
按name属性值获取元素节点集合。
IE在使用这个方法时存在问题，不推荐使用。
getElementById(id)
通过元素ID取得节点
兼容所有浏览器，推荐使用。
id和别的元素的name不能相同，这是IE的bug

创建和操作节点

新建，添加，删除，替换节点
createElement(name)-创建元素节点
(创建documet.create......)
createTextNode(text)-创建文本节点（text是值）
createAttribute(name)-创建属性节点
createComment(text)-创建注释节点
createDocumentFragment()-创建文档碎片节点，提高效率
removeChild(node)-删除子节点
replaceChild(newNode,oldNode)-替换子节点
insertBefore(newNode,oldNode)-插入到指定位置
cloneNode(是否包含子节点)-复制节点

操作文本节点

元素节点.firstChild-获取文本节点
textNode.length-获取文本节点长度
textNode.data="..." - 设置文本内容
appendData(string) - 添加文本（默认添加在最后面）
deleteData(offset,count) - 删除指定位置和长度的文本
insertData(offset,string) - 在指定位置插入文本
replaceData(offset,count,string) - 替换指定位置和长度的文本

操作属性节点

setAttribute()，getAttribute()等方法IE不能正确识别，不推荐使用。
可以象使用属性一样使用元素属性
class属性例外，它是关键字，应替换成className

innerHTML

方便地设置元素的内容
不是DOM的一部分，但被所有浏览器支持
推荐使用。
Table和select不支持（ie不支持）

操作table的更好方法

可以使用创建插入元素的办法来创建表格，但代码很冗长，见P91。
DOM提供了专门操作table的方法
rows:表格的所有<tr>节点集合
deleteRow(pos):删除指定位置的<tr>节点。
insertRow(pos):在指定位置插入<tr>节点。
cells:<tr>节点中的所有<td>集合
deleteCell(pos):删除指定位置上的<td>节点
insertCell(pos):在指定位置插入一个<td>节点
class属性例外，它是关键字，应替换成className