javascript筆記--（第十九章）DOM

2024-04-27 15:08:27

字體：大中小

來源：轉載

供稿：網友

DOM

DOM中的三個字母，D（文檔）可以理解為整個Web加載的網頁文檔；O（對象）可以理解為類似window對象之類的東西，可以調用屬性和方法，這里我們說的是document對象；M（模型）可以理解為網頁文檔的樹型結構

節點

加載HTML頁面時，Web瀏覽器生成一個樹型結構，用來表示頁面內部結構。DOM將這種樹型結構理解為由節點組成。

節點種類

節點總共分為三類：元素節點、文本節點、屬性節點

查找元素

W3C提供了比較方便簡單的定位節點的方法和屬性，以便我們快速的對節點進行操作。分別為：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

當我們獲取到特定元素節點時，這個節點對象就被我們獲取到了，而通過這個節點對象，我們可以訪問它的一系列屬性

<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body>	<div style="color:black" id="box" title="mytitle" class="class" bbb="bbb_value">		hello	</div>	<input id="input" type="text" value="123"/>	<input id="input1" type="radio" checked/></body><script type="text/javascript">	document.getElementById('box').id;//獲取id	//document.getElementById('box').id = 'person';//設置id	document.getElementById('box').title;//獲取title	document.getElementById('box').title = 'new_title';//設置title	document.getElementById('box').style;//獲取CSSStyleDeclaration對象	document.getElementById('box').style.color;//獲取style對象中color的值	document.getElementById('box').style.color = 'red';//設置style對象中color的值	document.getElementById('box').className;//獲取class	document.getElementById('box').className = 'box';//設置class		document.getElementById('box').getAttribute('className');//非IE不支持		console.log(document.getElementById('box').bbb);//獲取自定義屬性的值，非IE不支持	document.getElementById('box').setAttribute("bbb","new_bbb_value");	console.log(document.getElementById('box').getAttribute("bbb"));//new__bbb_value	document.getElementById('box').removeAttribute("bbb");//刪除屬性	console.log(document.getElementById('box').getAttribute("bbb"));//null	console.log(document.getElementById('input').value);//1234	console.log(document.getElementById('input1').checked);//true</script> </html>DOM節點
node節點屬性
節點可以分為元素節點、屬性節點和文本節點，而這些節點又有三個非常有用的屬性，分別為：nodeName、nodeType和nodeValue<script type="text/Javascript">	console.log(document.getElementById('box').nodeType);//1，元素節點	console.log(document.getElementById('box').nodeName);//Div	console.log(document.getElementById('box').getAttribute("style").nodeValue);//undefined,getAttribute獲取的是值，不是屬性節點	console.log(document.getElementById('box').attributes.item(0).nodeValue);//color:black</script> 層次節點屬性
節點的層次結構可以劃分為：父節點與子節點、兄弟節點這兩種。當我們獲取其中一個元素節點的時候，就可以使用層次節點屬性來獲取它相關層次的節點。<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body>	<div style="color:black" id="box" title="mytitle" class="class" bbb="bbb_value">		<span>hello1</span>		<span>hello2</span>		<span>hello3</span>	</div></body><script type="text/javascript">	var div = document.getElementById('box')	console.log(div.innerHTML);	/*		<span>hello1</span>		<span>hello2</span>		<span>hello3</span>	*/	console.log(div.childNodes.length);//得到子節點個數，IE3個，非IE7個，換行會產生空白節點	console.log(div.childNodes[0].nodeValue);//輸出空白	console.log(div.attributes['bbb'].nodeValue);//bbb_value	console.log(div.attributes.getNamedItem('bbb').nodeValue);//和上面效果一樣	console.log(div.firstChild.nodeValue);//輸出空白	console.log(div.firstChild.innerHTML);//undefined	console.log(div.lastChild.nodeValue);//輸出空白	console.log(div.ownerDocument);//#document	console.log(div.childNodes[0].nextSibling.innerHTML);//hello1	console.log(div.childNodes[2].PReviousSibling.innerHTML);//hello2	console.log(div.parentNode);//body對象</script> </html>注意：在獲取到文本節點的時候，是無法使用innerHTML這個屬性輸出文本內容的。這個非標準的屬性必須在獲取元素節點的時候，才能輸出里面包含的文本；在非IE中，標準的DOM具有識別空白文本節點的功能，所以在火狐瀏覽器是7個，而IE自動忽略了，如果要保持一致的子元素節點，需要手工忽略掉它。節點操作
DOM不單單可以查找節點，也可以創建節點、復制節點、插入節點、刪除節點和替換節點。<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body></body><script type="text/javascript">	document.write("<div id='box'></div>");	var span = document.createElement("span");	var text = document.createTextNode("hello");	span.appendChild(text);	document.getElementById("box").appendChild(span);	var h = document.createElement("h1");	var text1 = document.createTextNode("h1");	h.appendChild(text1);	document.getElementById("box").insertBefore(h,span);	var input = null;	input = document.createElement('input');	input.setAttribute('type', 'radio');	input.setAttribute('name', 'sex');	document.getElementById("box").appendChild(input);	//替換節點	var text2 = document.createTextNode("new_hello");	span.replaceChild(text2,span.childNodes[0]);	//克隆節點	var span1 = span.cloneNode(true);//true會復制內容，否則只復制結構	span1.id = "span1";	document.getElementById("box").appendChild(span1);	//刪除節點	document.getElementById("box").removeChild(document.getElementById("span1"));</script></html>