JavaScript 透过DOM操作文档
日期：2014-05-16 浏览次数：20419 次
JavaScript 通过DOM操作文档
js 通DOM 操作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=gb2312" />
<title>4.3 DOM访问文档</title>
<style type="text/css">
<!--
.mao {
font-family: "草体";
font-size: 18px;
font-style: italic;
color: #0000FF;
}
.song {
font-family: "宋体";
font-size: 24px;
font-style: italic;
color: #FF00FF;
}
-->
</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;//获取子节点
p1.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;
tag.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);
aHref = 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";
temp = temp.nextSibling;
}
temp = p2;
while(temp != null){//当前节点的 back 节点
info += "back: " + temp.nodeName + "\n";
temp = temp.previousSibling;
}
alert(info);*/
//--------------------------------------------
/*var imgTag = document.getElementsByTagName("img")[0];
//imgTag.src = 'http://mimg.126.net/logo/126logo.gif';
//alert(imgTag.getAttribute('src') )
imgTag.setAttribute("src","http://mimg.126.net/logo/126logo.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 onload="funOnload()">
<p class="mao">显示1</p>
<p class="mao" id="p2">显示2</p>
<p class="mao"><a href="http://www.google.com" id="aHref">www.google.com</a></p>
<p class="mao">显示4</p>
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="google" title="谷歌" />
<a href="javascript:display();">href</a>
<noscript>noscript</noscript>
<h1></h1>
</body>
</html>
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
