前端開發之JavaScript HTML DOM理論篇二
阿新 • • 發佈:2018-08-20
parent paragraph app style document col () 刪除 create
主要內容:
1、HTML DOM元素
2、HTML DOM事件
3、HTML DOM實例
一、DOM元素
主要操作有添加、刪除和替換HTML元素
1、創建新的HTML元素
(1)方法一: appendChild() 追加
如需向 HTML DOM 添加新元素,您首先必須創建該元素,然後把它追加到已有的元素上。
實例和解析:
<div id="box1"> <p id="p1">This is first paragraph.</p> <p id="p1">This is second paragraph.</p> </div> <script> //創建一個新的<p>元素 var para = document.createElement("p"); // 如需向<p>元素添加文本,你要首先創建文本節點,以下這句即為創建文本節點 var node = document.createTextNode("This is new!"); // 接下來,你要將文本節點追加到<p>元素中 para.appendChild(node); // 最後,要向已有的元素中追加這個元素,先查找到這個元素 var element = document.getElementById("box1");// 將新元素添加到已有的元素中 element.appendChild(para); </script>
(2)方法二:insertBefore(new,old) 插入
實例:
<div id="box1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para = document.createElement("p");//創建一個新的<p>元素 var node = document.createTextNode("This is another one!"); // 創建文本節點 para.appendChild(node); // 向<p>中追加文本節點 var element = document.getElementById("box");// 查找<p>節點的父節點 var child = document.getElementById("p1"); // 找到<p>節點的同胞節點 element.insertBefore(para,child);// 將新創建的<p>節點插入到id為p1的同胞節點之前
2、刪除已有的HTML元素
如需刪除HTML元素,你需要知道該元素的父元素。
實例:
<div id="box1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> // 獲取父元素 var parent = document.getElementById("box1"); // 獲取要刪除的元素 var child = document.getElementById("p1"); // 刪除該元素 parent.removeChild(child); </script>
簡略方法:找到您需要刪除的子元素,然後使用 parentNode 屬性來查找其父元素
var child = document.getElementById("p1"); child.parentNode.removeChild(child); // child.parentNode表示child的父元素
3、替換HTML元素
如需替換 HTML DOM 中的元素,請使用 replaceChild(new,old) 方法:
<div id="box1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode(" This is new new !"); para.appendChild(node); var parent = document.getElementById("box1"); var child = document.getElementById("p2"); parent.replaceChild(para,child); </script>
未完待續...
前端開發之JavaScript HTML DOM理論篇二