dom总结(2012.11.30)
DOM
DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法，并将对应的文档呈现为带有元素、属性和文本的树结构（节点树）
1）DOM树定义了HTML/XML文档的逻辑结构，给出了一种应用程序访问和处理XML文档的方法。
2）在DOM树中，有一个根节点，所有其他的节点都是根节点的后代。
3) 在应用过程中，基于DOM的HTML/XML分析器将一个HTML/XML文档转换成一棵DOM树，应用程序通过对DOM树的操作，来实现对HTML/XML文档数据的操作。
DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言.
• D：文档– html 文档或 xml 文档
• O：对象– document 对象的属性和方法
• M：模型
• DOM 是针对xml(html)的基于树的API。
• DOM树:节点（node）的层次。
• DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
• DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
DOM的结构
<html>:
<head>
<title>HTML DOM</title>
</head>
<body>
<h1>DOM的结构</h1>
<p><a href=”href”>链接</a></p>
</body>
</html>
html是根节点，head，body是html的子节点，title是head的子节点，body是h1，p的父节点
节点
l 根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：
• 整个文档是一个文档节点
• 每个 HTML 标签是一个元素节点
• 包含在 HTML 元素中的文本是文本节点
• 每一个 HTML 属性是一个属性节点
• 注释属于注释节点
Node 层次
l 节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
节点及其类型
l 节点
由结构图中我们可以看到，整个文档就是一个文档节点。
而每一个HMTL标签都是一个元素节点。
标签中的文字则是文本节点。
标签的属性是属性节点。
一切都是节点……
l 节点树
节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……
NODE接口的特性和方法
| 特性/方法 |
类型/返回类型 |
说明 |
| nodeName |
String |
节点的名字；根据节点的类型而定义 |
| nodeValue |
String |
节点的值；根据节点的类型而定义 |
| nodeType |
Number |
节点的类型常量值之一 |
| ownerDocument |
Document |
指向这个节点所属的文档 |
| firstChild |
Node |
指向在childNodes列表中的第一个节点 |
| lastChild |
Node |
指向在childNodes列表中的最后一个节点 |
| childNodes |
NodeList |
所有子节点的列表 |
| previousSibling |
Node |
指向前一个兄弟节点；如果这个节点就是第一个兄 弟节点，那么该值为null |
| nextSibling |
Node |
指向后一个兄弟节点；如果这个节点就是最后一个兄 弟节点，那么该值为null |
| hasChildNodes() |
Boolean |
当childNodes包含一个或多个节点时，返回真 |
| attributes |
NamedNodeMap |
包含了代表一个元素的特性的Attr对象；仅用于 Element节点 |
| appendChild(node) |
Node |
将node添加到childNodes的末尾 |
| removeChild(node) |
Node |
从childNodes中删除node |
| replaceChild (newnode, oldnode) |
Node |
将childNodes中的oldnode替换成newnode |
| insertBefore (newnode, refnode) |
Node |
在childNodes中的refnode之前插入newnode |
查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
通过使用 getElementById() 和 getElementsByTagName() 方法
通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
查找元素节点
1）getElementById()
var element = document.getElementById ( ID )
2）getElementsByName()
<input type="text" name="tname" value="国庆60年_1" /><br>
<input type="text" name="tname" value="国庆60年_2" /><br>
<input type="text" name="tname" value="国庆60年_3" /><br>
function test(){
var tnameArray=document.getElementsByName("tname");
alert(tnameArray.length);
for(var i=0;i<tnameArray.length;i++){
window.alert(tnameArray[i].value);
}
}
3）getElementsByTagName()
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
或
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”);
alert(elements .length);
处理input
var inputElements=document.getElementsByTagName("input");
//输出input标签的长度
alert(inputElements.length);
for(var i=0;i<inputElements.length;i++){
if(inputElements[i].type!='button'){
alert(inputElements[i].value);
}
}
处理select
//获取select标签
var selectElements=document.getElementsByTagName("select");
//获取select下的子标签
for(var j=0;j<selectElements.length;j++){
var optionElements=selectElements[j].getElementsByTagName("option");
for(var i=0;i<optionElements.length;i++){
alert(optionElements[i].value);
}
}
一些常用的访问节点的属性及用法
parentNode：父节点、firstChil：第一个子节点、lastChild最后一个子节点
hasChildNodes() :该方法用来检查一个元素是否有子节点，返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。
Document。documentElement：返回存在于 XML 以及 HTML 文档中的文档根节点
document.body ：是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
注：nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeName 是一个只读属性。
案例：
获取节点的名称及value
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<h1>
你好，kouxiaolin
</h1>
</body>
</html>
<scripttype="text/javascript">
<!--
window.onload=function(){
var root=document.documentElement;
alert("跟标签的名称："+root.nodeName);
var ss=root.firstChild;
alert("root的第一个子标签head："+ss.nodeName);
var ee=root.lastChild;
alert("root的最后一个子标签body："+ee.nodeName);
var body=document.body;
alert("body标签："+body.nodeName);
var h1=body.firstChild;
alert("body标签的第一个子标签h1："+h1.nodeName);
var tt=h1.firstChild;
alert("h1标签的子标签名称："+tt.nodeName);
alert("h1标签的文本内容："+tt.nodeValue);
}
// -->
</script>
遍历select中所有的option对象的文本值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo02.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
window.onload = function() {
//通过getElementById("edu")方法获取select的对象
var edus = document.getElementById("edu");
//通过select中options集合获取所有的option对象
var edus1 = edus.options;
var msg ="";
//遍历所有的option对象的文本值
for(var i=0;i<edus1.length;i++){
msg+=edus1[i].innerHTML+",";
}
//把获取的msg信息写入到showMsg的div中
document.getElementById("showMsg").innerHTML=msg;
}
</script>
</head>
<body>
<div>
<form action="">
用户名:<input type="text" name="name" />
学历:<select id="edu" name="education">
<option value="大专">大专生</option>
<option value="本科">本科生</option>
<option value="硕士">硕士生</option>
<option value="博士">博士生</option>
</select>
<input type="submit" value="注册" />
</form>
</div>
用户的学历是：
<div id="showMsg">
</div>
</body>
</html>
或
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo02.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
window.onload = function() {
//通过getElementById("edu")方法获取select的对象
var edus = document.getElementById("edu");
var edus1 = edus.childNodes;
alert(edus1.length);
var fc = edus.firstChild;
alert(fc.nodeName);
var lc = edus.lastChild;
alert(lc.nodeName);
var llc = lc.firstChild;
alert(llc.nodeValue);
var msg = "";
for ( var i = 0; i < edus1.length; i++) {
if (edus1[i].nodeType == 1)
msg += edus1[i].lastChild.nodeValue + ",";
}
document.getElementById("showMsg").innerHTML = msg;
}
</script>
</head>
<body>
<div>
<form action="">
用户名:
<input type="text" name="name" />
学历:
<select id="edu" name="education">
<option value="大专">
大专生
</option>
<option value="本科">
本科生
</option>
<option value="硕士">
硕士生
</option>
<option value="博士">
博士生
</option>
</select>
<input type="submit" value="注册" />
</form>
</div>
用户的学历是：
<div id="showMsg">
</div>
</body>
</html>