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

shiyangxt

浏览: 150537 次
性别:
来自: 保定

最近访客更多访客>>

军君02

冷月宫主

GYC233

jlz

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

[随笔分类]（-......-）

JavaScript XHTML HTML ASP.net CSS

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>

节点的属性：

创建新节点

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

分享到：

J2EE玩转FCKEditor（转载） | 从零开始学jQuery：jQuery与Ajax入门

2008-10-26 21:54
浏览 1254
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论