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

 更新時間:2020年01月13日 10:42:47   作者:qq_42412646   我要評論
這篇文章主要介紹了JS document文檔的簡單操作,結合完整實例形式詳細分析了JavaScript document文檔元素添加、刪除、獲取、創建等相關操作技巧與使用注意事項,需要的朋友可以參考下

本文實例講述了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進行數據的顯示,用HTML可以進行執行的顯示
            }
            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");
//                在父類對象中創建input對象
                var inp=document.createElement("input");
                inp.type="file";
//                在父類對象中創建button對象
                var btn=document.createElement("input"); //利用document對象進行在JS中創建HTML的對象
                btn.type="button";      //設置對象中的幾個屬性值
                btn.value="刪除";
                btn.onclick=function del2(){
                    showdiv.removeChild(inp);  //利用父類對其子類對象進行移除操作
                    showdiv.removeChild(btn);
                    showdiv.removeChild(br);
                }
//                在父類對象中創建br(換行符)對象
                var br=document.createElement("br");
//                把個屬性對象添加到父類div中
                showdiv.appendChild(inp);      //利用父類對象利用函數進行添加操作,調用時操作的是一個對象
                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創建子div方法操作文檔" onclick="testFile2()"/>
        <hr />
        <div id="showdiv2">
        </div>
    </body>
</html>

運行效果:

文檔的操作:主要是為了讓用戶可以上傳文檔;

基本內容:

增加節點, 刪除節點 

方法:刷新式文本操作

使用innerHTML: div.innerHTML=div.innerHTML + "內容"     添加元素

div.innnerHTML =" "      直接進行全部清空

利用父節點.removeChild(子節點對象)       刪除指定元素

方法2: 添加式文本操作

獲取對象:

var obj = document.createElement(標簽名);

obj.標簽屬性=........    對屬性進行賦值,所有的屬性,賦的值可以是函數等一切合法的內容

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • javascript淘寶評星簡版

    javascript淘寶評星簡版

    基本js實現的星星投票選擇功能代碼。
    2010-07-07
  • 抖音上用記事本編寫愛心小程序教程

    抖音上用記事本編寫愛心小程序教程

    這篇文章主要為大家詳細介紹了抖音上用記事本編寫"愛心"小程序教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-04-04
  • js 瀏覽本地文件夾系統示例代碼

    js 瀏覽本地文件夾系統示例代碼

    js 瀏覽本地文件夾系統不可思議吧,經測試效果還是不錯的,感興趣的朋友可以參考下
    2013-10-10
  • 完美實現js焦點輪播效果(一)

    完美實現js焦點輪播效果(一)

    這篇文章主要為大家詳細介紹了完美實現js焦點輪播效果的相關代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • js實現簡單模態框實例

    js實現簡單模態框實例

    這篇文章主要為大家詳細介紹了js實現簡單模態框實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • JS實現圖片放大鏡插件詳解

    JS實現圖片放大鏡插件詳解

    這篇文章主要為大家詳細介紹了JS實現圖片放大鏡插件的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • JS中Promise函數then的奧秘探究

    JS中Promise函數then的奧秘探究

    then()方法用于指定當前實例狀態發生改變時的回調函數。它返回一個新的Promise實例。下面這篇文章主要給大家介紹了關于JS中Promise函數then的相關資料,需要的朋友可以參考借鑒,下面來一起看看吧
    2018-07-07
  • JavaScript中實現Map的示例代碼

    JavaScript中實現Map的示例代碼

    本篇文章給大家介紹javascript中實現map的示例代碼,代碼寫的簡單易懂,可以獲取、刪除鍵值,剛興趣的朋友跟著腳本之家小編一起學習吧。
    2015-09-09
  • Js 彈出框口并返回值的兩種常用方法

    Js 彈出框口并返回值的兩種常用方法

    有時候我們需要在新窗口執行一些代碼并講求將執行的結果返回到這個頁面,那么就需要下面的方法,js常用的就是下面這中方法。
    2010-12-12
  • Bootstrap編寫一個兼容主流瀏覽器的受眾門戶式風格頁面

    Bootstrap編寫一個兼容主流瀏覽器的受眾門戶式風格頁面

    這篇文章主要介紹了Bootstrap編寫一個兼容IE8、谷歌等主流瀏覽器的受眾門戶式風格頁面,感興趣的小伙伴們可以參考一下
    2016-07-07

最新評論

pc蛋蛋幸运28app下载地址