JavaScript的DOM基础知识
/*
javascript实现DOM（基础）
author:shine
*/
DOM是一种文档对象模型，它定义了操作xml文档的方法和属性，但是它只是一系列接口，是由别的语言来实现，如：java中xerces，javascript,.net等
等，虽然实现方式各异，但有一样是不会变的，那就是DOM API，在正式进入我们的主题前，先来看看常用的DOM API（大致有个印象就行，后面会详
解）：
1.常用DOM API(void表示没有返回值，或没有参数)
1）DOMDocument对象 表示整个xml文件的文档结构，javascript中已经内置了这个对象document。所有其他的节点都是有它生成。
属性：
名字 类型 说明
documentElement Element 表示xml文件的根节点
方法：
名字 返回值 参数 说明
createElement(tagName); Element String 创建一个Element节点
createTextNode(text); Text String 创建一个Text节点
createAttribute(name); Attr String 创建一个属性节点
createDocumentFragment(); DocumentFragment void 创建一个文档片段
getElementById(id); Element String 按照元素id属性获得元素
getElementsByTagName(tagName); NodeList String 按照元素标签名称获得元素列表
getElementsByName(name); NodeList String 按照元素name属性获得元素列表
2) DOMNode对象 DOM中主要的对象，DOMAttribute，DOMElement，DOMText都继承于此对象。
属性：
名字 类型 说明
nodeName String 节点的名字
nodeValue String 节点的值
nodeType Number 节点的类型
parentNode Node 父节点
nextSibling Node 下一个兄弟节点
previousSibling Node 上一个兄弟节点
owerDocument Document 所属文档
childNodes NodeList 子节点列表
firstChild Node 第一个子节点
lastChild Node 最后一个子节点
attributes NamedNodeMap 属性列表
方法：
名字 返回值 参数 说明
removeChild(node) void Node 删除子节点
appendChild(node) void Node 添加子节点
3）DOMElement对象 表示DOM中的“标签元素”，继承于Node，所以Node中的属性和方法可以用。除此之外还有几个有用的方法。
（除Node对象的方法和属性外，还有：）
方法：
名字 返回值 参数 说明
setAttribute(attrName,value) String,String 设置属性
getAttribute(attrName) String String 得到属性
removeAttribute(attrName) void String 删除属性
4）DOMAttribute对象 表示元素属性。
（除Node对象的方法和属性外，还有：）
属性：
名字 类型 说明
name String 属性的名称
owerElement Element 属性所属的元素
value String 属性的值
5）DOMText对象 表示元素的文本节点。
（除Node对象的方法和属性外，还有：）
属性
名字 类型 说明
length Number 文本的长度
6）DOM NodeList 节点列表(辅助对象之一，List结构)
属性：
名字 类型 说明
length Number 列表的长度
方法：
名字 返回值 参数 说明
item(i) Node Number 获得指定下标的节点
7）DOM NamedNodeMap 节点Map(辅助对象之二，Map结构)
属性：
名字 类型 说明
length Number Map的长度
方法：
名字 返回值 参数 说明
item(i) Attr Number 获得指定下标的节点
getNamedItem(name) Attr String 获得指点名称的节点
removeNamedItem(name) void String 删除指定名称的节点
大致看了一下DOMAPI后，开始进入正题：
2.使用DOM：
1）访问相关节点：
exp:
function test() {
var oHtml = document.documentElement;
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
//第二种方式得到body：var oBody = oHtml.childNodes[0];
//第三种方式得到body：var oBody = document.body
alert(oHead.parentNode == oHtml);
alert(oBody.parentNode == oHtml);
alert(oHead.nextSibling == oBody);
alert(oBody.previousSibling == oHead);
alert(oHtml.ownerDocument == document);
}
注意：
写完js,然后在body标签中加入事件：<body onload="text();">（后面的例子都是这样，千万不要在<script>标签中直接写代码测试，因为
javascript,html是解释执行的，即：一行一行的执行，如果直接写入，很可能body等标签还没有生成，就在javascript中调用了，所以最好放在函数
function中，用onload触发）
2）检测节点类型：
function test() {
//常用的节点类型，由于IE只支持数字，不支持字符常量如：ELEMENT_NODE,可以使用枚举进行转换
var Node = {
ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_NODE: 3,
DOCUMENT_NODE: 9
}
var oHtml = document.documentElement;
alert(oHtml.nodeType == Node.ELEMENT_NODE);
alert(document.nodeType== Node.DOCUMENT_NODE );
}
3）处理特性
ELement中有一个attributes属性，它是NamedNodeMap类型，所以它可以使用NamedNodeMap的方法(DOM API已经提到)
在test1.html中加入一行：<p id="a1" align="center">I love you</p>
// JavaScript Document
function test() {
var op = document.getElementById("a1"); //通过指定id属性获得元素
//设置op元素属性id和align的方法一
//op.attributes.getNamedItem("id").nodeValue = "a5";
//op.attributes.getNamedItem("align").nodeValue = "right";
//方法二
op.setAttribute("id","a6");
op.setAttribute("align","left");
//获得op元素属性id和align的方法一
//var id = op.attributes.getNamedItem("id").nodeValue;
//var align = op.attributes.getNamedItem("align").nodeValue;
//方法二
var id = op.getAttribute("id");
var align = op.getAttribute("align");
alert(id);
alert(align);
}
4）访问指定节点：
a. getElementsByTagName() 返回指定标签名的元素集。
在test1.html中加入：
<p id="a1" align="center">I love you</p>
<p id="a2" align="center">But you don't know</p>
// JavaScript Document
function test() {
var op1 = document.getElementsByTagName("p");
alert(op1.length);
alert(op1[0].childNodes[0].nodeValue); //获得第一个<p>中的文本
alert(op1[1].childNodes[0].nodeValue); //获得第二个<p>中的文本
}
b. getElementByName() 返回指定标签name属性的元素集
（这个例子完成了“全选”的功能）
test1.html中加入：
<form method="post">
<input type="checkbox" name="color" value="red" /> red<br/>
<input type="checkbox" name="color" value="green" /> green<br/>
<input type="checkbox" name="color" value="blue"/> blue<br/>
<input type="checkbox" name="color" value="all" onClick="test();"/>全选
</form>
// JavaScript Document
function test() {
var allBoxes = document.getElementsByName("color"); //得到所有name属性为color的节点
var allSelected = allBoxes.item(allBoxes.length - 1); //得到最后一个全选节点
//全选
for(var i=0;i<allBoxes.length;i++) {
if(allSelected.checked)
allBoxes.item(i).checked = true;
else
allBoxes.item(i).checked = false;
}
}
c. getElementById() 返回指定标签id属性的元素。（前面的例子中多次用到，就不再举例）
注；IE中的Bug：有时getElementById()会按照name取，而不是id,其实是有原因的：因为HTML是解释执行，即一行一行的执行，那么在IE中会按照
name和id同时一行一行的寻找匹配的元素，如：
var o = getElementById("color1")
alert(o.value);
第一种情况：
<input type="checkbox" id="color1" name="color" value="green" /> green<br/>
<input type="checkbox" id="aaa" name="color1" value="red" /> red<br/>
输出是：green
第二种情况：
<input type="checkbox" id="color" name="color1" value="green" /> green<br/>
<input type="checkbox" id="color1" name="aaa" value="red" /> red<br/>
输出是：green
第三种情况：
<input type="checkbox" id="aaa" name="color1" value="red" /> red<br/>
<input type="checkbox" id="color" name="color1" value="green" /> green<br/>
输出是：red
第四种情况：
<input type="checkbox" id="color1" name="aaa" value="red" /> red<br/>
<input type="checkbox" id="color1" name="color" value="green" /> green<br/>
输出是：red
从上面的四种情况可以看出，不论是name属性还是id属性，只要“解释”到的那一个元素中有任意一个匹配，该元素就会被返回，又由于getElementById
只选一个元素，所以它只会选择最先匹配的元素（不论name还是id）。
5）创建和操作节点
这个例子是把arrText数组中的元素加入到body中。
方法一：
// JavaScript Document
function test() {
var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];
for(var i=0; i<arrText.length; i++) {
var element = document.createElement("p");
var text = document.createTextNode(arrText[i]);
element.appendChild(text);
document.body.appendChild(element);
}
}
如果使用方法一，就要调用10次document.body.appendChild(element)，也就会使页面刷新10次。可以使用DocumentFragment()解决。
方法二：
// JavaScript Document
function test() {
var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];
var fragment = document.createDocumentFragment();
for(var i=0; i<arrText.length; i++) {
var element = document.createElement("p");
var text = document.createTextNode(arrText[i]);
element.appendChild(text);
fragment.appendChild(element);
}
document.body.appendChild(fragment);
}
3.HTML DOM特性
看过我另一篇文章“DOM解析轻松入门（三）--DOM Level2 Modules”的朋友，对HTML DOM并不陌生，“DOM Level 2 HTML (HTML)：扩展DOM提供
了把HTML文档结构作为XML处理的接口。”没错，HTML DOM 就是 DOM Level2中的一个Moduel。
1）让特性像属性一样
如：
<img src="2.jpg" border="1" id="img1" />
按照我们前面的方法得到或设置img的src和border属性：
// JavaScript Document
function test() {
var img = document.getElementById("img1");
alert(img.getAttribute("src"));
img.setAttribute("border","0");
alert(img.getAttribute("border"));
}
而使用HTML DOM：
// JavaScript Document
function test() {
var img = document.getElementById("img1");
alert(img.src);
img.border = 0;
alert(img.border);
}
现在该明白什么叫做“让特性像属性一样”吧。
注意：
大多数特性名和属性名一样，只有一个特殊即：class，它在css中是类选择器，它对应的是className，如：
<div id ="div1" class="header"></div>
var div= document.getElementById("div1");
alert(div.className);
2）table方法。
在DOM HTML中对table也做了改善，下面这个例子是遍历table。
准备一个table
<table id="myTable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
遍历table：
// JavaScript Document
function test() {
var table = document.getElementById("myTable");
for(var i=0; i<table.rows.length; i++)
for(var j=0; j<table.rows[i].cells.length; j++)
alert(table.rows[i].cells[j].innerText);
}
说明：
这里只用注意两个常用的属性：
a. rows 是指table中所有行
b. cells 是指table中的所有单元格（列）
c. 如果想要访问i行j列值：rows[i].cells[j]
4.DOM遍历，由于IE不支持相关的DOM Level Module，所以就不在这里多说了，但是虽然javascript受到浏览器限制，但java是可以完成这部分的功能
，见我的另一篇文章“DOM解析轻松入门（三）--DOM Level2 Modules”
5.测试和DOM标准的一致性
使用
var testDOM = document.implementation.hasFeature("XML","1.0")
该方法有两个参数：要检查的特征和特征的版本。(有关特征列表见“DOM解析轻松入门（三）--DOM Level2 Modules”)
