操作DOM物件

目錄

• 操作DOM物件
  • 1. 核心
  • 2. 獲得Dom節點
  • 3. 更新節點
    • 1. 操作文字
    • 2. 操作CSS
  • 4. 刪除節點
  • 5. 插入節點
    • 1. 追加（將已存在的節點移到後面）
    • 2. 建立一個新的標籤,實現插入
    • 3. insertBefore

DOM:文件物件模型

1. 核心

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

• 更新：更新Dom節點
• 遍歷Dom節點：得到Dom節點
• 刪除：刪除一個Dom節點
• 新增：新增一個新的節點

2. 獲得Dom節點

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

//對應CSS選擇器
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let children = father.children;     //獲取父節點下的所有子節點
// father.firstChild;
// father.lastChild;
 

這是原生程式碼，之後我們儘可能使用jQuery

3. 更新節點

<div id="id1">
    123
</div>

<script>
    let id1 = document.getElementById('id1');
</script>

1. 操作文字

• id1.innerText='改變後'	;		//修改文字的值
  

• id1.innerHTML='<strong>123</strong>'	;//可以解析HTML文字標籤
  

2. 操作CSS

id1.style.color = 'red';
id1.style.fontSize = '200px';		//注意此處為駝峰命名，並不是CSS中的下劃線命名
id1.style.padding = '2em';
 

4. 刪除節點

刪除節點的步驟：先獲取父節點，再通過父節點刪除自己

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

<script>
	let self = document.getElementById('p1');	//要刪除的當前節點
    let father = p1.parentElement;				//找到其父節點
    father.removeChild(self);					//通過父節點(father)刪除該節點(self)
    
    //刪除是一個動態的過程：
    //以下的操作是錯誤的
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[3]);
</script>
 

注意：刪除多個節點的時候，children是在時刻變化的，刪除節點的時候一定要注意！

5. 插入節點

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

1. 追加（將已存在的節點移到後面）

<p id="js">JavaScript</p>

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

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

2. 建立一個新的標籤,實現插入

<script>
    let
        js = document.getElementById('js');     //已存在的節點
        list = document.getElementById('list');
    //通過JS 建立一個新的節點
    let newP = document.createElement('P');     //建立一個P標籤
    newP.id = 'newP';
    newP.innerText = 'Hello, administrator!';
    list.appendChild(newP);
    //建立一個標籤節點 （通過這個屬性，可以設定任意的值）
	let myScript = document.createElement('script');
	myScript.setAttribute('type', 'text/javascript');
    //可以建立一個style標籤
    let myStyle = document.createElement('style');                  //建立了一個空style標籤
    myStyle.setAttribute('type', 'text/css');
    myStyle.innerHTML = 'body{background-color: red;}';             //設定標籤內容
    document.getElementsByTagName('head')[0].appendChild(myStyle);  //將設定好的標籤插入到head節點下，注意，TagName返回的是一個數組！

</script>

3. insertBefore

let ee = document.getElementById('ee');
let js = document.getElementById('js');
//要包含的節點.insertBefore(newNode,targetNode)
let list = document.getElementById('list');
list.insertBefore(js,ee);