JavaScript學習筆記十四 —— 操作DOM對象

JavaScript學習筆記十四 —— 操作DOM對象

---

參考教程B站狂神https://www.bilibili.com/video/BV1JJ41177di

---

DOM：文檔對象模型

核心

瀏覽器網頁就是一個DOM樹形結構！

• 更新：更新DOM節點
• 遍歷dom節點：得到DOM節點
• 刪除：刪除DOM節點
• 添加：添加一個新的節點

要操作一個dom節點，就必須要獲得這個dom節點

獲得dom節點

<div id="father">
    <h1>標題一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //對應css選擇器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');
    
    var childrens = father.children; //獲取父節點下的所有子結點
    father.firstChild; //獲取第一個子結點
    father.lastChild; //獲取第二個子結點
</script>

這是原生代碼，之後通常都是用jQuery()

更新dom節點

id.innerText='內容' //修改文本內容
id.innerHTML='HTML代碼' //修改HTML代碼

id.style.color = 'red'; //注意使用字符串
id.style.fontSize = '20px' //駝峯命名，不支持用-
id.style.padding = '2em'

刪除節點

• 現獲取父節點
• 再通過父節點刪除

<div id="father">
    <h1>標題一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self);

	//刪除是一個動態的過程
	father.removeChild(father.children[0]);
	father.removeChild(father.children[1]);
	father.removeChild(father.children[2]);
	//這樣刪會報錯的，因爲children[0]被刪了之後會動態變化，children[1]會變成children[0]
</script>

創建和插入DOM節點

我們獲得了某個Dom節點，如果這個dom節點是空的，我們通過innerHTML就可以增加一個元素了，但是這個DOM節點已經存在元素了，我們就不能這麼幹了，會產生覆蓋。

<p id="js">JavaScrip</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaSE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('id');
    var list = document.getElementById('list');
    list.appendChild(js); //追加到後面
</script>

    //通過JS 創建一個新的節點
    var newP = document.createElement('p'); //創建一個p標籤
    newP.id = 'newP';
    newP.innerText = 'Hello,word';

    list.append(newP); //添加節點

	//創建一個標籤接節點
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

insert

list.insertBefore(新節點，原來的節點);  //把新節點插入到原來的節點前面