好程序员分享JavaScript之-文档对象模型(DOM)

好程序员分享JavaScript之 -文档对象模型(DOM)：DOM -----Document Object Model

文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台， 提供了标准的 HTML 和 XML 对象集， 并有一个标准的接口来访问并操

作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件，如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前，创建前端 Web 应用程序都必须使用

Java Applet 或 ActiveX 等复杂的组件， 现在基于 DOM 规范， 在支持 DOM 的浏览器环境中，Web开发人员可以很快捷、 安全地创建多样化、 功能强大的Web应用程序。 这里只讨论

HTML DOM。

一、DOM概述

1、文档对象模型定义了 JavaScript 可以进行操作的浏览器，描述了文档对象的逻辑结构及各功能部件的标准接口。主要包括如下方面：

1）核心 JavaScript 语言参考（数据类型、运算符、基本语句、函数等）

2）与数据类型相关的核心对象（String、Array、Math、Date 等数据类型）

3）浏览器对象（window、location、history、navigator 等）

4）文档对象（document、images、form 等）

2、JavaScript 中两种主要的对象模型

1）浏览器对象模型 （BOM）

提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法。（见前一篇）

2）文档对象模型 （DOM）

提供了访问浏览器窗口内容，如文档、图片等各种 HTML 元素以及这些元素包含的文本的操作方法。

在早期的浏览器版本中，浏览器对象模型和文档对象模型之间没有很大的区别。

二、主要作用

主要用来将标记型文档封装成对象，并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象。

文档：标记型文档----标签、文本、属性等

对象： 封装了属性和方法，可以调用里面的属性和方法。

模型：所有标记型文档都具备一些共性特征的体现。

三、一些重要的概念（主要DOM树）

1、DOM树模型：

DOM解析将按照标签的层次体现出标签的所属，形成一个树状结构---DOM树。

标签、属性和文本内容称为节点(node)，节点也称为对象，标签通常也称为页面中的元素(element)

1）DOM技术的核心内容：

把标记文档变成对象树，通过对树中的对象进行操作，实现对文档内容的操纵。

2）DOM解析的方式：

将标记文档解析成一棵DOM对象树，并将树中的内容都封装成对象。----这些动作由浏览器帮我们完成

3）DOM解析的好处：

可以对树中的节点进行任意的操作：增删改查

4）DOM解析的弊端：

这种解析需要将整个标记型文档加载进内存，因此，如果标记型文档很，耗内存。

2、DHTML：动态的HTML，它不是一门语言，是多项技术综合体的简称。

以HTML+CSS的方式做的是静态网页，要想变成动态的，必须在此基础上加入JS和DOM技术。因此，DHTML包含：HTML+CSS+JS+DOM

3、HTML:提供标签，封装数据

4、CSS：提供样式属性，对数据的显示样式进行定义

5、DOM: 把标记型文档封装成对象，供JS操纵

6、JS: 提供程序设计语言，通过DOM来操纵文档内容和显示样式

四、 DOM中获取节点的方法

节点都具备三个必备属性：节点名称、节点类型、节点值。

节点的类型： 标签节点的类型值为1，属性节点的类型值为2，文本节点的类型值为3

节点值：标签型节点是null,没有值的。只有属性和文本节点才可以有值。

1、getElementById() :通过节点的id获取该节点对象

function getNodeDemo1(){

//获取id为divid1的节点

//var divNode= document.getElementById("divid1");

var divNode= document.getElementById("divid2");

//alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);

//获取div节点中的文本 innerHTML innerText 属性

var txtHTML = divNode.innerHTML;

var txt = divNode.innerText;

alert(txtHTML+","+txt);

//更改div节点中的文本内容

//divNode.innerHTML="我把它改成**城市学院了....";

divNode.innerHTML="我把它改成**城市学院了....".fontcolor("red");

}

2、getElementsByName() :通过节点的name属性获取节点集合----注意，是集合

function getNodeDemo2(){

var node = document.getElementsByName("userName");

//alert(node.nodeName);//undefined

//alert(node);//因为是数组，所以是集合

//alert(node[0].nodeName);//INPUT

//alert(node.length);//1

//alert(node[0].nodeType);//1

alert(node[0].nodeValue);//标签型节点的value都是null

//alert(node[0].getAttribute("value"));

}

