Ajax由四部分组成：JavaScript，css，DOM，xmlHttpRequest。
今天搞了搞DOM模式。
与大家分享笔记和源码，使不了解DOM的读者，通过这篇随笔掌握DOM精华：
*************************************************
DOM模型
DOM模型框架（文档对象模型）
DOM模型中的节点
元素节点
文本节点
属性节点
使用DOM
访问节点：
getElementByTagName（以标签名称获得）
exampl：
"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>GET VS POST</title>
<script language="javascript">
function searchDOM(){
//放在函数内，页面加载完成后才用<body>的onload加载
var oLi=document.getElementsByTagName("li");
//输入长度，标签名称以及某项的文本节点值
alert(oLi.length+" "+oLi[0].tagName+" "+oLi[3].childNodes[0].nodeValue);
var oUl=document.getElementByTagName("ul");
var oLi2=oUl[1].getElementByTagName("li");
alert(oLi2.length+" "+oLi2[0].tagName+" "+oLi2[1].childNodes[0].nodeValue);
}
</script>
</head>
<body onload="searchDOM()">
<ul>客户端语言
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
<ul>服务器端语言
<li>ASP.NET</li>
<li>Java</li>
<li>PHP</li>
</ul>
</body>
</html>
getElementById
example：
"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>GET VS POST</title>
<script language="javascript">
function searchDOM(){
var oLi=document.getElementById("cssLi");
//输入标签名称以及文本节点值
alert(oLi.tagName+" "+oLi.childNodes[0].nodeValue);
}
</script>
</head>
<body onload="searchDOM()">
<ul>客户端语言
<li>HTML</li>
<li>JavaScript</li>
<li id="cssLi">CSS</li>
</ul>
<ul>服务器端语言
<li>ASP.NET</li>
<li>Java</li>
<li>PHP</li>
</ul>
</body>
</html>
父子关系：
"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>GET VS POST</title>
<script language="javascript">
function myDOMInspector(){
var oUl=document.getElementById("myList"); //获取<ul>标记
var DOMString="";
if(oUl.hasChildNodes()){ //判断是否有子节点
var oCh=oUl.childNodes;
for(var i=0;i<oCh.length;i++) //逐一查找
DOMString+=oCh[i].nodeName+""n";
}
alert(DOMString);
}
</script>
</head>
<body onload="myDOMInspector()">
<ul id="myList">
<li>施杨</li>
<li>嘿嘿</li>
<li>嘻嘻</li>
<li>呵呵</li>
<li>哈哈</li>
</ul>
</body>
</html>
节点的属性：
"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>GET VS POST</title>
<script language="javascript">
function myDOMInspector(){
//获取图片
var myImg=document.getElementsByTagName("img")[0];
//获取图片title属性
alert(myImg.getAttribute("title"));
}
</script>
</head>
<body onload="myDOMInspector()">
<img src="01.jpg" title="施杨"/>
</body>
</html>
创建新节点
"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>GET VS POST</title>
<script language="javascript">
function createP(){
var oP=document.createElement("p");
var oText=document.createTextNode("这是一段感人的故事");
oP.appendChild(oText);
document.body.appendChild(oP);
}
</script>
</head>
<body onload="createP()">
<p>实现写一行文字在这里，测试appendChild()方法的添加位置</p>
</body>
</html>
innerHTML
该属性表示某个标记之间的所有内容，包括代码本身。
该属性可以读取，同时还可以设置。
"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>innerHTML</title>
<script language="javascript">
function myDOMInnerHTML(){
var myDiv=document.getElementById("myTest");
alert(myDiv.innerHTML); //直接显示innerHTML的内容
//修改innerHTML，可直接添加代码
myDiv.innerHTML="<img src='01.jpg' title='施杨'>";
}
</script>
</head>
<body onload="myDOMInnerHTML()">
<div id="myTest">
<span>图库</span>
<p>这是一行用于测试的文字</p>
</div>
</body>
</html>
本文转自施杨博客园博客，原文链接：http://www.cnblogs.com/shiyangxt/archive/2008/10/26/1319983.html，如需转载请自行联系原作者