JavaScript之DOM

阿新 • • 發佈：2018-12-18

通過 HTML DOM ，可以訪問JavaScript HTML 文件的所有元素

一、 document 物件概述

· 每個載入瀏覽器的 HTML 文件都會成為 document 物件； · 通過使用document 物件，可以從指令碼中對 HTML 頁面中的所有元素進行訪問； · document 物件是window 物件的一部分，可通過window.document 屬性對其進行訪問。

二、HTML DOM

· 當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）; · HTML DOM 模型被構造為物件的樹。

1. DOM 樹

DOM樹結構示意圖 HTML 文件中的所有節點組成了一個文件樹（或節點樹）。

HTML 文件中的每個元素、屬性、文字等都代表著樹中的一個節點。 · 整個文件是一個文件節點，每個 HTML 標籤是一個元素節點，包含在 HTML 元素中的文字是文字節點，每一個 HTML 屬性是一個屬性節點，註釋屬於註釋節點，一切皆節點。 通過可程式設計的物件模型，JavaScript有能力來建立動態的 HTML。 · JavaScript 能夠改變頁面中的所有 HTML 元素 · JavaScript 能夠改變頁面中的所欲 HTML 屬性 · JavaScript 能夠改變頁面中的所有 CSS 樣式 · JavaScript 能夠對頁面中的所有事件做出反應 DOM 樹的根節點為 document 物件，可以通過 document 物件，來操作整個節點樹。

一棵節點樹中的所有節點彼此都有關係，父節點-子節點-後代-···

2. DOM 樹操作

通過可程式設計的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML · 查詢節點 · 讀取節點資訊 · 修改節點 · 建立新節點 · 刪除節點

（1）.節點資訊

· nodeName（節點名稱）：元素節點和屬性節點的nodeName 為標籤或屬性名稱；文字節點的nodeName 永遠是 #text；文件節點的nodeName 永遠是 #document. · nodeType（節點型別）：返回數值。元素節點返回1；屬性節點返回2；文字節點返回3；註釋節點返回8；文件節點返回9。

<img src="../images/234/jpg" id="xylm" >

//在js中新增輸出 img 節點資訊
var a = document.getElementById("xylm");
alert(a.nodeName); //IMG
alert(a.nodeType); //1
alert(a.nodeValue); //null

（2）.元素節點的內容

· innerText：設定或獲取位於物件起始和結束標籤內的文字 · innerHTML：設定或獲取位於物件起始和結束標籤內的 HTML 使用 innerHTML ，標籤內怎麼寫，就怎麼取，包括標籤和換行

<div id="test">
   <span style="color:blue">test1</span><span>test2</span>
   <span>test3</span>
</div>
<script type="text/javascript">
       var a = document.getElementById("test");
       alert(a.innerText);
       alert(a.innerHTML);
   </script>

innerTest innerHTML

（3）.節點屬性

· getAttribute()：根據屬性名稱獲取屬性的值 · setAttribute()：根據屬性名稱設定屬性的值

<div>
       <a href="Default.aspx" title="this is a link" id="a1">
           Click Me
       </a>
   </div>
   <script type="text/javascript">
       var a = document.getElementById("a1");
       var hf = a.getAttribute("href");
       alert(hf); //Default.aspx
       alert(a.innerHTML); //Click Me
   </script>

（4）.元素節點的樣式

· style 屬性：node.style.color 、node.style.fontSize · className 屬性：x.className = “樣式類名稱”;

<p id="p1">DOM </p>
<script>
   var p = document.getElementById("p1");
   p.style.color = "red";
   p.style.fontSize = 20；
   //或者 p.className = "樣式類名稱";
</script>

（5）.建立新節點

· document.createElement(elementName)：elementName 要建立的元素標籤名稱，返回新建立的節點 · 設定節點資訊

//建立新節點
var newNode = document.createElement("input");
//設定節點的資訊
newNode.type="text";
newNode.value="mary";
newNode.style.color="red";

（6）.新增新節點

· parentNode.appendChild(newNode)：追加新節點作為父節點的最後一個子節點存在 · parentNode.insertBefore(newNode,refNode)：refNode是參考節點，新節點位於此節點之前新增新節點

//新增新節點
//建立一個新的文字框
//文字框加入到 form 中，作為 form 的最後一個子節點
//建立一個新的 h1節點，加入到原有按鈕之前
<body>
	<form id="form1">
		<input id="btn1" type="button" value="新增新節點" onclick=“createNewNode();” />
	</form>