3、getElementsByTagName() :通过节点的标签名字获取节点集合

1）获取document下的所有

function getNodeDemo3(){

var nodes = document.getElementsByTagName("a");

//alert(nodes.length);//5

//alert(nodes[0].innerHTML);//获取<a>标签容器封装的内容：城市首页

//给页面当中的所有<a>标签添加 target属性 //给对象添加属性并赋值时，若属性不存在则是添加，若存在则是修改

for(var x=0; x<nodes.length; x++){

//alert(nodes[x].innerHTML);

nodes[x].target = "_blank";

}

}

2）获取<div>标签下的所有<a>节点

function getNodeDemo4(){

var divNode = document.getElementById("mylink");

var nodes = divNode.getElementsByTagName("a");//只获取divNode元素下面的所有子节点

for(var x=0; x<nodes.length; x++){

nodes[x].target = "_blank";

}

}

五、利用节点的层次关系(level)获取节点的方法

父节点：parentNode属性

子节点：childNodes集合, firstChild() , lastChild()

上一个兄弟节点：previousSibling属性

下一个兄弟节点：nextSibling属性

1、获取父节点

var tabNode = document.getElementById("tableid1");

var node = tabNode.parentNode;

2、获取子节点

var nodes = tabNode.childNodes;

注意：1）如果<table>后面有回车符，高版本的IE和火狐会识别成 “空白文本”#text，而低版本IE会直接越过-----不光是<table>节点，其它节点也一样

2）表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体

3、获取兄弟节点

var node = tabNode.previousSibling.previousSibling;//上一个兄弟

alert(node.nodeName);//div

var node = tabNode.nextSibling.nextSibling;//上一个兄弟

alert(node.nodeName);//dl

六、DOM中的一些操作

1、创建文本对象

function createAndAdd1(){

//1利用createTextNode()创建一个文本对象

var oTextNode = document.createTextNode("新的文本，很好！");

//2获取div对象

var divNode = document.getElementById("div1");

//3把oTextNode添加成div对象的孩子

divNode.appendChild(oTextNode);

}

2、创建标签对象

function createAndAdd2(){

//1利用createElement()创建一个标签对象

var oBtnNode = document.createElement("input");

oBtnNode.type="button";

oBtnNode.value="新建的按钮";

//2获取div对象

var divNode = document.getElementById("div1");

//3把oTextNode添加成div对象的孩子

divNode.appendChild(oBtnNode);

}

3、直接利用容器标签中的一个属性：innerHTML-----本质上改该标签容器中的“html代码”，不是我们认为的对象树的操作

function createAndAdd3(){

var divNode = document.getElementById("div1");

//divNode.innerHTML="<input type='button' value='一个新按钮'/> ";

divNode.innerHTML="<a href='http://********'>一个超链接</a> ";

}

4、删除节点 利用标签容器对象中的removeChild()和removeNode(),前者删子节点，后者删自己----不建议使用

function deleteNode(){

var oDivNode = document.getElementById("div2");

//自杀式----不建议

//oDivNode.removeNode();//默认false,不删除子节点集合

//oDivNode.removeNode(true);//true,删除子节点集合

//通过父节点去删除它的孩子

oDivNode.parentNode.removeChild(oDivNode);

}

5、替换节点(移除替换) 利用标签容器对象中的replaceChild()和replaceNode(),前者替换子节点，后者替换自己----不建议使用

function updateNode(){

var oDivNode = document.getElementById("div2");

var oDivNode4 = document.getElementById("div4");

//自杀式----不建议

//oDivNode.replaceNode(oDivNode4);

//通过父节点去替换它的孩子：用oDivNode4去替换oDivNode

oDivNode.parentNode.replaceChild(oDivNode4,oDivNode);

}

6、替换节点(克隆替换)

function updateNode2(){

var oDivNode = document.getElementById("div2");

var oDivNode4 = document.getElementById("div4");

var oDivNode4_2 = oDivNode4.cloneNode(true);//克隆一个对象,默认参数为false。参数为true时，连子节点一起克隆

//通过父节点去替换它的孩子：用oDivNode4_2去替换oDivNode

oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode);

}