JavaScript物件程式設計

靜_步發表於2020-12-12

JavaScript是基於物件的程式語言，通過物件的組織層次來訪問並給物件施以相應的操作方法，可大大簡化JavaScript程式設計，並提供直觀、模組化的方式進行指令碼程式開發。

1.文件物件模型（DOM）

什麼是 DOM？
DOM 是 W3C（全球資訊網聯盟）的標準。
DOM 定義了訪問 HTML 和 XML 文件的標準：
“W3C 文件物件模型（DOM）是中立於平臺和語言的介面，它允許程式和指令碼動態地訪問和更新文件的內容、結構和樣式。”
W3C DOM 標準被分為 3 個不同的部分：
核心 DOM - 針對任何結構化文件的標準模型
XML DOM - 針對 XML 文件的標準模型
HTML DOM - 針對 HTML 文件的標準模型
什麼是 XML DOM？
XML DOM 定義了所有 XML 元素的物件和屬性，以及訪問它們的方法。
什麼是 HTML DOM？
HTML DOM 定義了所有 HTML 元素的物件和屬性，以及訪問它們的方法。

1.1文件物件模型（DOM）簡介

DOM採用直觀、一致的方式對結構化文件進行模組化處理，形成一棵樹形結構的文件樹，從而提供了訪問、修改該文件的簡易程式設計介面。所以，一旦掌握了DOM程式設計模型，就擁有了使用JavaScript指令碼動態修改HTML頁面的能力。
DOM提供了訪問結構化文件的一種方式，但DOM並不是一種技術，它只是訪問結構化文件的一種思想。
對於支援DOM模型的瀏覽器而言，但瀏覽器裝載一個HTML頁面後，瀏覽器內部已經得到了該HTML文件對應的DOM樹。通過JavaScript指令碼修改這顆DOM樹，瀏覽器裡的HTML頁面會隨之發生變化。

（1）HTML DOM 節點

在 HTML DOM 中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
DOM 節點
根據 W3C 的 HTML DOM 標準，HTML 文件中的所有內容都是節點：

整個文件是一個文件節點
每個 HTML 元素是元素節點
HTML 元素內的文字是文字節點
每個 HTML 屬性是屬性節點
註釋是註釋節點

HTML DOM 節點樹
在這裡插入圖片描述
可通過節點的 innerHTML 屬性來訪問文字節點的值。

(2)HTML DOM 方法

方法是我們可以在節點（HTML 元素）上執行的動作。

getElementById()	返回帶有指定 ID 的元素
getElementsByTagName()	返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點陣列）
getElementsByClassName()	返回包含帶有指定類名的所有元素的節點列表
appendChild()	把新的子節點新增到指定節點
removeChild()	刪除子節點
replaceChild()	替換子節點
insertBefore()	在指定的子節點前面插入新的子節點
createAttribute()	建立屬性節點
createElement()	建立元素節點
createTextNode()	建立文字節點
getAttribute()	返回指定的屬性值
setAttribute()	把指定屬性設定或修改為指定的值

(3)HTML DOM 屬性

屬性是節點（HTML 元素）的值.。

innerHTML 屬性	innerHTML 屬性用於獲取或替換 HTML 元素的內容
nodeName 屬性	nodeName 屬性規定節點的名稱
nodeValue 屬性	nodeValue 屬性規定節點的值
nodeType 屬性	nodeType 屬性返回節點的型別。nodeType 是隻讀的

nodeName 屬性
nodeName 是隻讀的
元素節點的nodeName與標籤名相同
屬性節點的nodeName與屬性名相同
文字節點的nodeName始終是 #text
文件節點的 nodeName始終是#document
nodeName 始終包含 HTML 元素的大寫字母標籤名
2.nodeValue
元素節點的 nodeValue 是 undefined 或 null
文字節點的 nodeValue 是文字本身
屬性節點的 nodeValue 是屬性值
3.nodeType 屬性

元素型別	NodeType
元素	1
屬性	2
文字	3
註釋	8
文件	9

（4）HTML DOM 訪問

getElementById() 方法返回帶有指定 ID 的元素：

document.getElementById("intro");

getElementsByTagName() 返回帶有指定標籤名的所有元素：

document.getElementsByTagName("p");

getElementsByClassName() 方法查詢帶有相同類名的所有 HTML 元素：

document.getElementsByClassName("intro");

（5）HTML DOM - 修改

修改 HTML = 改變元素、屬性、樣式和事件

