文档对象模型

一、理解DOM

从一个简单的HTML文档理解树的概念：

Html代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>DOMTEST</title>
</head>
<body>
<h1>DOMTESTHEADING</h1>
<hr/>
<p>Aparagraphof<em>text</em>isjustanexample</p>
<ulid="ul"><li><ahref="#">Yahoo!</a></li></ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM TEST</title>
</head>
<body>
<h1>DOM TEST HEADING</h1>
<hr />
<!--Just a comment-->
<p>A paragraph of <em>text</em> is just an example</p> 
<ul id="ul"><li><a href="#">Yahoo!</a></li></ul>
</body>
</html>

文档对象模型

二、DOM中常用属性及方法：(如未特别举出文档事例，均采用文章开头的HTML文档，测试在chrome中通过:JavaScript控制台)

（一）nodeName:String文本节点的nodeName总是#text

document.getElementById("ul").nodeName;//UL（nodeName返回始终为大写）

（二）nodeValue:String通常用于文本节点（元素节点返回为null）

document.getElementsByTagName("title")[0].firstChild.nodeValue//DOMTEST

（三）nodeType:Number节点类型常量值

DOM浏览器中：

元素节点类型：Node.ELEMENT_NODE1

文本节点类型：Node.TEXT_NODE3

document.getElementById("ul").nodeType;//1

（四）firstChild:Node指向子节点列表中第一个节点

document.getElementsByTagName("title")[0].firstChild.nodeName;//#text

（五）lastChild:Node指向子节点列表中最后个节点

（六）childNodes:NodeList所有子节点列表

vardoc=document.getElementById("ul").childNodes;for(din doc){alert(doc[d].nodeName)};

（七）parentNode:Node返回父节点

document.getElementById("ul").parentNode.nodeName;//BODY

（八）previousSibling:Node返回前一个兄弟节点

document.getElementsByTagName("em")[0].previousSibling.nodeValue;//Aparagraph of

（九）nextSibling:Node返回下一个兄弟节点

document.getElementsByTagName("em")[0].nextSibling.nodeValue;

//isjust an example

（十）hasChildNodes():Boolean判断是否包含子节点

document.getElementsByTagName("em")[0].nextSibling.hasChildNodes();//false

（十一）appendChild(node)

vartext=document.createTextNode("test");//创建一个文本节点

varli=document.createElement("li");//创建一个元素

li.appendChild(text);//li元素追加子节点text

document.getElementById("ul").appendChild(li);//ul追加子节点li

（十二）removeChild(node)

document.getElementById("ul").removeChild(document.getElementById("ul").lastChild);

（十三）insertBefore(new,old)在old前插入一个new节点

vartext=document.createTextNode("test");

varli=document.createElement("li");li.appendChild(text);

vardoc=document.getElementById("ul");

doc.insertBefore(li,doc.firstChild);

（十四）cloneNode()无参：克隆节点本身，浅层克隆；true：深层克隆

//深层克隆所有子节点

varul=document.getElementById("ul");

varcloneNode=ul.cloneNode(true);

ul.appendChild(cloneNode);

//浅层仅元素本身

varli=document.getElementById("ul").firstChild;

varc=li.cloneNode();

document.getElementById("ul").appendChild(c);//只有<li>

（十五）innerHTML特别的table及select元素不支持这样的赋值

varhtml=document.getElementById("ul").innerHTML;

alert(html);

（十六）getElementById();通过ID获取元素

（十七）getElementsByTagName()通过元素标签名获取元素（数组）

（十八）getElementsByName()通过元素name获取元素，通常用于radio、checkbox

三、实例：

通过两个按钮添加删除元素，输入框内容为添加内容

Html代码

<scripttype="text/javascript">
window.onload=init;
varul;
functioninit(){
document.getElementsByTagName("input")[1].onclick=add;
document.getElementsByTagName("input")[2].onclick=remove;
ul=document.getElementsByTagName("ul")[0];
}
functionadd(){
vartxt=document.getElementsByTagName("input")[0].value;
if(txt!=""){
varliText=document.createTextNode(txt);
varli=document.createElement("li");
li.appendChild(liText);
ul.insertBefore(li,ul.firstChild);
document.getElementsByTagName("input")[0].value="";
}
}
functionremove(){
/*if(ul.hasChildNodes()){
ul.removeChild(ul.firstChild);
}*/
varli=document.getElementsByTagName("li");
if(li.length>0){
ul.removeChild(li[li.length-1]);
}
}
</script>
</head>
<body>
<ul>
<li>文字1</li>
<li>文字2</li>
</ul>
<div>
输入<inputtype="text"/><br/>
<inputtype="button"value="+"/>
<inputtype="button"value="-"/>
</div>

<script type="text/javascript">
window.onload = init;
var ul;
function init(){
document.getElementsByTagName("input")[1].onclick = add;
document.getElementsByTagName("input")[2].onclick = remove;
ul = document.getElementsByTagName("ul")[0];
}
function add(){
var txt = document.getElementsByTagName("input")[0].value;
if(txt!=""){
var liText = document.createTextNode(txt);
var li = document.createElement("li");
li.appendChild(liText);
ul.insertBefore(li,ul.firstChild);
document.getElementsByTagName("input")[0].value = "";
}
}
function remove(){
/*if(ul.hasChildNodes()){
ul.removeChild(ul.firstChild);
}*/
var li = document.getElementsByTagName("li");
if(li.length>0){
ul.removeChild(li[li.length-1]);
}
}
</script>
</head>
<body>
<ul>
<li>文字1</li>
<li>文字2</li>
</ul>
<div>
输入<input type="text" /><br />
<input type="button" value="+" />
<input type="button" value="-" />
</div>

代码中多行注释的部分，在FF类型浏览器中需要点击两次删除才真正的删除，这是因为

Html代码

<ul>
<li>文字1</li>
<li>文字2</li>
</ul>

<ul>
<li>文字1</li>
<li>文字2</li>
</ul>

这几行代码是敲入的，每行有“\n”，IE自动忽略换行，而FF不忽略，点击第一次删除是删除换行符，第二次才是删除LI

http://senny.iteye.com/blog/415848