JavaScript 通过DOM操作文档

<!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;//获取子节点

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 = '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://qqface.knowsky.com/" id="aHref">qq表情</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>