1).修改 HTML 元素

修改 HTML DOM 意味著許多不同的方面：

改變 HTML 內容
改變 CSS 樣式
改變 HTML 屬性
建立新的 HTML 元素
刪除已有的 HTML 元素
改變事件（處理程式）

2).建立 HTML 內容

改變元素內容的最簡答的方法是使用 innerHTML 屬性
除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內容

<html>
<body>

<p id="demo1">Hello World!</p>

<script>
document.getElementById("demo1").innerHTML="New text!";
</script>

</body>
</html>

3).改變 HTML 樣式


<html>

<body>
<p id="demo2">Hello world!</p>

<script>
document.getElementById("demo2").style.color="blue";
</script>

</body>
</html>

在這裡插入圖片描述

4).建立新的 HTML 元素

如需向 HTML DOM 新增新元素，您首先必須建立該元素（元素節點），然後把它追加到已有的元素上

<div id="demo3">
<p id="demo4">This is a paragraph.</p>
<p id="demo5">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");//建立了一個新的 <p> 元素
var node=document.createTextNode("This is new.");//建立文字節點
para.appendChild(node);//向 <p> 元素追加文字節點

var element=document.getElementById("demo3");//查詢到一個已有的元素
element.appendChild(para);//向這個已存在的元素追加新元素
</script>

在這裡插入圖片描述

(6)HTML DOM - 事件

HTML 事件的例子：

當使用者點選滑鼠時
當網頁已載入時
當圖片已載入時
當滑鼠移動到元素上時
當輸入欄位被改變時
當 HTML 表單被提交時
當使用者觸發按鍵時

1).onload 和 onunload 事件

當使用者進入或離開頁面時，會觸發 onload 和 onunload 事件。
onload 事件可用於檢查訪客的瀏覽器型別和版本，以便基於這些資訊來載入不同版本的網頁。
onload 和 onunload 事件可用於處理 cookies。

2)onchange 事件

onchange 事件常用於輸入欄位的驗證

3)onmouseover 和 onmouseout 事件

在滑鼠指標移動到或離開元素時觸發函式

2.視窗（window）物件

window物件在客戶端JavaScript中扮演重要的角色，它是客戶端程式的全域性物件，也是客戶端物件層次的根。它是JavaScript中最大的物件，它描述的是一個瀏覽器視窗。

2.1視窗介紹

window物件代表瀏覽器的框架或者瀏覽器的視窗。通過window物件的某些屬性，可以查詢到使用者所使用的是哪一種瀏覽器、使用者所訪問過的頁面的歷史記錄以及瀏覽器視窗的大小、使用者計算機螢幕的大小等資訊。還可以使用window物件來訪問或修改瀏覽器狀態列中顯示的文字資訊、在瀏覽器中載入一個新頁面，甚至開啟一個新的瀏覽器視窗。
window物件是一個全域性物件，因此可以直接使用全域性物件的屬性和方法，而無需寫出全域性物件的物件名。

2.2對話方塊

（1）彈出對話方塊
alert()—彈出一個包含“確定”按鈕的對話方塊
（2）選擇對話方塊
confirm()—彈出一個包含“確定”和“取消”按鈕的對話方塊，如果單擊“確定”，則返回true，如果單擊“取消”，則返回false
（3）輸入對話方塊
prompt()----彈出一個包含“確定”按鈕、“取消”按鈕和一個文字框的對話方塊，可以接收使用者輸入的資訊。如果單擊“確定”，則返回文字框已有內容，如果單擊“取消”，則返回null

2.3視窗操作

瀏覽網頁時，經常通過超連結或按鈕開啟一個新視窗，通常視窗裡會顯示新的頁面內容，實現彈出視窗使用window物件的open()方法即可。

open(<URL>,<視窗名稱>，<引數>);

（1）URL:指定新視窗要開啟頁面的URL地址，如果為空，則不開啟任何網頁。
（2）視窗名稱：指定被開啟新視窗的名稱，可以使用“_top”，“_blank”等內建名稱。這裡的名稱跟<a href …target >裡面的“target”屬性是一樣的。
（3）引數：指定被開啟新視窗的外觀。如果只需開啟一個普通視窗，該引數為空即可。多個引數之間用逗號隔開。

3.文件物件

瀏覽器在載入文件元素時，會自動在客戶端宿主環境中檢索並構造文件元素物件，然後把同類元素物件的引用地址儲存在對應的陣列中，並把這個陣列定義為Document物件的一個屬性。
form物件、image物件、applet物件還可以直接使用name屬性訪問。