</body>
<script>
	function createNewNode(){
		var form = document.getElementById("form1");
		//建立一個新的文字框節點
		var textNode = document.createElement("input");
		textNode.type = "text";
		textNode.value = "mary";
		//加入到 form 中，作為 form 的最後一個子節點
		form.appendChild(textNode);
		
		//建立一個新的 h1 節點，加入到原有按鈕之前
		var h1Node = document.createElement("h1");
		h1Node.innerHTML = "h1 text";
		form.insertBefore(h1Node,document.getElementById("btn1");
	}
</script>

（7）.刪除節點

· node.removeChild(childNode)：刪除某個子節點，childNode 必須是 node 的子節點 · childNode.parentNode.removeChild(childNode)：由父節點刪除其下屬的某個子節點

//刪除節點
<style>
	div {
		border:1px solid black;
		width:100px;
		height:70px;
}
<style>
<form>
	<input id = "btn1"  type = "button"  value = "刪除節點" onclick = "deleteNode();"/>
	<div id="div1">
		<a href="a">link1</a>
		<p>段落</p>
	</div>
</form>
<script>
	function deleteNode(){
		var delNode = document.getElementById("div1");
		delNode.parentNode.removeChild(delNode);
}
<script>

3. 查詢 HTML 元素

為了通過JavaScript 操作 HTML 元素，必須首先找到該元素 · 通過 id 找到 HTML 元素 · 通過標籤名找到 HTML 元素 · 通過類名找打 HTML 元素（系統沒有提供方法，需要自己進行編寫。思路：先找到所有的標籤，將其裝入一個數組內，然後根據方法傳入的引數，尋找對應要找到的class 類，最後將找到的對應類的元素裝入另一個數組內） · 通過層次（節點關係）找到 HTML 元素 · 通過 name 屬性找到 HTML 元素

（1）.通過 id 查詢 HTML 元素

在 DOM 中查詢的 HTML 元素的最簡單方法，就是通過使用元素的 id。

//查詢 id="name" 的元素
var name = document.getElementById("name");

（2）.通過標籤名查詢 HTML 元素

根據標籤名查詢的結果為使用該標籤的所有元素，即為一個數組，可使用 length 屬性獲取個數

//查詢 id = "user" 的元素，然後查詢“user” 中的所有<input>元素
var user = document.getElementById("user");
var p = user.getElementByTagName("p");

（3）.根據層次查詢 HTML 元素

parentNode、firstChild 和 lastChild，遵循文件的上下層次結構，查詢單個節點 childNodes ，遵循文件的上下層次結構，查詢多個節點 previousSibling，前一個同級節點 nextSibling，後一個同級節點

//根據層次查詢節點
<p>段落文字</p>
<select id="select1">
	<option value="1">a</option>
	<option value="2">b</option>
	<option value="3">c</option>
</select><a href="me.html">click me</a>
<script>
	var s1 = document.getElementById("select1");
	//子節點
	alert(s1.childNodes.length); //7
	var o1 = s1.firstChild;
	alert(o1.innerHTML);// undefined
	//同級節點
	alert(s1.nextSibling.innerHTML);// click me
	alert(s1.previousSibling.innerHTML); //undefined
</script>

在 HTML 文件中，空白部分也是節點。 所以上述程式碼中的 s1節點長度為7，s1 的首個子節點為空。

//若將 html 程式碼修改為如下格式，即刪除上述程式碼中的空白部分
<p>段落文字</p>
<select id="select1"><option value="1">a</option><option value="2">b</option><option value="3">c</option></select><a href="me.html">click me</a>
<script>
	var s1 = document.getElementById("select1");
	//子節點
	alert(s1.childNodes.length); //3
	var o1 = s1.firstChild;
	alert(o1.innerHTML);// a
	//同級節點
	alert(s1.nextSibling.innerHTML);// click me
	alert(s1.previousSibling.innerHTML); //段落文字
</script>

（4）.根據 name 屬性查詢節點

<input type="radio" name="sex" value="0"/>male
<input type="radio" name="sex" value="1"/>female
<br><br>
<input type="radio" name="state" value="0"/>開通
<input type="radio" name="state" value="1"/>暫停
<input type="radio" name="state" value="2"/>刪除

<script>
	var nodes = document.getElementsByName("sex");
    alert(nodes.length); //2

     nodes = document.getElementsByName("state");
     alert(nodes.length); //3
</script>

4.常用 HTML DOM 物件

HTML 標籤物件化，就是將網頁中的每個元素都看作一個物件 常用 HTML DOM 物件

<form id="form1">
	<input type="button" value="建立新節點" onclick="createNewNode();"/>
</form>
<script>
	funcation createNewNode(){
		var form = document.getElementById("form1");
		//建立一個新的圖片物件，加入到 form 中
		var newNode = new Image();
		newNode.src = "a.jpg";
		form.appendChild(newNode);
	}
</scrpti>

（1）.標準 DOM 與 HTML DOM

· 標準 DOM 提供了統一的操作介面 - createElement - appendChild - setAttribute - removeAttribute - nodeName - … · HTML DOM 提供了封裝好的各種物件 - Image - Select - Option - …

//標準 DOM 的實現方式
var newNode = document.createElement("img");
// HTML DOM 的實現方式
var newNode = new Image();

（2）.標準 DOM 與 HTML DOM 操作

· 操作節點，如建立、刪除、查詢等，使用標準 DOM 操作 · 操作屬性，如讀取或者修改屬性的值，使用 HTML DOM 操作

（3）.Select 物件與Option 物件

· Select 物件代表 HTML 表單中的一個下拉列表 - 標籤即表示一個 Select 物件 - 常用屬性：options、selectedIndex、size - 常用方法：add(option)、remove(index) - 事件：onchange

<select id="sel1" onchange="showInfo();">
	<option value="11">aa</option>
	<option value="22">bb</option>
</select>

· Option 物件代表 HTML 表單中下拉列表中的一個選項 - 標籤表示一個 Option 物件 - 建立物件：var o = new Option(text,value); - 常用屬性：index、text、value、selected

function showInfo() {
	var selObj = document.getElementById("sel1");
	var i = selObj.selectedIndex;
	alert(selObj.options[i].value);
}
function selFunc(){
	var selObj = document.getElementById("s1");
	var value = selObj.options[selObj.selectedIndex].value;
	alert(value);
	
	var option = new Option("cc","33");
	selObj.add(option);
}

<select id="s1" onchange="selFunc();">
	<option value="1">aa</option>
	<option value="2">bb</option>
</select>

（4）.Table 物件

· Table 物件代表一個 HTML 表格 -

標籤表示一個 Table 物件 - 常用屬性：rows、cells - 常用方法：insertRow(index)：返回 TableRow 物件，TableRow 物件代表一個 HTML 表格行； deleteRow(index)

<table id = "t1"  border="1" width="100">
	<tr>
		<td rowspan="2">a</td>
		<td>b</td>
	</tr>
	<tr>
		<td>c</td>
	</tr>
</table>

<script>
	var table = document.getElementById("t1");
	alert(table.rows.length); //2
	alert(table.cells.length); //3
</script>

（5）.TableRow 物件

· TableRow 物件代表一個 HTML 表格行 - 標籤表示一個 TableRow 物件 - 常用屬性：cells、innerHTML、rowIndex - 常用方法：insertCell(index)：返回 TableCell 物件 deleteCell(index)

var table = document.getElementById("t1");
alert(table.rows[0].cells.length);	 //2
alert(table.rows[1].cells.rowIndex);	//1

（6）.TableCell 物件

· TableCell 物件代表一個 HTML 表格單元格 - 標籤表示一個 TableCell 物件 - 常用屬性：cellIndex、innerHTML、colSpan、rowSpan

var table = document.getElementById("t1");
alert(table.rows[0].cells[0].rowSpan);	//2
alert(table.rows[1].cells[1].innerHTML);	//c

（7）.Screen 物件

· Screen 物件包含有關客戶端顯示螢幕的資訊 - 常用於獲取螢幕的解析度和色彩 - 常用屬性：width/height，availWidth/availHeight

（8）.History 物件

· History 物件包含使用者（在瀏覽器視窗中）訪問過的 URL - length 屬性：瀏覽器歷史類列表中的 URL 數量 - 方法：back()，forward()，go(num)

alert(history.length);
history.forward();	//等同於單擊“前進”按鈕
history.back(); 	//等同於單擊"後退"按鈕
history.go(-2);	//等同於單擊兩次"後退"按鈕

（9）.Location 物件

· Location 物件包含有關當前 URL 的資訊，常用於獲取當前網址和改變當前網址 · href 屬性：當前視窗正在瀏覽的網頁地址 · 方法：replace(url)：轉到url 網頁地址 reload()：重新載入當前網址，效果同按下重新整理按鈕

location.href = "http://www.baidu.com";
//或者
location.replace("http://www.baidu.com");

（10）.navigator 物件

· navigator 物件包含有關瀏覽器的資訊，常用於獲取客戶瀏覽器和作業系統資訊。

//遍歷 navigator 物件的所有屬性
var showText = "Navigator 物件屬性列表:\n";
for (var propname in navigator){
	showText += propname +":"+navigator[propname]+"\n";
}
alert(showText);