JavaScript-9-操作DOM物件
阿新 • • 發佈：2021-02-14
JavaScript -> 操作DOM物件
- DOM：Document Object Model，文件物件模型
- 整個瀏覽器頁面就是一個DOM樹形結構
- 核心：
- 更新：更新DOM節點
- 遍歷：得到DOM節點
- 刪除：刪除一個DOM節點
- 新增：新增一個DOM節點
1. 獲得DOM節點
- 要操作一個DOM節點，就必須要先獲得這個DOM節點
- for example:
<div id="test-div">
<div class="c-red">
<p id=" // 選擇<p>JavaScript</p>:
var js = document.getElementById('test-p');
// 選擇<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var arr = document.getElementById('test-div').firstElementChild.nextElementSibling. 2. 更新DOM節點
- 修改節點的文字：
- 修改
innerHTML屬性：可以修改文字的值 - 修改
innerText屬性：可以解析HTML文字標籤
- 修改
- 修改節點的CSS：
- 通過
style屬性修改對應的CSS
- 通過
<div id="test-div">
<p id="test-js">javascript</p>
<p>Java</p>
</div>
// 獲取<p>javascript</p>節點:
var js = document.getElementById("test-js");
// 修改文字為JavaScript:
js.innerText = 'JavaScript';
// 修改CSS為: color: #ff0000, font-weight: bold
js.style.color='red';
js.style.fontWeight='bold'; //注意駝峰命名
3. 刪除DOM節點
- 先獲取節點的父節點，通過父節點來刪除當前節點
<ul id="test-list">
<li>JavaScript</li>
<li>Swift</li>
<li>HTML</li>
<li>ANSI C</li>
<li>CSS</li>
<li>DirectX</li>
</ul>
//刪除與Web開發技術不相關的節點
var p = document.getElementById("test-list");
//刪除Swift
p.removeChild(p.children[1]);
//刪除ANSI C
p.removeChild(p.children[2]);
//刪除DirectX
p.removeChild(p.children[3]);
4. 插入DOM節點
-
當獲得了某個DOM節點，如果這個DOM節點是空的，那麼直接使用innerHTML就可以修改內容，即相當於插入例如新的DOM節點；如果這個DOM節點不是空的，就不能使用innerHTML做，會覆蓋。
-
兩個方法插入新的節點：
appendChild：把一個子節點新增到父節點的最後一個子節點
<p id="js">JavaScript</p> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="c++">C++</p> </div>//把<p id="js">JavaScript</p>新增到<div id="list">的最後一項 <script> var js = document.getElementById('js'); list = document.getElementById('list'); list.appendChild(js); </script>
- 動態從零建立一個新節點，實現插入：
<script>
var
list = document.getElementById('list');
database = document.createElement('p');
database.id = 'mysql';
database.innerText='MySQL';
list.appendChild(database);
</script>
//動態建立一個DOM節點然後新增到DOM樹中，可以實現很多功能。如：動態建立了一個<style>節點，然後把它新增到<head>節點的末尾，就動態地給文件添加了新的CSS
<script>
var d = document.createElement('style');
d.setAttribute('type','text/css');
d.innerHTML = 'p {color:red}';
document.getElementsByTagName('head')[0].appendChild(d);
</script>
insertBefore: 可以使用parentElement.insertBefore(newElement,referenceElement);，將newElement子節點插入到referenceElement之前
//把Hello插入到Python之前：
<script>
var ref = document.getElementById('python');
hello = document.createElement('p');
hello.id = 'hello';
hello.innerText = 'Hello';
list.insertBefore(hello,ref);
</script>
-
練習：
<ol id="test-list"> <li class="lang">Scheme</li> <li class="lang">JavaScript</li> <li class="lang">Python</li> <li class="lang">Ruby</li> <li class="lang">Haskell</li> </ol>按字串順序重新排序：
var list = document.getElementById('test-list'); var haskell = list.lastElementChild; var ref = list.children[1]; list.insertBefore(haskell,ref); var scheme = list.children[0]; list.appendChild(scheme);