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

男娘i 2022-02-02 07:43 233阅读 0赞

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

今天搞了搞DOM模式。

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

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

DOM模型  
  
DOM模型框架（文档对象模型）  
  
DOM模型中的节点  
元素节点  
文本节点  
属性节点  
  
使用DOM  
  
访问节点：  
getElementByTagName（以标签名称获得）  
  
exampl：

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

getElementById  
  
example：

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

父子关系：

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

节点的属性：

![复制代码][copycode.gif]

创建新节点

![复制代码][copycode.gif]

innerHTML  
  
该属性表示某个标记之间的所有内容，包括代码本身。  
该属性可以读取，同时还可以设置。

![复制代码][copycode.gif]

本文转自施杨博客园博客，原文链接：http://www.cnblogs.com/shiyangxt/archive/2008/10/26/1319983.html，如需转载请自行联系原作者

[copycode.gif]: /images/20220202/26eed1713d204958b8426da8dcd579a9.png