W3C DOM操作API

在DOM眼中,HTML跟XML一样是一种树形结构的文档,<html>是根(root)节点,<head>、<title>、<body>是<html>的子(children)节点,互相之间是兄弟(sibling)节点;<body>下面才是子节点<table>、<span>、<p>等等。如下图:
HTML文档结构.jpg
这个是不是跟XML的结构有点相似呢。不同的是,HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。


HTML文档的节点
DOM下,HTML文档各个节点被视为各种类型的Node对象。每个Node对象都有自己的属性和方法,利用这些属性和方法可以遍历整个文档树。由于HTML文档的复杂性,DOM定义了nodeType来表示节点的类型。这里列出Node常用的几种节点类型:

接口 nodeType常量 nodeType值 备注

Element Node.ELEMENT_NODE 1 元素节点

Text Node.TEXT_NODE 3 文本节点

Document Node.DOCUMENT_NODE 9 document

Comment Node.COMMENT_NODE 8 注释的文本

DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断

Attr Node.ATTRIBUTE_NODE 2 节点属性

DOM树的根节点是个Document对象,该对象的documentElement属性引用表示文档根元素的Element对象(对于HTML文档,这个就是<html>标记)。Javascript操作HTML文档的时候,document即指向整个文档,<body>、<table>等节点类型即为Element。Comment类型的节点则是指文档的注释。具体节点类型的含义,请参考《Javascript权威指南》,在此不赘述。


Document定义的方法大多数是生产型方法,主要用于创建可以插入文档中的各种类型的节点。常用的Document方法有:

方法 描述

createAttribute() 用指定的名字创建新的Attr节点。

createComment() 用指定的字符串创建新的Comment节点。

createElement() 用指定的标记名创建新的Element节点。

createTextNode() 用指定的文本创建新的TextNode节点。

getElementById() 返回文档中具有指定id属性的Element节点。

getElementsByTagName() 返回文档中具有指定标记名的所有Element节点。


对于Element节点,可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个Element节点的性质,比如<table>标记的border属性。下面列出Element常用的属性:

tagName


元素的标记名称,比如<p>元素为P。HTML文档返回的tabName均为大写。

Element常用的方法:

方法


描述

getAttribute()


以字符串形式返回指定属性的值。

getAttributeNode()


以Attr节点的形式返回指定属性的值。

getElementsByTabName()


返回一个Node数组,包含具有指定标记名的所有Element节点的子孙节点,其顺序为在文档中出现的顺序。

hasAttribute()


如果该元素具有指定名字的属性,则返回true。

removeAttribute()


从元素中删除指定的属性。

removeAttributeNode()


从元素的属性列表中删除指定的Attr节点。

setAttribute()


把指定的属性设置为指定的字符串值,如果该属性不存在则添加一个新属性。

setAttributeNode()


把指定的Attr节点添加到该元素的属性列表中。

Attr对象代表文档元素的属性,有name、value等属性,可以通过Node接口的attributes属性或者调用Element接口的getAttributeNode()方法来获取。不过,在大多数情况下,使用Element元素属性的最简单方法是getAttribute()和setAttribute()两个方法,而不是Attr对象。


使用DOM操作HTML文档

Node对象定义了一系列属性和方法,来方便遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动;通过遍历childNodes[]数组或者使用firstChild和nextSibling属性进行循环操作,也可以使用lastChild和previousSibling进行逆向循环操作,也可以枚举指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、replaceChild()方法可以改变一个节点的子节点从而改变文档树。

需要指出的是,childNodes[]的值实际上是一个NodeList对象。因此,可以通过遍历childNodes[]数组的每个元素,来枚举一个给定节点的所有子节点;通过递归,可以枚举树中的所有节点。下表列出了Node对象的一些常用属性和方法:

Node对象常用属性:

attributes
如果该节点是一个Element,则以NamedNodeMap形式返回该元素的属性。

childNodes
以Node[]的形式存放当前节点的子节点。如果没有子节点,则返回空数组。

firstChild
以Node的形式返回当前节点的第一个子节点。如果没有子节点,则为null。

lastChild
以Node的形式返回当前节点的最后一个子节点。如果没有子节点,则为null。

nextSibling
以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点,则返回null。

nodeName
节点的名字,Element节点则代表Element的标记名称。

nodeType
代表节点的类型。

parentNode
以Node的形式返回当前节点的父节点。如果没有父节点,则为null。

previousSibling
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点,则返回null。

Node对象常用方法:
appendChild()
通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点。

cloneNode()
复制当前节点,或者复制当前节点以及它的所有子孙节点。

hasChildNodes()
如果当前节点拥有子节点,则将返回true。

insertBefore()
给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。

removeChild()
从文档树中删除并返回指定的子节点。

replaceChild()
从文档树中删除并返回指定的子节点,用另一个节点替换它。
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值