JavaScript 通过DOM操作文档

2024-04-27 14:04:20

字体：大中小

来源：转载

供稿：网友

<!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 = '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.vevb.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>

上一篇：用CSS实现图片圆角化处理

下一篇：CSS模块化及多人分工协作