文档对象模型(DOM)
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型:文档型节点、元素节点、特性节点、注释节点等共有12种节点类型。DOM1级定义了一个Node接口,该接口由所有节点类型实现。可通过nodeType属性显示节点的类型。推荐将nodeType与数字值比较得知节点类型(如果是使用数值常量例如Node.ELEMENT_NODE(1)比较,在IE中无效)。
一、Node类型
1、每个节点都有三个属性(通用):
nodeName(对应节点元素标签名,在element类型中等同于属性tagName)、
nodeType(对应节点类型对应的数字)、
nodeValue(对应节点的值)。
2、节点关系(家族关系)(用于遍历节点)。对应有一下几个属性:
childNodes 返回子节点的Nodelist
(Nodelist 似数组但不是数组,有length属性,是有生命、有呼吸的对象,能随节点的变动而实时变动,而非第一次访问的某个瞬间拍摄下的快照。Nodelist可通过方框号下标访问,也可以使用item()访问)
parent 返回节点的父节点
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
previousSibling 返回前一个同胞兄弟节点
nextSibling 返回下一个同胞兄弟节点
3、节点操作(都是对其子节点的操作,也即是对其Nodelist的操作)
appendChild() 用于childNodes列表的末尾追加一个节点
insertBefore() (两个参数:第一个参数为新节点,第二个参数为参照节点)在参照节点前插入新节点
replaceChild() (两个参数:第一个参数为新节点,第二个参数为替换节点)用新节点替换要替换的节点
removeChild() 移除节点
4、cloneNode() 用于创建调用这个方法的节点的一个完全相同的副本。若参数为true,则进行深度克隆,但一般浏览器不会克隆其节点中的javascript或事件处理,只复制特性和子节点。(但IE有个bug,会复制事件处理程序)
5、normalize() 用于处理文档树中的文本节点。如果在调用该方法的后代子节点中发现空文本节点,就删除它;如果找到相邻的文本节点,则将它们合并为一个文本节点。
二、获取节点
1、document.getElementById("ID name") 通过Id获取节点
2、document.getElementsByTagName("tag name") 通过标签名称获取节点
3、document.getElementsByName("name") 通过属性name的值获取节点
三、特性节点的操作
设 element为元素节点
(1)element.getAttribute("特性名称") 获取特性节点
(2)element.setAttribute("名称",“值”) 设置特性节点
(3)element.removeAttribute("特性名称") 移除特性节点
以下方法不常用
(4)element.getAttributeNode("名称") 获取特性节点
(5)element.setAttributeNode(node) 设置特性节点
(6)element.createAttribute("名称") 创建特性节点
四。创建节点
(1)document.createElement(“标签名”) 创建Element节点
(2)document.createAttribute("属性名称") 创建Atrr节点
(3)document.createTextNode("字符串") 创建Text节点
(4)document.createComment("字符串") 创建Comment节点
(5)document.createDocumentFragment() 创建DocumentFragment类型
五、不同类型的节点
1、document类型(document作为HTMLDocument的一个实例)
(1)document.documentElement 获取<html>的引用
(2)document.body 获取<body>的引用
(3)document.doctype 获取<!DOCTYPE>的引用 有些浏览器不把它当做文档的子节点,但其也是一节点,但不会出现在document.childNodes中。
(4)document.title 获取文档标题
三个与网页请求有关的属性URL、domain、referrer,这些信息都存储在HTTP的头部:
(5)document.URL 获取页面的完整URL
(6)document.domain 获取页面的域名(由于不同的子域的页面无法通过javascript通讯,而将每个页面的document.domain设置为相同的值,则不同的页面中javascript可以访问对方的javascript对象。但如果domain属性一开始设置为“松散”例如"wrox.com",就不能设置为“紧绷”例如“p2p.wrox.com”)
(7)document.referrer 获取链接到当前页面的URL
一些document类型的特殊集合
(1)、document.anchors 包含文档中的所有带有name特性的<a>元素
(2)、document.applets 包含文档中所有<applet>元素
(3)、document.forms 包含文档中所有的<form>元素
(4)、document.images 包含文档中所有的<img>元素
(5)、document.links 包含文档中所有带有href特性的<a>元素
2、Element类型(所有HTML元素都由HTMLElement类型表示)
元素标签element的属性有:
(1)、element.id 元素在文档中唯一的标识
(2)、element.title 有关元素的附加说明信息
(3)、element.lang 元素内容的语言代码
(4)、element.dir 语言方向 值有“ltr”和“rtl”
(5)、element.className 与元素的class属性对应
(6)element.attributes 返回特性列表也即对应的NamedNodeMap 与Nodelist类似,可以通过下标访问,也可以通过以下方法操作:
*element.attributes.getNameItem(name) 获取特性为name的属性
*element.attributes.removeNamedItem(name) 移除特性为name的节点
*element.attributes.setNamedItem(node) 向列表添加节点
*element.attributes.item(pos) 获取数字pos位置处的节点
3、Attr类型
三个属性:name、value、specified
每个特性节点都有一个specified属性,当为true时 ,代表是指定的属性,当为false时,代表未经设定的属性,也即是默认属性
4、Text类型
可以通过nodeValue属性或data属性访问Text节点中包含的文本。
一些操作文本节点的操作
appendData(text) 将text添加到节点的末尾
deleteData(offset, count) 从offset指定的位置开始删除count个字符
insertData(offset, text) 在offset指定的位置插入text
replaceData(offset, count, text) 用text替换从offset指定位置开始到offset+count为止处的文本
splitText(offset) 从offset指定的位置将当前文本节点分成两个文本节点。
substringData(offset,count) 提取从offset指定位置开始到offset+count为止的字符串
5、Comment类型
Comment类型与Text类型继承来自相同的基类,因此它除了splitText()之外的所有字符串操作方法。与Text类型相似,也可以通过nodeValue或data属性来取得注释的内容。注释节点也可以通过其父节点来访问。
eg:
<div id="myid">
<!--这是注释-->
</div>
var div = document.getElementById("myid"),
comment = div.firstChild;
alert(comment.data); //这是注释
6、CDATASection类型
CDATASection 类型只针对基于XML的文档,表示的是CDATA区域,与Comment类似,CDATASection类型继承自Text类型,因此拥有除了splitText()之外的所有字符串操作方法。
ps: CDATA区域只会出现在XML文档中,因此多数浏览器都会把CDATA区域错误地解析为Comment或Element。
7、DocumentFragment类型
在所有节点类型中,只有DocumentFragment在文档中没有对应的标记,dom规定文档片段是一种“轻量级”的文档,可以包含和控制节点,不会像完整的文档那样占用额外的资源。它继承了Node的所有方法。
子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference
ps:虽然不能将文档片段直接添加到文档中,但可以将它作为一个“仓库”使用,用来存储其他节点。
六、文档写入方法:
1、document.write() 原样写入文本
2、document.writeln() 写入文本后,末尾添加一个换行符
3、document.open() 打开网页的输入流
4、document.close() 关闭网页的输入流
(ps:参考javascript高级程序设计第三版,若有错漏,万望各位帮忙纠错,共同分享学习经验才有进步的。)