溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關怎么在JavaScript中對 document文檔進行操作，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。
具體如下：
<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>
<h4>js-documnent文檔結構操作</h4>
<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.標簽屬性=........ 對屬性進行賦值，所有的屬性，賦的值可以是函數等一切合法的內容
看完上述內容，你們對怎么在JavaScript中對 document文檔進行操作有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
