深入浅出DOM模型（源码分析）！

最新推荐文章于 2024-03-19 12:51:33 发布

shiyangxt

最新推荐文章于 2024-03-19 12:51:33 发布

阅读量174

点赞数

分类专栏： [随笔分类]（-......-）文章标签： JavaScript XHTML HTML ASP.net CSS ViewUI

[随笔分类]（-......-）专栏收录该内容

21 篇文章 0 订阅

订阅专栏

Ajax由四部分组成：JavaScript，css，DOM，xmlHttpRequest。

今天搞了搞DOM模式。

与大家分享笔记和源码，使不了解DOM的读者，通过这篇随笔掌握DOM精华：

*************************************************

DOM模型

DOM模型框架（文档对象模型）

DOM模型中的节点
元素节点
文本节点
属性节点

使用DOM

访问节点：
getElementByTagName（以标签名称获得）

exampl：

<! 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 > 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：

<! 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 > 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 >

父子关系：

<! 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 > 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 οnlοad= " myDOMInspector() " >
<ul id= " myList " >
<li>施杨</li>
<li>嘿嘿</li>
<li>嘻嘻</li>
<li>呵呵</li>
<li>哈哈</li>
</ul>
</body>
</html>

节点的属性：