首页技术为王JavascriptJS入门到精通 第11章 文档对象模型（DOM）

JS入门到精通 第11章 文档对象模型（DOM）

分类Javascript时间2026-06-21 16:35:03发布信义之树浏览14
导读：一、练习 1. 练习1 （1）源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>访问指定节点</title> &...

一、练习

1. 练习1

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>访问指定节点</title>
</head>
<body id="b1">
<h3>三号标题</h3>
<b>加粗内容</b>
    BODYBODYBODYBODYBODY
<script type="text/javascript">
    var by=document.getElementById("b1");
    var str;
    str="节点名称："+by.nodeName+"\n";
    str+="节点类型："+by.nodeType+"\n";
    str+="节点值："+by.nodeValue+"\n";
    alert(str);
</script>
    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/11_1/

 （3）Tips

   .nodeName，.nodeType 。


2. 练习2

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>遍历文档树</title>
</head>
<body>
<h3 id="h1">三号标题</h3>
<b>加粗内容</b>
<form name="frm" action="#" method="get">
节点名称：<input type="text" id="na"><br>
节点类型：<input type="text" id="ty"><br>
节点的值：<input type="text" id="va"><br>
<input type="button" value="父节点" onclick="txt=nodeS(txt,'parent');">
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,'firstChild');">
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,'lastChild');"><br>
<input name="button" type="button" onclick="txt=nodeS(txt,'previousSibling');" value="前一个兄弟节点">
<input type="button" value="后一个兄弟节点" onclick="txt=nodeS(txt,'nextSibling');">
<input type="button" value="返回根节点" onclick="txt=document.documentElement;txtUpdate(txt);">
</form>
    
    
<script type="text/javascript">

    function nodeS(txt,nodeName){
        switch(nodeName){
            case "previousSibling":
                if(txt.previousSibling){
                    txt=txt.previousSibling;
                }else
                    alert("无兄弟节点");
                break;
            case "nextSibling":
                if(txt.nextSibling){
                    txt=txt.nextSibling;
                }else
                    alert("无兄弟节点");
                break;
            case "parent":
                if(txt.parentNode){
                    txt=txt.parentNode;
                }else
                    alert("无父节点");
                break;
            case "firstChild":
                if(txt.hasChildNodes()){
                    txt=txt.firstChild;
                }else
                    alert("无子节点");
                break;
            case "lastChild":
                if(txt.hasChildNodes()){
                    txt=txt.lastChild;
                }else
                    alert("无子节点")
                break;
                
        }
        txtUpdate(txt);
        return txt;
    }
    
    function txtUpdate(txt){
        window.document.frm.na.value=txt.nodeName;
        window.document.frm.ty.value=txt.nodeType;
        window.document.frm.va.value=txt.nodeValue;
    }
    
    var txt=document.documentElement;
    txtUpdate(txt);
</script>
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/11_2/

 （3）Tips

   .previousSibling，.nextSibling，.parent，.firstChild，lastChild，txt经返回之后就一直用那个值 。


