DOM模型

DOM（文档对象模型）是HTML与XML的应用程序接口（API），DOM模型将整个文档规划成节点层次结构。[@more@]

1、节点的层次
DOM树(文档)的结构也就是节点（Node）的层次，DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

1.Document ，最顶层的节点，所有的其他节点都是附属于它的

2.DocumentType ，DTD引用的对象表现形式

3.DocumentFragment　，可以像Document一样来保存其他节点

4.Element ，标签节点

5.Attr ，代表一对特性名和特性值，这种节点类型不能包括子节点

6.Text，代表开始标签与结束标签之间的普通文本，不能包括子节点

7.CDataSection，的对象表现形式

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、访问相关的节点

dom example

Hello DOM!

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)移除属性值

Hello Attribute!

//获取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

pf(oAll[i].tagName);

}

2、getElementsByName()

获取所有name特性等于指定值的元素。

3、getElementById() 返回id特性等于指定值的元素。

注意：在IE6.0中如果给定的ID匹配某个元素的name特性，它也返回这个元素，这是个bug

7、创建和操作节点
DOM中有一些方法用于创建不同类型的节点，常用的有

createAttribute(name) , 创建特性节点

createElement(tagname) ，创建元素节点

createTextNode(text)，创建文本节点

view plaincopy to clipboardprint?
window.onload = function(){

//创建p元素节点

var oP = document.createElement("p");

//创建文本节点

var oText = document.createTextNode("Create Element");

//将文本节点添加到元素节点中

oP.appendChild(oText);

//最后将创建的元素节点添加到文档中或某个元素中

document.body.appendChild(oP);

}
window.onload = function(){

//创建p元素节点

var oP = document.createElement("p");

//创建文本节点

var oText = document.createTextNode("Create Element");

//将文本节点添加到元素节点中

oP.appendChild(oText);

//最后将创建的元素节点添加到文档中或某个元素中

document.body.appendChild(oP);

}

注意：所有的DOM操作必须在页面完全载入后才能进行，因为页面在没有完全下载到客户端之前，无法构建DOM树，所以通常借助于onload事件句柄来执行所有的DOM插入代码。

DOM API可以轻松添加、修改加或替换节点。

removeChild()

replaceChild()

insertBefore()

view plaincopy to clipboardprint?
window.onload = function(){

//创建p元素节点

var oP = document.createElement("p");

//创建文本节点

var oText = document.createTextNode("Create Element");

//将文本节点添加到元素节点中

oP.appendChild(oText);

//最后将创建的元素节点添加到文档中或某个元素中

document.body.appendChild(oP);



//在oText节点之前插入一个节点

var oBeforeText = document.createTextNode("insert before code!");

oP.insertBefore(oBeforeText,oText);



//替换节点

var oReText = document.createTextNode("Recode");

oBeforeText.parentNode.replaceChild(oReText,oBeforeText);



//删除节点

oReText.parentNode.removeChild(oReText);

}
window.onload = function(){

//创建p元素节点

var oP = document.createElement("p");

//创建文本节点

var oText = document.createTextNode("Create Element");

//将文本节点添加到元素节点中

oP.appendChild(oText);

//最后将创建的元素节点添加到文档中或某个元素中

document.body.appendChild(oP);

//在oText节点之前插入一个节点

var oBeforeText = document.createTextNode("insert before code!");

oP.insertBefore(oBeforeText,oText);

//替换节点

var oReText = document.createTextNode("Recode");

oBeforeText.parentNode.replaceChild(oReText,oBeforeText);

//删除节点

oReText.parentNode.removeChild(oReText);

}

注意：修改或替换节点使用parentNode特性保证正确使用父节点来操作。

8、特性与属性
HTML DOM元素中包含的所有特性都是可作为属性使用。可以使用同样名称的属性来获取和设置这些值，唯一的特性名和属性名不一样的特例是class特性，它是用来指定应用某个元素的一个CSS类

特性与属性

window.onload = function(){

var oP = document.body.firstChild;

oP.id = "newid";

oP.innerText = "hello ";

oP.className = "myp";

}

IE在特性上有很大的问题，如果使用它最好尽可能使用属性。

BOM浏览器对象模型，可以对整个浏览器窗口进入访问和操作，使用BOM，开发者可以移动窗口、改变状态

栏中的文本以及执行其它与页面内容无关的操作。

view plaincopy to clipboardprint?

function loadDocument(){

//1、先取得动态添加元素的位置，父元素

var myDiv=document.getElementById("myDiv");

//2、创建新的元素

//创建select节点元素

var selectNode = document.createElement("select");

//创建option节点元素

var optionNode1 = document.createElement("option");

//创建文本节点元素

var textNode1 = document.createTextNode("苏州");

//创建option节点元素

var optionNode2 = document.createElement("option");

//创建文本节点元素

var textNode2 = document.createTextNode("安徽");

optionNode1.setAttribute("value","sz"); //设置节点属性

optionNode2.setAttribute("value","ah"); //设置节点属性

//3、将子节点添加到父节点元素中

//将selectNode节点添加到div节点子节点中

myDiv.appendChild(selectNode);

//将optionNode节点添加到selectNode子节点中

selectNode.appendChild(optionNode1);

//将textNode节点添加到optionNode子节点中

optionNode1.appendChild(textNode1);

selectNode.appendChild(optionNode2);

optionNode2.appendChild(textNode2);

//4、添加节点事件

selectNode.οnchange=function selectItem(){

var selectIndex=selectNode.selectedIndex;//选项中项的索引

var allItems=selectNode.options;//select中所有option集合

alert("你选中的是 : "+allItems[selectIndex].innerHTML); //innerHTML或innerText取出元素的文本内容

}

}
// --&gt

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ppjava2009/archive/2010/02/24/5323177.aspx

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/23493047/viewspace-1033141/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/23493047/viewspace-1033141/