JavaScript学习（二十五）——文档对象模型（DOM对象）在文档对象模型中，每一个对象都可以称为一个节点(node

DOM是Document Object Model (文档对象模型)的缩写，是由w3c (World Wide Web)委员会)定义的。下面分别介绍各单词的含义。
Document (文档):
创建一个网页并将该网页添加到Web中，DOM就会根据这个网页创建一个文档对象。如果没有document (文档)，DOM也就无从谈起。
Object (对象):
对象是一种独立的数据集合。如文档对象，即是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象调用的函数被称为这个对象的方法。
Model (模型)：
模型代表将文档对象表示为树状模型。在这个树状模型中，网页中的各个元素与内容表现为一个个相互连接的节点。
DOM是访问和操作Web页面的接口，使用该接口可以访问页面中的其他标准组件。DOM解决了JavaScript和JScript之间的冲突，给开发者定义了一个标准的方法，使他们来访问站点中的数据、脚本和表现层对象。

DOM分层

文档对象模型采用的分层结构为树状结构，以树节点的方式表示文档中的各种内容。

在文档对象模型中，每一个对象都可以称为一个节点(node) ，下面将介绍几种节点的概念。

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

2.父节点:
一个节点之上的节点是该节点的父节点(parent)。例如，<html>就是<head>和<body>的父节点，<head>就是<title>的父节点。
3.子节点：
位于一个节点之下的节点就是该节点的子节点。例如，<head>和<body> 就是<html>的子节点，<title>就是<head>的子节点。
4.兄弟节点：
如果多个节点在同一个层次，并拥有相同的父节点，这几个节点就是兄弟节点(sibling) 。例如，<head>和<body>是兄弟节点。
5.后代：
一个节点的子节点的]结合可以称为是该节点的后代(descendant)。例如，<head>和<body>就是<html>的后代。
6.叶子节点：
在树形结构最底部的节点称为叶子节点。例如，“标题内容” “3 号标题”“ 加粗内容”都是叶子节点。

在了解节点后，下面将介绍文档模型中节点的3种类型。

元素节点:在HTML中，<body>、 <p>、<a>等一系列标记是这个文档的元素节点。元素节点组成了文档模型的语义逻辑结构。
文本节点: 包含在元素节点中的内容部分，如<p>标记中的文本等。一般情况下，不为空的文本节点都是可见并呈现于浏览器中的。
属性节点:元素节点的属性，如<a>标记的href属性与title 属性等。一般情况下，大部分属性节点都是隐藏在浏览器背后，并且是不可见的。属性节点总是被包含于元素节点当中。

DOM级别

W3C在1998年10月标准化了DOM第一级，不仅定义了基本的接口，还包含了所有HTML接口。在2000年11月标准化了DOM第二级，在第二级中不但对核心的接口升级，还定义了使用文档事件和CSS样式表的标准的API。Netscape 的Navigator 6.0浏览器和Microsoft的Internet Explorer 5.0浏览器，都支持了W3C的DOM第一级的标准。目前，Netscape、 Firefox (FF火狐浏览器)等浏览器已经支持DOM第二级的标准，但Internet Explorer (IE) 还不完全支持DOM第二级的标准。

DOM对象节点属性

在DOM中通过使用节点属性可以查询出各节点的名称、类型、节点值、子节点和兄弟节点等。DOM常用的节点属性如表所示。

属性	说明
nodeName	节点名称
nodeValue	节点的值，通常只应用于文本节点
nodeType	节点的类型
parentNode	返回当前节点的父节点
childNodes	子节点列表
firstChild	返回当前节点的第一个字节点
lastChild	返回当前节点的最后一个字节点
previousSibling	返回当前节点的前一个兄弟节点
nextSibling	返回当前节点的后一个兄弟节点
attributes	元素的属性列表

访问指定节点

