JavaScript基礎之DOM操作

DOM的結構

• Document節點
• 標籤節點，或者叫元素節點
• 文位元組點

DOM節點元素的獲取

1. var a = document.getElementByID("div1"); 由於ID的唯一性，返回值是DOM元素本身，只用於document。
2. var b = div1.getElementsByClassName("p2");獲取的是一個陣列，不僅可以用於document 也可以用域父級元素。
3. var c = div1.getElementsByTagName("div"); 同上。
4. 還有一些其他的方法如：getElementsByAttribute( attrib, value ):等

DOM節點的建立，新增與刪除

1. var div1 = document.createElement("div");建立div 節點；
2. div0.appendChild(div1); 把div1新增到div0裡面；
3. div0.removeChild(div1); 把div1從div0裡面刪除掉； div1.parentNode.removeChild(div1);在不獲取父級元素的情況下刪除節點；
4. var pTxt = document.createTextNode("content");建立文位元組點；div1.appendChild(pTxt);新增文位元組點；

DOM元素的修改

1. 屬性的修改：
   • html自帶的屬性直接用"."獲取：img1.id, img1.src等；但是有兩個特例需要注意：
     1. 獲取修改class屬性，由於class 是js的關鍵字：img1.className = "container";
     2. style屬性可以層疊，如：img1.style.width = "100px"; img1.style.color = "red";
   • 自定義的屬性：
     1. 獲取：img1.getAttribute("屬性名");
     2. 新增和設定：img1.setAttribute("屬性名","屬性值");
     3. 刪除：img1.removeAttribute("屬性名");
2. 內容的修改：
   • p1.innerHTML = "內容"; 支援HTML格式，可以含有HTML標籤，並可以被識別；
   • p1.textContent = "內容"; 文字格式
   • p1.innerText = "內容"; 文字格式 （區別是會觸發重排？）