DOM应用

一、DOM是什么：

1、 DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

2、Document（文档）：创建一个网页并将网页添加到Web中，DOM就会根据这个网页创建一个文档对象。如果没有Document，DOM也就无从谈起。

3、Object（对象）：是一种独立的数据集合。如文档对象，就是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。

4、Mdel（模型）：代表将文档对象表示为树状模型。在这个树状模型中，网页中的各个元素与内容表现为一个相互连接的节点。

DOM是访问和操作Web页面的接口，使用该接口可以访问页面中的其他标准组件。

二、DOM分层：

1、根节点：在最顶层的<html>节点，称为根节点

2、父节点：一个节点之上的节点是该节点的父节点（parent）

3、子节点：一个节点之下的节点是该节点的子节点（child）

4、兄弟节点：如果多个节点在同一个层次，并拥有相同的父节点，这几个节点就是兄弟节点（sibling）

5、后代：一个节点的子节点的结合可以称为是节点的后代（descendant）

6、叶子节点：在树型结构最底部的节点

7、元素节点：在html中，<body>、<p>、<a>等一系列标记，是这个文档的元素节点。元素节点组成了文档模型的语义逻辑结构

8、文本节点：包含在元素节点中的内容部分，如<p>标签中的文本。一般情况下，不为空的文本节点都是可见并呈现与浏览器中的

9、属性节点：元素节点的属性，如<a>标签的href属性。一般情况下，大部分属性节点都是隐藏在浏览器背后，并且不可见的。属性节点总是被包含在元素节点当中

三、DOM的级别：

1、DOM对象节点属性：

（1）访问指定节点：

A、nodeName：获得某个节点的名称

B、nodeType：获得某个节点的类型

1 ------ 元素（element）就是标签

2 ------ 属性（attribute）标签的属性

3 ------ 文本（text）#text 标签中文本

C、nodeValue：返回节点的值

示例1：

var by = document.getElementById("b1");

var str;

str = "节点名称："+by.nodeName+" ";

str += "节点类型："+by.nodeType+" ";

str += "节点值："+by.nodeValue+" ";

alert(str);

</script>

</body>

（2）遍历文档树：

A、parentNode：返回当前节点的父节点

B、firstChile：返回当前节点的第一个子节点

C、lastChild：返回当前节点的最后一个子节点

D、previousSibling：返回当前节点的前一个兄弟节点

E、nextSibling：返回当后节点的后一个兄弟节点

示例2：

（1）页面文件：

<body>

节点名称：

节点类型：

节点的值：

</body>

（2）js文件：

function checkNode(t,node)

{

var name = document.getElementById("na");

var type = document.getElementById("ty");

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

var temp;

switch(node)

{

case "parent":

if(t.parentNode)

{

temp = t.parentNode;

name.value = temp.nodeName;

type.value = temp.nodeType;

va.value = temp.nodeValue;

}else{

alert("无父节点");

}

break;

case "firstChild":

if(t.hasChildNodes())

{

temp = t.firstChild;

name.value = temp.nodeName;

type.value = temp.nodeType;

va.value = temp.nodeValue;

}else{

alert("无子节点");

}

break;

case "lastChild":

if(t.hasChildNodes())

{

temp = t.lastChild;

name.value = temp.nodeName;

type.value = temp.nodeType;

va.value = temp.nodeValue;

}else{

alert("无子节点");

}

break;

case "previousSibling":

if(t.previousSibling)

{

temp = t.previousSibling;

name.value = temp.nodeName;

type.value = temp.nodeType;

va.value = temp.nodeValue;

}else{

alert("无兄弟点");

}

break;

case "nextSibling":

if(t.nextSibling)

{

temp = t.nextSibling;

name.value = temp.nodeName;

type.value = temp.nodeType;

va.value = temp.nodeValue;

}else{

alert("无下一个兄弟点");

}

break;

default:

name.value = t.parentNode.nodeName;

type.value = t.parentNode.nodeType;

va.value = t.parentNode.nodeValue;

}

</script>

2、节点：

（1）创建新节点：

A、使用文档对象中的createElement()和createTextNode()方法，生成一个新元素

createElement()：创建新节点

createTextNode()：创建节点文本

B、再使用appendChild()方法将创建创建的新节点添加到当前节点的末尾处

appendChild(newNode)：将新节点'newNode'添加到页面中

示例1：创建单个新节点

window.onload = function(){

var b = document.createElement("b");//创建节点元素b

var txt = document.createTextNode("创建新节点");//创建节点文本

b.appendChild(txt);//将节点文本添加到节点中

document.body.appendChild(b);//将新节点b添加到页面上

}

</script>

示例2：创建多个新节点

window.onload = function(){

var txt = ['第一个节点','第二个节点','第三个节点','第四个节点','第五个节点','第六个节点'];

for(var i=0;i<txt.length;i++)

{

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

var ct = document.createTextNode(txt[i]);

ce.appendChild(ct);

document.body.appendChild(ce);

}

</script>

（2）插入节点：通过使用insertBefore()方法来实现

语法：

insertBefore（new，ref）

参数说明：

new ：表示新的子节点

ref：指定一个节点，在这个节点前插入新的节点

示例：

function insertNode(nodeid,str)

{

var newNode = document.createElement("p");//创建新节点

var newTxt = document.createTextNode(str);//创建节点文本

newNode.appendChild(newTxt);//将节点文本添加到节点中

var node = document.getElementById(nodeid);//获得要指定的节点

if(node.parentNode)//判断是否拥有父节点

{

node.parentNode.insertBefore(newNode,node);//将新节点插入到指定的节点之前

}

</script>

<body>

<h2 id="h">在上面插入节点</h2>

输入文本：

</form>

</body>

（3）复制节点：使用cloneNode()方法实现

语法：

cloneNode（deep）

参数说明：

deep：是一个boolean值，表示是否为深度复制。深度复制是将当前节点的所有子节点全部复制，当值为

true时表示深度复制；当值为false时表示简单复制，只复制当前节点，不复制其子节点。

示例：

function copyNode(bool)

{

var s1 = document.getElementById("sex");//获得节点

var newSex = s1.cloneNode(bool);//复制节点

var b = document.createElement("br");//创建换行节点

var di = document.getElementById("d1");//获得div

di.appendChild(newSex);//将新节点复制到当前节点的末尾

di.appendChild(b);//添加换行

}

</script>

<body>

<hr />

</select>

<hr />

</body>

（4）删除节点：使用removeChild()方法实现

语法：

removeChild（node）

参数说明：

node：要删除的节点

示例：

function delNode()

{

var di = document.getElementById("d1");

if(di.hasChildNodes())//判断是否有子节点

{

di.removeChild(di.lastChild);

}

</script>

<body>

<p>第一行文本</p>

<p>第二行文本</p>

<p>第三行文本</p>

</div>

</body>

（5）替换节点：使用replaceChild()方法实现

语法：

replaceChild（new，old）

参数说明：

new：替换后的新节点

old：需要被替换的旧节点

示例：

function replaceNode(txt,bj)

{

var rep = document.getElementById("b1");

if(rep)

{

var newNode = document.createElement(bj);//创建新节点

newNode.setAttribute("id","b1");//设置新节点的id属性

var newTxt = document.createTextNode(txt);//创建节点文本

newNode.appendChild(newTxt);//将文本添加到节点中

rep.parentNode.replaceChild(newNode,rep);//替换节点

}

</script>

<body>

<h2 id="b1">可以替换文本内容</h2>

输入标记：

输入文本：

</body>