溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么在JavaScript中對(duì) document文檔進(jìn)行操作

發(fā)布時(shí)間：2021-05-07 15:47:00 來(lái)源：億速云 閱讀：345 作者：Leah 欄目：web開(kāi)發(fā)

今天就跟大家聊聊有關(guān)怎么在JavaScript中對(duì) document文檔進(jìn)行操作，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

JavaScript是什么

JavaScript是一種直譯式的腳本語(yǔ)言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。

具體如下：

<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除元素的父類,因?yàn)槠湓谝粋€(gè)div中,我們要?jiǎng)h除整個(gè)div中的內(nèi)容
                var cid=btn.parentNode;
//                利用父類對(duì)象移除子類對(duì)象
                showdiv.removeChild(cid);
            }
//            上面是在盒子模型的基礎(chǔ)上的添加,然后再重新賦值,所以當(dāng)用戶進(jìn)行了file的基本操作后由于是重新賦值而導(dǎo)致操作無(wú)法保存
            function testFile2(){
//                獲取元素
                var showdiv=document.getElementById("showdiv2");
//                在父類對(duì)象中創(chuàng)建input對(duì)象
                var inp=document.createElement("input");
                inp.type="file";
//                在父類對(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);  //利用父類對(duì)其子類對(duì)象進(jìn)行移除操作
                    showdiv.removeChild(btn);
                    showdiv.removeChild(br);
                }
//                在父類對(duì)象中創(chuàng)建br(換行符)對(duì)象
                var br=document.createElement("br");
//                把個(gè)屬性對(duì)象添加到父類div中
                showdiv.appendChild(inp);      //利用父類對(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>
        <h4>js-documnent文檔結(jié)構(gòu)操作</h4>
        <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)行效果：

怎么在JavaScript中對(duì) document文檔進(jìn)行操作

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

基本內(nèi)容：

增加節(jié)點(diǎn)， 刪除節(jié)點(diǎn) 

方法：刷新式文本操作

使用innerHTML: div.innerHTML=div.innerHTML + "內(nèi)容"     添加元素

div.innnerHTML =" "      直接進(jìn)行全部清空

利用父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn)對(duì)象)       刪除指定元素

方法2： 添加式文本操作

獲取對(duì)象：

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

obj.標(biāo)簽屬性=........    對(duì)屬性進(jìn)行賦值，所有的屬性，賦的值可以是函數(shù)等一切合法的內(nèi)容

看完上述內(nèi)容，你們對(duì)怎么在JavaScript中對(duì) document文檔進(jìn)行操作有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手