开发学院网页设计 JavaScript JavaScript 通过DOM操作文档阅读

JavaScript 通过DOM操作文档

　2010-02-03 20:12:22　来源：WEB开发网　　　

核心提示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm

<!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=gb2312" />
<title>4.3 DOM访问文档</title>
<style type="text/CSS">

</style>
<script language="javascript" type="text/Javascript">
//--------------------------------------------　
　 /*var p3 = document.getElementsByTagName('p')[3];//根据 TagName 获取元素　
　 p3.className = 'song';*/　
//--------------------------------------------　
　 /*var p2 = document.getElementById('p2');//根据 Id 获取元素　
　 p2.className = 'song';*/　
//--------------------------------------------　
　 /*var p1 = document.getElementsByTagName('p')[0].firstChild;//获取子节点　
　 p1p1.nodeValue = p1.nodeName;//nodeType 中1表示元素结点,3表示文本结点 */　
//--------------------------------------------　
　 /*var pTags = document.getElementsByTagName('p');//遍历 p 元素　
　 for(var pTag = 0;pTag < pTags.length;pTag ++){　
　　　 var tag = pTags[pTag].firstChild;　
　　　 tagtag.nodeValue = tag.nodeName;　
　 }*/　
//--------------------------------------------　
　 /*var bodyTag = document.getElementsByTagName('body')[0];//遍历子节点　
　 var tags = bodyTag.childNodes;　
　 var info = "info: \n"
　 for(var num = 0;num < tags.length ;num ++){//IE 与其它不同的是不会把换行符当作文本节点　
　　　 var tag = tags[num];　
　　　 info +="\t" + tag.nodeName + "\n";　
　 }　
　 alert(info);*/　
//--------------------------------------------　
　 /*var aHref = document.getElementById('aHref');//遍历父节点　
　 while(aHref.nodeName != "BODY"){　
　　　 alert(aHref.nodeName);　
　　　 aHrefaHref = aHref.parentNode;　
　 }　
　 alert(aHref.nodeName);*/　
//--------------------------------------------　
　 /*var p2 = document.getElementById('p2');　
　 var info = "info: \n";　
　 var temp = p2;　
　 while(temp != null){//当前节点的next 点　
　　　 info += "next: " + temp.nodeName + "\n";　
　　　 temptemp = temp.nextSibling;　
　 }　
　 temp = p2;　
　 while(temp != null){//当前节点的 back 节点　
　　　 info += "back: " + temp.nodeName + "\n";　
　　　 temptemp = temp.PReviousSibling;　
　 }　
　 alert(info);*/　
//--------------------------------------------　
　 /*var imgTag = document.getElementsByTagName("img")[0];　
　 //imgTag.src = '/tech/UploadPic/2010910/2010910201223163.gif';　
　 //alert(imgTag.getAttribute('src') )　
　 imgTag.setAttribute("src","http://tech.cncms.com/tech/UploadPic/2010910/2010910201223163.gif");//修改元素属性　
　 imgTag.setAttribute("title","126电子邮箱");*/　
　　　
　 /*var aHref = document.createElement('a');//创建一个标签节点　
　 aHref.setAttribute('href','http://g.cn');　
　 var textInfo = document.createTextNode('一首歌');//创建一个文本节点　
　 aHref.appendChild(textInfo);//添加子节点　
　 var aOld = document.getElementsByTagName('a')[1];　
　 var bodyTag = document.getElementsByTagName('body')[0];　
　 bodyTag.replaceChild(aHref,aOld);//替换一个节点　
　 //bodyTag.insertBefore(aHref,aOld);//把 aHerf 插入到 aOld 之前　
　 //bodyTag.removeChild(aOld);//移除节点*/　
//--------------------------------------------　
function funOnload(){　
　　　
}　
function display(){　
　 var hTag = document.getElementsByTagName('h1')[0];　
　 hTag.innerHTML="innerHTML,<a href='http://g.cn' >12345,上山打老虎</a>";　
}　

</script>
</head>
<body >
<p class="mao">显示1</p>
<p class="mao" id="p2">显示2</p>
<p class="mao"><a href="http://QQface.cncms.com/" id="aHref">qq表情</a></p>
<p class="mao">显示4</p>
<img src="http://tech.cncms.com/tech/UploadPic/2010910/2010910201223884.gif" alt="google" title="谷歌" />
<a href="javascript:display();">href</a>
<noscript>noscript</noscript>
<h1></h1>
</body>
</html>