DOM(文档对象模型)是HTML与XML的应用程序接口(API),DOM模型将整个文档规划成节点层次结构。
1、节点的层次
DOM树(文档)的结构也就是节点(Node)的层次,DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
1.Document ,最顶层的节点,所有的其他节点都是附属于它的
2.DocumentType ,DTD引用的对象表现形式
3.DocumentFragment ,可以像Document一样来保存其他节点
4.Element ,标签节点
5.Attr ,代表一对特性名和特性值,这种节点类型不能包括子节点
6.Text,代表开始标签与结束标签之间的普通文本,不能包括子节点
7.CDataSection,<![CDATA[]]>的对象表现形式
8.Entity ,表示在DTD中的一个实体定义
9.EntityReference ,代表一个实体引用
10.ProcessingInstruction ,代表一个PI
11.Comment,代表注释
12.Notation ,代表在DTD中定义的记号
2、Node接口
Node接口定义了对应不同节点类型的个常量,就是nodeType特性值。
ELEMENT_NODE : 1
ATTRIBUTE_NODE : 2
TEXT_NODE : 3
CDATA_SECTION_NODE : 4
ENTITY_REFERENCE_NODE : 5
ENTITY_NODE : 6
PROCESSING_INSTRUCTION_NODE : 7
COMMENT_NODE : 8
DOCUMENT_NODE : 9
DOCUMENT_TYPE_NODE : 10
DOCUMENT_FRAGMENT_NODE : 11
NOTATION_NODE : 12
Node接口也定义一些所有节点类型都包含的特性和方法
nodeName : String 节点的名字
nodeValue : String 节点的值
ownerDocument : Document 指向这个节点所属的文档
firstChild : Node 指向在childNodes列表中的第一个节点
lastChild : Node 指向在childNodes列表中的最后一个节点
childNodes : NodeList ,所有子节点的列表
previousSibling:Node ,指向前一个兄弟节点,如果没有返回null
nextSibling:Node 指向后一个兄弟节点
hasChildNodes() : Boolean ,是否包括节点
attributes : NamedNodeMap 代表一个元素的特性的Attr对象,仅用于Element节点
appendChild(node) : Node 将node添加到childNodes末尾
removeChild(node): Node 从childNodes中删除node
replaceChild(newnode,oldnode) : Node 替换节点
insertBefore(newnode,refnode) : Node 在childNodes中的refnode之前插入newnode
除了节点外,DOM还定义了一些助手对象,它们可以和节点一起使用,但不是DOM文档必有的部分。
NodeList ,节点数组,按照数值进行索引;用来表示一个元素的子节点。
NamedNodeMap ,同时用数值和名字进行索引的节点表,用于表示元素特性。
3、访问相关的节点
<html>
<head>
<title>dom example</title>
</head>
<body>
<p>Hello DOM!</p>
</body>
</html>
1、访问html元素
var oHtml = document.documentElement;
2、访问head和body元素
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
3、用特性来访问
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
也可以这样访问
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
4、访问body元素
var oBody = document.body;
5、节点关系
alert(oHead.parentNode == oHtml); //true
alert(oBody.parentNode == oHtml); //true
alert(oBody.previousSibling == oHead); //true
alert(oHead.nextSibling == oBody) //true
alert(oHead.ownerDocument == document); //true
4、检测节点类型
DOM模型中定义的节点一共有种类型,包括元素节点(,ELEMENT_NODE)、属性节点(,ATTRIBUTE_NODE)、
文本节点(,TEXT_NODE)和文档根节点(,DOCUMENT_NODE);可以通过使用nodeType特性检验节点类型
document.nodeType //返回
document.documentElement.nodeType //返回
可以用Node常量来匹配这些值,如document.nodeType ==
Node.DOCUMENT_NODE //9
但在IE中不支持这些常量,所以我们这样定义Node常量
if(typeof Node == 'undefined'){
var Node = {
ELEMENT_NODE : 1,
ATTRIBUTE_NODE : 2,
TEXT_NODE : 3 ,
CDATA_SECTION_NODE : 4 ,
ENTITY_REFERENCE_NODE : 5 ,
ENTITY_NODE : 6 ,
PROCESSING_INSTRUCTION_NODE : 7 ,
COMMENT_NODE : 8 ,
DOCUMENT_NODE : 9 ,
DOCUMENT_TYPE_NODE : 10 ,
DOCUMENT_FRAGMENT_NODE : 11 ,
NOTATION_NODE : 12
}
}
5、处理特性
DOM定义了三个元素方法来访问特性
getAttribute(name) ,等同于
attributes.getNamedItem(name).value;获取属性值
setAttribute(name,newvalue),等同于
attributes.getNamedItem(name).value = newvalue设置属性值
removeAttribute(name) ,等同于
attributes.removeNamedItem(name)移除属性值
<p style="color:red;text-align:center;" id="myid" >Hello Attribute!</p>
//获取p元素
var oP = document.body.firstChild;
//获取属性
pf(oP.getAttribute("style"));
pf(oP.getAttribute("id"));
//设置属性
oP.setAttribute("id","newId");
pf(oP.getAttribute("id"));
//移除属性
oP.removeAttribute("style");
6、访问指定节点
1、getElementsByTagName(tagName) : NodeList
oImages = document.getElementsByTagName("img");
alert(oImages[0].tagName); //img
如果tagName为*,返回所有元素,IE中用document.all返回所有元素
var oAll = document.getElementsByTagName("*");
var oAll = document.all;
var oAll = document.all; //IE中获取所有元素
var l = oAll.length ; //元素个数
for(var i=0 ;i<l;i++){
pf(oAll[i].tagName);
}
2、getElementsByName()
获取所有name特性等于指定值的元素。
3、getElementById() 返回id特性等于指定值的元素。
注意:在IE6.0中如果给定的ID匹配某个元素的name特性,它也返回这个元素,这是个bug
7、创建和操作节点
DOM中有一些方法用于创建不同类型的节点,常用的有
createAttribute(name) , 创建特性节点
createElement(tagname) ,创建元素节点
createTextNode(text),创建文本节点
注意:所有的DOM操作必须在页面完全载入后才能进行,因为页面在没有完全下载到客户端之前,无法构建DOM树,所以通常借助于onload事件句柄来执行所有的DOM插入代码。
DOM API可以轻松添加、修改加或替换节点。
removeChild()
replaceChild()
insertBefore()
注意:修改或替换节点使用parentNode特性保证正确使用父节点来操作。
8、特性与属性
HTML DOM元素中包含的所有特性都是可作为属性使用。可以使用同样名称的属性来获取和设置这些值,唯一的特性名和属性名不一样的特例是class特性,它是用来指定应用某个元素的一个CSS类
<p style="color:red" name="myn" id="myid">特性与属性</p>
window.onload = function(){
var oP = document.body.firstChild;
oP.id = "newid";
oP.innerText = "hello ";
oP.className = "myp";
}
IE在特性上有很大的问题,如果使用它最好尽可能使用属性。
BOM浏览器对象模型,可以对整个浏览器窗口进入访问和操作,使用BOM,开发者可以移动窗口、改变状态
栏中的文本以及执行其它与页面内容无关的操作。