JS document文檔的簡單操作完整示例

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

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

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

<html>
    <head>
        <title>js-documnent文檔結構操作</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進行數(shù)據(jù)的顯示,用HTML可以進行執(zhí)行的顯示
            }
            function delDiv(btn){
//                獲取元素
                var showdiv=document.getElementById("showdiv");
//                獲取要刪除元素的父類,因為其在一個div中,我們要刪除整個div中的內容
                var cid=btn.parentNode;
//                利用父類對象移除子類對象
                showdiv.removeChild(cid);
            }
//            上面是在盒子模型的基礎上的添加,然后再重新賦值,所以當用戶進行了file的基本操作后由于是重新賦值而導致操作無法保存
            function testFile2(){
//                獲取元素
                var showdiv=document.getElementById("showdiv2");
//                在父類對象中創(chuàng)建input對象
                var inp=document.createElement("input");
                inp.type="file";
//                在父類對象中創(chuàng)建button對象
                var btn=document.createElement("input"); //利用document對象進行在JS中創(chuàng)建HTML的對象
                btn.type="button";      //設置對象中的幾個屬性值
                btn.value="刪除";
                btn.onclick=function del2(){
                    showdiv.removeChild(inp);  //利用父類對其子類對象進行移除操作
                    showdiv.removeChild(btn);
                    showdiv.removeChild(br);
                }
//                在父類對象中創(chuàng)建br(換行符)對象
                var br=document.createElement("br");
//                把個屬性對象添加到父類div中
                showdiv.appendChild(inp);      //利用父類對象利用函數(shù)進行添加操作,調用時操作的是一個對象
                showdiv.appendChild(btn);
                showdiv.appendChild(br);
            }
            //這個上面的方法是在對象的基礎上進行添加，而不是像上面的進行重新加載
        </script>
    </head>
    <body>
        <h3>js-documnent文檔結構操作</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>

運行效果：