深入浅出DOM模型（源码分析）！
2008-10-26 21:54
375 查看
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 onload="myDOMInspector()">
<ul id="myList">
<li>施杨</li>
<li>嘿嘿</li>
<li>嘻嘻</li>
<li>呵呵</li>
<li>哈哈</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 myImg=document.getElementsByTagName("img")[0];
//获取图片title属性
alert(myImg.getAttribute("title"));
}
</script>
</head>
<body onload="myDOMInspector()">
<img src="01.jpg" title="施杨"/>
</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 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
该属性表示某个标记之间的所有内容，包括代码本身。
该属性可以读取，同时还可以设置。
<!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>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>
施杨教程！！！转载注明出处：www.cnblogs.com/shiyangxt
今天搞了搞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 onload="myDOMInspector()">
<ul id="myList">
<li>施杨</li>
<li>嘿嘿</li>
<li>嘻嘻</li>
<li>呵呵</li>
<li>哈哈</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 myImg=document.getElementsByTagName("img")[0];
//获取图片title属性
alert(myImg.getAttribute("title"));
}
</script>
</head>
<body onload="myDOMInspector()">
<img src="01.jpg" title="施杨"/>
</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 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
该属性表示某个标记之间的所有内容，包括代码本身。
该属性可以读取，同时还可以设置。
<!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>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>
施杨教程！！！转载注明出处：www.cnblogs.com/shiyangxt
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 深入浅出JavaScript （六）分析DOM模型
- 深入浅出JavaScript （六）分析DOM模型
- 深入浅出JavaScript （六）分析DOM模型
- 深入浅出JavaScript （六）分析DOM模型
- Memcached源码分析(线程模型)
- nova创建虚拟机源码系列分析之二 wsgi模型
- jQuery-1.9.1源码分析系列（十一） DOM操作续——克隆节点
- memcached源码分析之线程模型
- Memcached 源码分析--网络模型流程分析
- Redis源码分析：服务器编程模型
- nginx源码分析（3）——进程模型
- Memcached源码分析(线程模型)
- jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
- Hbase WAL线程模型源码分析
- jQuery-1.9.1源码分析系列（十一） DOM操作
- quartz2.2源码分析3-线程模型
- jQuery源码分析-12 DOM操作-Manipulation-核心函数jQuery.buildFragment()
- jQuery("dom").get()的源码分析
- Memcached源码分析之基于Libevent的网络模型
- Java并发：深入浅出AQS之独占锁模式源码分析