3. 练习3

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>补全古诗最后一句</title>
<style type="text/css">
#poemDiv{
    width:300px;
    height:180px;
    background:url(poem.png);
    font-weight:bolder;
}
.poemtitle{
height:50px;
line-height:50px;
margin-left:120px;
font-size:24px;
color:#0000FF;}
.poem{
margin:0 auto;
margin-left:100px;
height:30px;
line-height:30px;
color:#0000FF;
font-size:18px;
}
</style>
</head>
<body>
  
<div id="poemDiv">
  <div>春晓</div>
  <div>春眠不觉晓</div>
  <div>处处闻啼鸟</div>
  <div>夜来风雨声</div>
</div>
<p></p>
<form name="myform">
  请输入最后一句：<input type="text" name="last">
  <input type="button" value="添加" onClick="completePoem()">
</form>
    
    
<script type="text/javascript">
function completePoem(){
    var div = document.createElement('div');//创建div元素
    div.className = 'poem';//为div元素添加CSS类
    var last = myform.last.value;//获取用户输入的古诗最后一句
    txt=document.createTextNode(last);//创建文本节点
    div.appendChild(txt);//将文本节点添加到创建的div元素中
    document.getElementById('poemDiv').appendChild(div);//将创建的div元素添加到id为poemDiv的div元素中
}
</script>    
    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/11_3/

 （3）Tips

   .createTextNode，appendChild，.classname 。


4. 练习4

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>创建多个节点</title>

</head>
<body onload="dc()">
    
    <script type="text/javascript">
    function dc(){
        var aText=["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"];
        for(var i=0;i<aText.length;i++){
            var ce=document.createElement("p");
            var cText=document.createTextNode(aText[i]);
            ce.appendChild(cText);            
            document.body.appendChild(ce);
        }
    }
    
    window.onload=dc;
</script>
    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/11_4/

 （3）Tips

   <body onload="dc()">这么写无效 。


5. 练习5

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>创建多个节点2</title>
</head>
<body onload="dc()">
<script type="text/javascript">
    function dc(){
        var aText=["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"];
        var cdf=document.createDocumentFragment();
        for(var i=0;i<aText.length;i++){
            var ce=document.createElement("b");
            var cb=document.createElement("br");
            var cText=document.createTextNode(aText[i]);
            ce.appendChild(cText);
            cdf.appendChild(ce);
            cdf.appendChild(cb);
        }
        document.body.appendChild(cdf);
    }
    
    window.onload=dc;
</script>
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/11_5/

 （3）Tips

   document.createDocumentFragment 。


6. 练习6

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>插入节点</title>

</head>
<body>
    <h2 id="h">在上面插入节点</h2>
    <form id="frm" name="frm">
    输入文本：<input type="text" name="txt">
    <input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);">
    </form>
    
    
 <script type="text/javascript">

    function insetNode(nodeId,str){//插入节点的函数
        var node=document.getElementById(nodeId);//获取指定id的元素
        var newNode=crNode(str);//创建节点
        if(node.parentNode)        //判断是否拥有父节点
            node.parentNode.insertBefore(newNode,node); //将创建的节点插入到指定元素的前面
    }
     
    function crNode(str){//创建节点的函数
        var newP=document.createElement("p");//创建p元素
        var newTxt=document.createTextNode(str);//创建文本节点
        newP.appendChild(newTxt);//将文本节点添加到创建的p元素中
        return newP;//返回创建的p元素
    }
</script>   
    
    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/11_6/

 （3）Tips

   node.parentNode.insertBefore 。


7. 练习7

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>复制下拉菜单</title>

</head>   
<body>
<form>   
<hr>
    <select name="shopType" id="shopType">   
     <option value="%">请选择类型</option>   
     <option value="0">数码电子</option>   
     <option value="1">家用电器</option>
     <option value="2">床上用品</option>
    </select> 
<hr>
    <div id="di"></div>
    <input type="button" value="复制" onClick="AddRow(false)">
    <input type="button" value="深度复制" onClick="AddRow(true)">
</form>
       
<script type="text/javascript"> 
    function AddRow(bl){
        var sel=document.getElementById("shopType");//获取指定id的元素
        var newSelect=sel.cloneNode(bl);//复制节点
        var br=document.createElement("br");//创建br元素
        di.appendChild(newSelect);//将复制的新节点添加到指定节点的未尾
        di.appendChild(br);//将创建的br元素添加到指定节点的未尾
    }
</script>
    
</body>   
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/11_7/

 （3）Tips

   .cloneNode(true) 。


8. 练习8

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>删除节点</title>

</head>
<body>
<h2>删除节点</h2>
<div id="di"><p>少林派掌门空闻大师</p><p>武当派掌门张三丰</p><p>峨眉派掌门灭绝师太</p></div>
<form>
    <input type="button" value="删除" onclick="delNode()">
</form>
    
    
<script type="text/javascript">
    function delNode(){
        var deleteN=document.getElementById('di');//获取指定id的元素
        if(deleteN.hasChildNodes()){//判断是否有子节点
            deleteN.removeChild(deleteN.lastChild);//删除节点
        }
    }    
</script>
    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/11_8/

 （3）Tips

    .hasChildNodes()，.removeChild，.lastChild 。


















JS入门到精通 第10章 文档（Document）对象

相关内容

更多

游客 回复需填写必要信息
↑