使用getElementById(）方法来访问指定id的节点，并用nodeName属性、nodeType属性和nodeValue属性来分别显示出该节点的名称、节点类型和节点的值。

(1) nodeName属性

nodeName属性用来获取某一个节点的名称。

语法:
[sName=]obj.nodeName

参数说明：sName：字符串变量，用来存储节点的名称

（2）nodeType属性

nodeType属性用来获取某个节点的类型。

语法:[sType=]obj.nodeType

参数说明:
sType:字符串变量，用来存储节点的类型，该类型值为数值型。该参数的类型如下表

类型	数值	节点名	说明
元素（element）	1	标记	任何HTML或XML的标记
属性（attribute）	2	属性	标记中的属性
文本（text）	3	#text	包含标记中的文本
注释（comment）	8	#comment	HTML的注释
文档（document）	9	#document	文档对象
文档类型（documentType）	10	DOCTYPE	DTD规范

(3)nodeValue属性

nodeValue属性将返回节点的值

语法：

[txt=]obj.nodeValue

例子：访问指定节点

在页面弹出的提示框中，显示了指定节点的名称、节点类型和节点的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body id="b1">
		<h3>三号标题</h3>
		<b>加粗内容</b>
		<script>
			var by=document.getElementById("b1"); //访问id为“b1”的节点
			var str;
			str="节点名称："+by.nodeName+"\n";  //获取节点名称
			str+="节点类型："+by.nodeType+"\n"; //获取节点类型
			str+=""+by.nodeValue+"\n";     //获取节点值
			alert(str);   //弹出显示对话框
		</script>	
	</body>
</html>

节点

创建节点

1.创建新节点

创建新的节点先通过使用文档对象中的createElement(）方法和createTextNode()方法，生成一个新元素，并生成文本节点，再通过使用appendChild()方法将创建的新节点添加到当前节点的末尾处。
appendChild()方法将新的子节点添加到当前节点的末尾。

语法:

obj.appendChild(newChild)
参数说明:newChild:表示新的子节点

例子：创建新的节点

本实例在页面回载后自动显示“创建新节点”文本内容，并通过使用<b>标记将该文本加粗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="createchild()">
		<script>
			function createchild(){
				var b=document.createElement("b");  //创建新生成的节点元素
				var txt=document.createTextNode("创建新节点！"); //创建节点文本
				//将新的节点b添加到页面上
				b.appendChild(txt);
				document.body.appendChild(b);
			}
		</script>
	</body>
</html>

2.创建多个节点

创建多个节点时，先通过使用循环语句，利用createElement()方法和 createTextNode()元素，并生成文本节点，再通过使用appendChild()方法将创建的新节点添加到页面上。
例子：创建多个节点(1)。
本实例在页面加载后，自动创建多个<p>节点，并且每个节点中显示不同的文本内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="c()">
		<script>
			function c(){
				var text=["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"];
				for(var i=0;i<text.length;i++){  //遍历节点
					var ce=document.createElement("p");  //创建节点元素
					var ctxt=document.createTextNode(text[i]); //创建节点文本
					ce.appendChild(ctxt);
					document.body.appendChild(ce);
				}			
			}
		</script>
	</body>
</html>

使用循环语句，通过使用appendChild()方法，将节点添加到页面中。由于appendChild()方法在每一次添加新的节点时都会刷新页面，会使浏览器显得十分缓慢。这里可以通过使用createDocumentFragment()方法来解决这个问题。该方法用来创建文件碎片节点。

插入节点

插入节点通过使用insertBefore()方法来实现。该方法将新的子节点添加到当前节点的末尾。

语法：

obj.insertBefore(new,ref)

参数说明：

new：表示新的子节点

ref:指定一个节点

例子：插入节点

在页面的文本框中输入需要插入的文本，如df，然后通过单击“插入”按钮将文本插入到页面中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function cnode(str){  //创建节点
				var newp=document.createElement("p");
				var newtxt=document.createTextNode(str);
				newp.appendChild(newtxt);
				return newp;
			}
			function innode(nodeid,str){  //插入节点
				var node=document.getElementById(nodeid);
				var newnode=cnode(str);
				if(node.parentNode)
				node.parentNode.insertBefore(newnode,node);
			}
		</script>
	</head>
	<body >
		<h2 id="h">在上面插入节点</h2>
		<form id="frm" name="frm">
			输入文本：<input type="text" name="txt" />
			<input type="button" value="插入" onclick="innode('h',document.frm.txt.value);"/>
		</form>
	</body>
</html>

复制节点

使用cloneNode()方法实现复制节点。

语法:

obj. cloneNode(deep)参数说明:

deep:该参数是一个 Boolean值，表示是否为深度复制。深度复制是将当前节点的所有子节点全部复制，当值为true时表示深度复制:当值为false时表示简单复制，简单复制只复制当前节点，不复制其子节点。

删除和替换节点

1.删除节点使用removChild()方法可以实现删除节点。该方法用来删除一个子节点。

语法:
obj removeChild(oldChild)
参数说明:
oldChild:表示需要删除的节点。

2.替换节点

使用replaceChild0方法实现替换节点。该方法用来将旧的节点替换成新的节点。

语法:
obj. replaceChild(new,old)

参数说明:
new: 替换后的新节点。old:需要被替换的旧节点。

例子：替换节点

<head>

<title> </title>

<script language="javascript">

      function repN(str,bj){
          var rep=document.getElementByld('b1');
          if(rep)
          {
              var newNode=document.createElement(bj);  
              newNode.id="b1";
              var newText=document.createTextNode(str) 
              newNode.appendChild(newText);
              rep.parentNode.replaceChild(newNode.rep);  
          }
      }
</script>
</head>
<body>

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

输入标记: <іnрut id="bj" tyре="tехt" ѕіzе="15" />
输入文本: <input id="txt" type=":"text" size="15" /><br/>
<input type="button" value="替换" onclick="repN(txt.value.bj.value)" />

</body>

与DHTML想对应的DOM

通过DOM技术可以获取网页对象。本节将介绍另外一种获取网页对象的方法，那就是通过DHTML对象模型的方法。使用这种方法可以不必了解文档对象模型的具体层次结构，而直接得到网页中所需的对象。通过innerHTML、innerText、 outerHTML 和outerText属性可以很方便地读取和修改HTML元素内容。

说明
innerHTML属性被多数浏览器所支持，而innerText、 outerHTML 和outerText属性只有IE浏览器才支持。

innerHTML 和innerText属性

innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记。设置该属性可以用于为指定的HTML文本替换元素的内容。

例子：通过innerHTML属性修改<div>标记的内容的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body >
		<div id="clock"></div>
		<script type="text/javascript"> 
			document.getElementById("clock").innerHTML="2011-<b>07</b>-22";
		</script>
	</body>
</html>

InnerText属性与innerHTML属性的功能类似，只是该属性只能声明元素包含的文本内容，即使指定的是HTML文本，它也会认为是普通文本，而原样输出。
使用innerHTML属性和innerText属性还可以获取元素的内容。如果元素只包含文本，那么innerHTML和innerText属性的返回值相同。如果元素既包含文本，又包含其他元素，那么这两个属性的返回值不同。

HTML代码	innerHTML属性	InnerText属性
明日科技	"明日科技"	"明日科技"
明日科技	"明日科技"	"明日科技"
	""	""

outerHTML 和outerText属性

outerHTML和outerText属性与innerHTML和innerText属性类似，只是outerHTML和outerText属性替换的是整个目标节点，也就是这两个属性还对元素本身进行修改。
下面以列表的形式给出对于特定代码通过outerHTML和outerText 属性获取的返回值，如表所示。

HTML代码	outerHTML属性	outerText属性
明日科技	明日科技	"明日科技"
2011-07-22	2017-07-22	"2017-07-22"
		""

JavaScript学习（二十五）——文档对象模型（DOM对象）

DOM概述