4.表單物件

4.1form物件

表單是頁面元素的一種，隸屬於Document物件，表單元素也是以陣列的形式組織，根據表單在頁面中的位置先後次序，依次排列形成表單陣列。

4.2form物件屬性與方法

屬性	描述
action	設定或返回表單action屬性
enctype	設定或返回表單用來編碼內容的MIME型別
id	設定或返回表單id
length	返回表單中元素數目
method	設定或返回將資料傳送到伺服器的http方法
name	設定或返回表單的名稱
target	設定或返回表單提交結果的Frame或Window名

方法	描述
reset()	把表單的輸入元素重置為它們的預設值
submit()	提交表單

4.3下拉選單

一個完整的下拉選單由select元素物件和option元素物件組成，前者表示下拉選單的整個框架，後者則表示下拉選單中的每個具體選項。select元素物件對應於網頁中的下拉選單，由<select>和</select>標籤來表示；option元素物件對應下拉選單中的選項，由<option>和</option>標籤來表示，且巢狀在select元素中。
表單中<select>標籤每出現一次，一個select物件就會被建立。可以通過遍歷表單的elements[]陣列來訪問select物件，也可以使用document.getElementById()方法訪問。
例：顯示下拉選單中選中專案的索引值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉選單</title>
		<script>
			function getIndex(){
				var n=document.getElementById("MySelect");
				alert(n.selectedIndex);
				// alert(n.value);
			}
		</script>
	</head>
	<body>
		<form method="post">
			<select id="MySelect">
				<option>咖啡</option>
				<option>紅茶</option>
				<option>果汁</option>
				<option>礦泉水</option>
			</select>
		</form>
		<br />
		<br />
		<input type="button" value="顯示選中專案索引" onclick="getIndex()" />
	</body>
</html>

在這裡插入圖片描述

4.4表單註冊與表單驗證

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表單註冊與驗證</title>
		<script>
			function check(){
				f=document.form1;//獲取表單物件
				//使用者名稱不能為空
				if(f.uid.value==""){
					alert("使用者名稱為必填項！");
					f.uid.focus();
					return false;
				}
				//驗證兩次密碼輸入是否一致
				if((f.pasw1.value!="")||(f.psw2.value!="")){
					if(f.pasw1.value!=f.psw2.value){
						alert("兩次密碼輸入不一致，請重新輸入！");
						f.psw1.focus();
						return false;
					}
				}
				else{
					alert("密碼不能為空！");
					f.psw1.focus();
					return false;
				}
				if(f.gender.value==""){
					alert("性別必須填寫！");
					return false;
					
				}
				alert("表單通過驗證！");
				f.submit();
			}
		</script>
	</head>
	<body>
		<form method="post" name="form1" id="form1">
			<table width="150" border="0" align="center" cellpadding="0" cellspacing="5">
				<tbody>
					<tr>
						<td colspan="2" align="center">新使用者註冊</td>
					</tr>
					<tr>
						<td width="40%"><label for="uid">使用者名稱：</label></td>
						<td width="60%"><input name="uid" type="text" id="uid" size="30" maxlength="10" /></td>
					</tr>
					<tr>
						<td>性別：</td>
						<td>
							<input name="gender" type="radio" id="gender" value="boy" />
							<label for="gender">男</label>
							<input name="gender" type="radio" id="gender" value="girl" />
							<label for="gender">女</label>
						</td>
					</tr>
					<tr>
						<td>密碼：</td>
						<td><input name="psw1" type="password" id="pasw1" size="30" /></td>
					</tr>
					<tr>
						<td><label for="psw2">確認密碼：</label></td>
						<td><input name="psw2" type="password" id="psw2" size="30" /></td>
					</tr>
					<tr>
						<td><label for="question">密碼問題：</label></td>
						<td><input name="question" type="text" id="question" size="30" /></td>
					</tr>
					<tr>
						<td><label for="answer">密碼答案：</label></td>
						<td><input name="answer" type="text" id="answer" size="30" /></td>
					</tr>
					<tr>
						<td><label for="email">電子郵件：</label></td>
						<td><input name="email" type="text" id="email" size="30" /></td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>
							<input type="submit" name="submit" id="submit" value="註冊" onclick="return check()" />
							<input type="reset" name="reset" id="reset" value="清除" />
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
</html>

