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，如需转载请自行联系原作者
