JS document文件的簡單操作完整示例
阿新 • • 發佈：2020-01-14
本文例項講述了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程式設計有所幫助。