在這裡插入圖片描述
到此，JavaScript的基礎就複習完了，對於此部分的學習需要有整體的認識和不斷的練習，對於一些細節問題可以去w3c查詢。
對於學習前端的朋友，在學習完JavaScript的基礎上可以繼續學習jQuery和Ajax。我在複習完HTML和CSS之後也會記錄jQuery和Ajax。

JavaScript物件程式設計-第3章
2018-08-02
JavaScript物件程式設計
javascript：物件導向的程式設計
2018-05-02
JavaScript物件程式設計
Javascript 物件導向程式設計(一)
2018-06-14
JavaScript物件程式設計
Javascript 物件導向程式設計(二)
2018-06-14
JavaScript物件程式設計
Javascript 物件導向程式設計(三)
2018-06-14
JavaScript物件程式設計
JavaScript物件導向程式設計理解！
2021-03-31
JavaScript物件程式設計
JavaScript-設計模式-物件導向程式設計
2018-06-28
JavaScript設計模式物件程式設計
JavaScript設計模式之物件導向程式設計
2018-09-01
JavaScript設計模式物件程式設計
前端_JavaScript_物件導向程式設計
2019-02-17
前端JavaScript物件程式設計
JavaScript物件導向程式設計——Array型別
2018-08-20
JavaScript物件程式設計型別
好程式設計師分享JavaScript建立物件的方式！
2019-11-06
程式設計師JavaScript物件
JavaScript建構函式，物件導向程式設計
2023-03-16
JavaScript函式物件程式設計
好程式設計師前端教程-javascript的物件導向
2019-03-21
程式設計師前端JavaScript物件
好程式設計師分享JavaScript之-文件物件模型(DOM)
2019-11-07
程式設計師JavaScript物件模型
林大媽的JavaScript基礎知識（三）：JavaScript程式設計（1）物件
2019-07-28
JavaScript程式設計物件
好程式設計師web前端教程分享JavaScript Math(算數)物件
2019-06-19
程式設計師Web前端JavaScript物件
物件導向程式設計
2023-04-13
物件程式設計
JS物件導向程式設計(一)：物件
2018-11-21
JS物件程式設計
Javascript 非同步程式設計
2020-11-14
JavaScript非同步程式設計
物件導向程式設計和`GP`泛型程式設計
2024-04-26
物件程式設計泛型
Python物件導向程式設計
2018-10-18
Python物件程式設計
程式設計思想物件導向
2018-07-31
程式設計物件
js物件導向程式設計
2018-09-17
JS物件程式設計
十三、物件導向程式設計
2019-05-12
物件程式設計
十六、物件導向程式設計
2018-04-27
物件程式設計
Python 物件導向程式設計
2021-12-04
Python物件程式設計
JavaScript物件導向程式設計指南（第2版）電子書下載
2018-10-26
JavaScript物件程式設計
好程式設計師web前端學習路線之Javascript物件導向
2019-08-02
程式設計師Web前端JavaScript物件
Java程式設計__Chap3 面對物件__程式設計題
2020-09-26
Java程式設計物件
javascript 模組化程式設計
2018-03-21
JavaScript程式設計
物件導向程式設計C++
2018-10-27
物件程式設計C++
Python OOP 物件導向程式設計
2019-02-16
PythonOOP物件程式設計
python技能--物件導向程式設計
2018-08-11
Python物件程式設計
JS物件導向的程式設計
2018-05-17
JS物件程式設計
06 物件導向程式設計（續）
2024-03-31
物件程式設計
Python物件導向程式設計（1）
2020-10-12
Python物件程式設計
Scala的物件導向程式設計
2020-07-01
物件程式設計
windows核心程式設計--核心物件
2020-04-04
Windows程式設計物件

JavaScript物件程式設計

1.文件物件模型（DOM）

1.1文件物件模型（DOM）簡介

（1）HTML DOM 節點

(2)HTML DOM 方法

(3)HTML DOM 屬性

（4）HTML DOM 訪問

（5）HTML DOM - 修改

1).修改 HTML 元素

2).建立 HTML 內容

3).改變 HTML 樣式

4).建立新的 HTML 元素

(6)HTML DOM - 事件

1).onload 和 onunload 事件

2)onchange 事件

3)onmouseover 和 onmouseout 事件

2.視窗（window）物件

2.1視窗介紹

2.2對話方塊

2.3視窗操作

3.文件物件

4.表單物件

4.1form物件

4.2form物件屬性與方法

4.3下拉選單

4.4表單註冊與表單驗證

相關文章