JavaScript 通过DOM操作文档-讨论-IT171中文网-技术源于分享-IT大佬

JavaScript 通过DOM操作文档

IT171中文网管理员组 2013-7-17 763

[backcolor=rgb(238, 238, 238)]

<!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 = '';   
    //alert(imgTag.getAttribute('src') )   
    imgTag.setAttribute("src","");//修改元素属性   
    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="" alt="google" title="谷歌" />  
<a href="javascript:display();">href</a>  
<noscript>noscript</noscript>  
<h1></h1>  
</body>  
</html>