JS-DOM

 

DOM（Document Object Model）

• DOM介紹
• DOM樹
• 節點類型
• 獲取DOM節點
• 獲取節點
• 獲取元素節點
• 獲取屬性節點
• 節點的經常使用屬性
• 節點間關係
• 父節點
• 子節點
• 第一個子節點
• 最後一個子節點
• 全部子節點
• 兄弟節點
• 下一個兄弟節點
• 上一個兄弟節點
• 操做DOM節點
• 建立節點
• 插入(移動)節點
• appendChild
• insertBefore
• 移動節點
• 刪除節點
• 複製節點
• 操做節點屬性
• 獲取屬性
• 直接操做
• 做爲節點操做
• 刪除屬性
• 設置屬性
• 直接操做和做爲節點操做注意事項
• innerHTML和innerText的區別
• document經常使用節點獲取

 

DOM介紹

DOM樹

HTML加載完畢後會生成一個DOM樹

• html、head、body、a等節點稱爲元素節點
• href等節點稱爲屬性節點
• innerHTML等節點稱爲文本節點

---

節點類型

<div>
	<!-- 註釋 -->text1
	text2
	<p>段落</p>
</div>

假設父元素是div標記，則：

• 第一行<div>後的換行和製表符被劃分爲一個文本節點(#text)
• 第二行的<!-- 註釋 -->是一個註釋節點(#comment)
• 第二行<!-- 註釋 -->後的text1和換行和製表符和text2和換行被劃分爲一個文本節點
• 第三行的<p>段落</p>是一個元素節點
• 第三行的<p>段落</p>後的換行是一個文本節點

因此div一共有5個子節點

獲取DOM節點

獲取節點

獲取元素節點

//單個
document.getElementById();
//數組
document.getElementsByClassName();
document.getElementsByTagName();

獲取屬性節點

元素節點.getAttributeNode(attributeName);

節點的經常使用屬性

例：

<div id="d">this is a div<!-- 註釋 --></div>

var d=document.getElementById("d");
console.log(d.firstChild);

輸出：

nodeName: "#text"		//節點名（文本節點）
nodeType: 3			//節點類型（1:元素 2:屬性 3:文本）
nodeValue: "this is a div"	//節點value
parentNode: HTMLDivElement	//父節點
parentElement: HTMLDivElement	//父元素節點
previousSibling: null		//上一個兄弟節點
nextSibling: Comment		//下一個兄弟節點（註釋）
length: 13			//長度
...

節點間關係

父節點

節點.parentNode

子節點

第一個子節點

IE六、七、8僅支持firstChild
fireFox、Chrome、IE9+支持firstChild和firstElementChild

IE六、七、8中的firstChild指第一個子標籤節點
fireFox、Chrome、IE9+中的firstChild指第一個子節點(包括換行、標籤、空文檔)
fireFox、Chrome、IE9+中的firstElementChild指第一個子標籤節點

因此考慮兼容性：

//IE 六、七、8
節點.firstChild

//fireFox、Chrome、IE9+
節點.firstElementChild

兩個屬性能夠這樣合併：

var 第一個子節 = 點節點.firstElementChild || 節點.firstChild
//優先使用firstElementChild，如果IE 六、七、8，由於不支持因此會用後者；而其餘瀏覽器則會使用前者

最後一個子節點

同上具備兼容性問題，語句爲：

節點.lastChild
節點.lastElementChild

全部子節點

標準屬性：childNodes

IE六、七、8中的childNodes指全部子元素節點
fireFox、Chrome、IE9+中的childNodes指全部子節點(包括換行、標籤、空文檔)

非標準屬性（雖不是標準屬性，但幾乎全部瀏覽器都支持）：children

fireFox、Chrome、IE9+中的children指全部子元素節點
IE六、七、8中的children還包含了註釋節點，要注意註釋不要寫操做節點裏面

使用時建議用children（注意不要寫註釋節點）來達到多瀏覽器兼容

兄弟節點

下一個兄弟節點

同獲取第一個子節點同樣具備兼容性問題，語句爲：

節點.nextSibling
節點.nextElementSibling

上一個兄弟節點

同獲取第一個子節點同樣具備兼容性問題，語句爲：

節點.previousSibling
節點.previousElementSibling

操做DOM節點

建立節點

var a=document.createElement("div");
var b=document.createElement("abc");
console.log(a);		//<div></div>
console.log(b);		//<abc></abc>
console.log(typeof a);	//object
console.log(typeof b);	//object

插入(移動)節點

appendChild

在指定節點內的最後插入

節點.appendChild(object)

insertBefore

在指定節點內的參考節點前插入，若找不到參考節點則按appendChild插到最後

節點.insertBefore(object,參考節點)

移動節點

<div id="d1">
   <p>1</p>
</div>
<div id="d2">
   <p>2</p>
</div>

var d1=document.getElementById("d1");
var p2=document.getElementById("d2").firstElementChild;
d1.appendChild(p2);	//p2移動到d1
d1.insertBefore(p2,d1.firstElementChild);	//p2移到p1前面

刪除節點

格式：

父節點.removeChild(object)

若要刪除本身，能夠：

node.parentNode.removeChild(node)

複製節點

格式：

節點.cloneNode(Boolean)

參數爲false(默認爲false)時，表示僅複製節點自己
參數爲true時，表示複製還全部子節點

例：

<div>
	111
	<a>baidu</a>
</div>

爲true時複製所有
爲false時僅複製：<div></div>，任何子節點都不復制（不只只有元素節點）

操做節點屬性

獲取屬性

例：

<img src="1.jpg" id="i1" class="imgs" alt="img1" />
var i1=document.getElementById("i1");

直接操做

i1.src		或   i1["src"]		--> http://localhost/test/1.jpg
i1.className	或   i1["className"]	--> imgs
i1.alt		或   i1["alt"]		--> img1
i1.width	或   i1["width"]		--> 63

直接操做獲取的src是絕對路徑，由於直接讀取的是系統屬性
class要寫爲className，由於系統中存儲的是className屬性
獲取width時雖然標籤中沒有聲明，但由於是讀取系統屬性因此仍能夠讀出來

做爲節點操做

i1.getAttribute("src")		--> 1.jpg
i1.getAttribute("class")	--> imgs
i1.getAttribute("alt")		--> img1
i1.getAttribute("width")	--> null

使用getAttribute至關於直接讀取html文檔中的屬性節點，不是讀取系統屬性
因此獲取src和class時不用考慮系統屬性名和系統中屬性值是否與html文檔相同的問題
讀取width時由於標籤中沒有聲明，因此找不到width，此時應該用直接操做

刪除屬性

格式：

node.removeAttribute(attribute)

設置屬性

格式：

node.setAttribute(attribute,value)

直接操做和做爲節點操做注意事項

直接操做操做的是系統中的屬性，做爲節點操做操做的是標籤上的屬性節點
例子：

i1.a="abc";
console.log(i1.a);	//abc
console.log(i1.getAttribute("a"));	//null

i1.setAttribute("b","def");
console.log(i1.b);	//undefined
console.log(i1.getAttribute("b"));	//def

因此二者不可混用

innerHTML和innerText的區別

<div id="d">
	aaa
	<div>
		div2
	</div>
</div>

上面的HTML片斷中，運行如下打碼：

console.log(d1.innerText);	// aaa div2
console.log(d1.innerHTML);	//2-5行所有輸出

d1.innerText="<p>text</p>";	//此時的  <  >  被做爲字符串被轉換爲  &lt;  &gt;
console.log(d1.innerHTML);	//&lt;p&gt;text&lt;/p&gt;
//！在設置 文本節點 時同時覆蓋了全部 其餘節點

d1.innerHTML="<p>text</p>";	//p標籤做爲正常的元素節點，不會被轉換

document經常使用節點獲取

屬性
document.title	獲取head裏的title
document.head	獲取head標籤
document.body	獲取body標籤
document.documentElement	獲取html標籤(注意不是.html)