快捷導(dǎo)航

JS document文檔的簡(jiǎn)單操作完整示例

更新時(shí)間：2020年01月13日 10:42:46 作者：qq_42412646

這篇文章主要介紹了JS document文檔的簡(jiǎn)單操作,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript document文檔元素添加、刪除、獲取、創(chuàng)建等相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS document文檔的簡(jiǎn)單操作。分享給大家供大家參考，具體如下：

<html>
    <head>
        <title>js-documnent文檔結(jié)構(gòu)操作</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            function testFile(){
//                獲取元素
                var showdiv=document.getElementById("showdiv");
//                添加屬性,元素追加
                showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='' /><input type='button' value='刪除' onclick='delDiv(this)'/></div>";
//                利用innerHTML或innerText進(jìn)行數(shù)據(jù)的顯示,用HTML可以進(jìn)行執(zhí)行的顯示
            }
            function delDiv(btn){
//                獲取元素
                var showdiv=document.getElementById("showdiv");
//                獲取要?jiǎng)h除元素的父類(lèi),因?yàn)槠湓谝粋€(gè)div中,我們要?jiǎng)h除整個(gè)div中的內(nèi)容
                var cid=btn.parentNode;
//                利用父類(lèi)對(duì)象移除子類(lèi)對(duì)象
                showdiv.removeChild(cid);
            }
//            上面是在盒子模型的基礎(chǔ)上的添加,然后再重新賦值,所以當(dāng)用戶(hù)進(jìn)行了file的基本操作后由于是重新賦值而導(dǎo)致操作無(wú)法保存
            function testFile2(){
//                獲取元素
                var showdiv=document.getElementById("showdiv2");
//                在父類(lèi)對(duì)象中創(chuàng)建input對(duì)象
                var inp=document.createElement("input");
                inp.type="file";
//                在父類(lèi)對(duì)象中創(chuàng)建button對(duì)象
                var btn=document.createElement("input"); //利用document對(duì)象進(jìn)行在JS中創(chuàng)建HTML的對(duì)象
                btn.type="button";      //設(shè)置對(duì)象中的幾個(gè)屬性值
                btn.value="刪除";
                btn.onclick=function del2(){
                    showdiv.removeChild(inp);  //利用父類(lèi)對(duì)其子類(lèi)對(duì)象進(jìn)行移除操作
                    showdiv.removeChild(btn);
                    showdiv.removeChild(br);
                }
//                在父類(lèi)對(duì)象中創(chuàng)建br(換行符)對(duì)象
                var br=document.createElement("br");
//                把個(gè)屬性對(duì)象添加到父類(lèi)div中
                showdiv.appendChild(inp);      //利用父類(lèi)對(duì)象利用函數(shù)進(jìn)行添加操作,調(diào)用時(shí)操作的是一個(gè)對(duì)象
                showdiv.appendChild(btn);
                showdiv.appendChild(br);
            }
            //這個(gè)上面的方法是在對(duì)象的基礎(chǔ)上進(jìn)行添加，而不是像上面的進(jìn)行重新加載
        </script>
    </head>
    <body>
        <h3>js-documnent文檔結(jié)構(gòu)操作</h3>
        <hr />
        <input type="button" name="" id="" value="盒子形式操作文檔" onclick="testFile()"/>
        <hr />
        <div id="showdiv">
        </div>
        <hr />
        <input type="button" name="" id="" value="js創(chuàng)建子div方法操作文檔" onclick="testFile2()"/>
        <hr />
        <div id="showdiv2">
        </div>
    </body>
</html>

運(yùn)行效果：