概念

一門用戶端腳本語言

特點

運作在用戶端浏覽器中的。每一個浏覽器都有JavaScript的解析引擎
腳本語言：不需要編譯，直接就可以被浏覽器解析執行了

功能

可以來增強使用者和html頁面的互動過程，可以來控制html元素，讓頁面有一些動态的效果，增強使用者的體驗。

發展史

1992年，Nombase公司，開發出第一門用戶端腳本語言，專門用于表單的校驗。命名為： C– ，後來更名為：ScriptEase
1995年，Netscape(網景)公司，開發了一門用戶端腳本語言：LiveScript。後來，請來SUN公司的專家，修改LiveScript，命名為JavaScript
1996年，微軟抄襲JavaScript開發出JScript語言
1997年，ECMA(歐洲計算機制造商協會)，制定出用戶端腳本語言的标準：ECMAScript，就是統一了所有用戶端腳本語言的編碼方式。

JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)

ECMAScript：用戶端腳本語言的标準

基本文法

與html結合方式

内部JS

定義 <script> ，标簽體内容就是js代碼

外部JS

定義 <script> ，通過src屬性引入外部的js檔案

注意

<script> 可以定義在html頁面的任何地方。但是定義的位置會影響執行順序。
<script> 可以定義多個。

注釋

單行注釋： // 注釋内容
多行注釋：

資料類型

詳細見 JavaScript 資料類型

原始資料類型(基本資料類型)

number ：數字。整數/小數/NaN(not a number 一個不是數字的數字類型)
string ：字元串。字元串 “abc” “a” ‘abc’
boolean ：布爾。 true和false
null ：一個對象為空的占位符
undefined ：未定義。如果一個變量沒有給初始化值，則會被預設指派為undefined

Undefined 與 Null 的差別

Undefined 與 Null 的值相等，但類型不相等：
1
2
3
4
      
typeof undefined		 // undefined
 typeof null				 // object
null === undefined		// false
null == undefined		 // true
      

引用資料類型

對象（object）
數組（array）

變量

變量：一小塊存儲資料的記憶體空間
Java語言是強類型語言，而JavaScript是弱類型語言。

強類型：在開辟變量存儲空間時，定義了空間将來存儲的資料的資料類型。隻能存儲固定類型的資料

弱類型：在開辟變量存儲空間時，不定義空間将來的存儲資料類型，可以存放任意類型的資料。

文法

`1`	`var 變量名 = 初始化值;`

typeof運算符

擷取變量的類型

注：null運算後得到的是object

更多見《JavaScript中typeof知多少？》

運算符

注意：在JS中，如果運算數不是運算符所要求的類型，那麼js引擎會自動的将運算數進行類型轉換。
其他類型轉number：
- string轉number：按照字面值轉換。如果字面值不是數字，則轉為NaN（不是數字的數字）
- boolean轉number：true轉為1，false轉為0

算數運算符

算術運算符對數值（文字或變量）執行算術運算。

運算符	描述
+	加法
-	減法
*	乘法
**	幂（将第一個操作數提升到第二個操作數的幂。ES2016）
/	除法
%	系數（傳回除法的餘數）
++	遞增
–	遞減

指派運算符

指派運算符向 JavaScript 變量指派。

運算符	特殊說明	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	把餘數指派給變量	x %= y	x = x % y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y
&=	x &= y	x = x & y
^=	x ^= y	x = x ^ y
\|=	x \|= y	x = x \| y
**=	x **= y	x = x ** y

提示：****=** 運算符屬于 ECMAScript 2016 proposal (ES7) 的實驗部分。它的跨浏覽器表現并不穩定。請勿使用。

比較運算符

比較運算符在邏輯語句中使用，以判定變量或值是否相等。

我們給定 x = 5，下表中解釋了比較運算符：

運算符	描述	比較	傳回
==	等于	x == 8	false
x == 5	true
x == “5”	true
===	值相等并且類型相等	x === 5	true
x === “5”	false
!=	不相等	x != 8	true
!==	值不相等或類型不相等	x !== 5	false
x !== “5”	true
x !== 8	true
>	大于	x > 8	false
<	小于	x < 8	true
>=	大于或等于	x >= 8	false
<=	小于或等于	x <= 8	true

比較方式

類型相同：直接比較
- 字元串：按照字典順序比較。按位逐一比較，直到得出大小為止。
類型不同：先進行類型轉換，再比較
- ===：全等于。在比較之前，先判斷類型，如果類型不一樣，則直接傳回false

邏輯運算符

邏輯運算符用于判定變量或值之間的邏輯。

我們給定 x = 6 且 y = 3，下表解釋了邏輯運算符：

運算符	描述	例子
&&	與	(x < 10 && y > 1) 為 true
\|\|	或	(x == 5 \|\| y == 5) 為 false
!	非	!(x == y) 為 true

其他類型轉boolean：

number：0或NaN為假，其他為真
string：除了空字元串(“”)，其他都是true
null&undefined：都是false
對象：所有對象都為true

條件（三元）運算符

文法：

`1`	`變量名=(表達式)? 值1:值2;`

判斷表達式的值，如果是true則取值1，如果是false則取值2；

示例：

`1`	`var voteable = (age < 18) ? "太年輕":"足夠成熟";`

字元串運算符

+ 運算符也可用于對字元串進行相加（concatenate，級聯）。

+= 指派運算符也可用于相加（級聯）字元串：

執行個體：

給定 text1 = “Good “, text2 = “Morning”, 及 text3 = “”, 下面的表格解釋了字元串運算符的使用：

運算符	例子	text1	text2	text3或text1
+	text3 = text1 + text2	“Good “	“Morning”	“Good Morning”
+=	text1 += text2	“Hello”	“Kitty！”	“Hello Kitty!”

字元串+數字=字元串

相加兩個數字，将傳回和。但對一個數字和一個字元串相加将傳回一個字元串。

類型運算符

運算符	描述
typeof	傳回變量的類型。
instanceof	傳回 true，如果對象是對象類型的執行個體。

typeof 運算符

您可以使用 typeof 運算符來确定 JavaScript 變量的資料類型。

typeof "Bill"                 // 傳回 "string"
typeof 3.14                   // 傳回 "number"
typeof NaN                    // 傳回 "number"
typeof false                  // 傳回 "boolean"
typeof [1,2,3,4]              // 傳回 "object"
typeof {name:'Bill', age:62}  // 傳回 "object"
typeof new Date()             // 傳回 "object"
typeof function () {}         // 傳回 "function"
typeof myCar                  // 傳回 "undefined" *
typeof null                   // 傳回 "object"

請注意：

NaN 的資料類型是數值
數組的資料類型是對象
日期的資料類型是對象
null 的資料類型是對象
未定義變量的資料類型是 undefined
尚未指派的變量的資料類型也是 undefined

無法使用 typeof 去判斷 JavaScript 對象是否是數組（或日期）。

typeof 的資料類型：

typeof 運算符不是變量。它屬于運算符。運算符（比如 + - * /）沒有資料類型。

但是，typeof 始終會傳回字元串（包含運算數的類型）。

另外涉及到Number() 轉換數值，String() 轉換字元串，Boolean() 轉換布爾值。

位運算符

位運算符處理 32 位數。

該運算中的任何數值運算數都會被轉換為 32 位的數。結果會被轉換回 JavaScript 數。

運算符	描述	例子	等同于	結果	十進制
&	與 (and)	5 & 1	0101 & 0001	0001	1
\|	或 (or)	5 \| 1	0101 \| 0001	0101	5
~	非 (not)	~ 5	~0101	1010	10
^	異或 (xor)	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

上例使用 4 位無符号的例子。但是 JavaScript 使用 32 位有符号數。

是以，在 JavaScript 中，~ 5 不會傳回 10，而是傳回 -6。~00000000000000000000000000000101 将傳回 11111111111111111111111111111010。

JavaScript 将數字存儲為 64 位浮點數，但所有按位運算都以 32 位二進制數執行。

在執行位運算之前，JavaScript 将數字轉換為 32 位有符号整數。

執行按位操作後，結果将轉換回 64 位 JavaScript 數。

運算符優先級值

值	運算符	描述	執行個體
20	( )	表達式分組	(3 + 4)
19	.	成員	person.name
19	[]	成員	person[“name”]
19	()	函數調用	myFunction()
19	new	建立	new Date()
17	++	字尾遞增	i++
17	–	字尾遞減	i–
16	++	字首遞增	++i
16	–	字首遞減	–i
16	!	邏輯否	!(x==y)
16	typeof	類型	typeof x
15	**	求幂 (ES7)	10 ** 2
14	*	乘	10 * 5
14	/	除	10 / 5
14	%	模數除法	10 % 5
13	+	加	10 + 5
13	-	減	10 - 5
12	<<	左位移	x << 2
12	>>	右位移	x >> 2
12	>>>	右位移（無符号）	x >>> 2
11	<	小于	x < y
11	<=	小于或等于	x <= y
11	>	大于	x > y
11	>=	大于或等于	x >= y
11	in	對象中的屬性	“PI” in Math
11	instanceof	對象的執行個體	instanceof Array
10	==	相等	x == y
10	===	嚴格相等	x === y
10	!=	不相等	x != y
10	!==	嚴格不相等	x !== y
9	&	按位與	x & y
8	^	按位 XOR	x ^ y
7	\|	按位或	x \| y
6	&&	邏輯與	x && y
5	\|\|	邏輯否	x \|\| y
4	? :	條件	? “Yes” : “No”
3	=	指派	x = y
3	+=	指派	x += y
3	-=	指派	x -= y
3	*=	指派	x *= y
3	%=	指派	x %= y
3	<<=	指派	x <<= y
3	>>=	指派	x >>= y
3	>>>=	指派	x >>>= y
3	&=	指派	x &= y
3	^=	指派	x ^= y
3	\|=	指派	x \|= y
2	yield	暫停函數	yield x
1	,	逗号	7 , 8

注意：淡紅色訓示實驗性或建議性的技術（ECMASScript 2016 或 ES7）

提示：括号中的表達式會在值在表達式的其餘部分中被使用之前進行完全計算。

流程控制語句

if...else...
switch :
- 在java中，switch語句可以接受的資料類型： byte int shor char,枚舉(1.5) ,String(1.7)
  - switch(變量):
    - case 值:
- 在JS中,switch語句可以接受任意的原始資料類型
while
for

JS特殊文法

語句以;結尾，如果一行隻有一條語句則 ;可以省略 (不建議)
變量的定義使用var關鍵字，也可以不使用
- 用：定義的變量是局部變量
- 不用：定義的變量是全局變量(不建議)

練習：99乘法表

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>99乘法表</title>
	<style>
		td{
			border: 1px solid;
		}
	</style>
			
	<script>
			
		document.write("<table  align='center'>");
		//1.完成基本的for循環嵌套，展示乘法表
			for (var i = 1; i <= 9 ; i++) {
			document.write("<tr>");
			for (var j = 1; j <=i ; j++) {
			document.write("<td>");

			//輸出  1 * 1 = 1
			document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
	
			document.write("</td>");
		}
		/*//輸出換行
		document.write("<br>");*/
	
		document.write("</tr>");
	}
		
	//2.完成表格嵌套
	document.write("</table>");
		
	</script>
	</head>
	<body>
		
	</body>
</html>

基本對象

Function：函數(方法)對象

建立格式

1
2
3

function 方法名稱(形式參數清單){
	方法體
}

1
2
3

var 方法名 = function(形式參數清單){
	方法體
}

建議不用

`1`	`var fun = new Function(形式參數清單,方法體); //忘掉吧`

方法

屬性

length ：代表形參的個數

特點

方法定義是，形參的類型不用寫,傳回值類型也不寫。
方法是一個對象，如果定義名稱相同的方法，會覆寫
在JS中，方法的調用隻與方法的名稱有關，和參數清單無關
在方法聲明中有一個隐藏的内置對象（數組），arguments,封裝所有的實際參數

調用

方法名稱(實際參數清單);
<!--
比如：
var x = myFunction(4, 3);        // 調用函數，傳回值被指派給 x
-->

函數中的代碼将在其他代碼調用該函數時執行：

當事件發生時（當使用者點選按鈕時）
當 JavaScript 代碼調用時
自動的（自調用）

傳回

當 JavaScript 到達

return

語句，函數将停止執行。

如果函數被某條語句調用，JavaScript 将在調用語句之後“傳回”執行代碼。

函數通常會計算出傳回值。這個傳回值會傳回給調用者：

1
2
3

function myFunction(a, b) {
    return a * b;                // 函數傳回 a 和 b 的乘積
}

Array：數組對象

建立格式

var arr = new Array(元素清單);
var arr = new Array(預設長度);
var arr = [元素清單];

方法

join(參數) ：将數組中的元素按照指定的分隔符拼接為字元串
push() ：向數組的末尾添加一個或更多元素，并傳回新的長度

屬性

lengh :數組的長度

特點

1. JS中，數組元素的類型可變的。
2. JS中，數組長度可變的。

Boolean：布爾

布爾值隻有兩個值：

true

或

false

。

執行個體

1
2

var x = true;
var y = false;

布爾值經常用在條件測試中。

Date：日期對象

建立格式

`1`	`var date = new Date();`

方法

toLocaleString() ：傳回目前date對象對應的時間本地字元串格式
getTime() ：擷取毫秒值。傳回目前如期對象描述的時間到1970年1月1日零點的毫秒值差

Math：數學對象

建立

特點

Math對象不用建立，直接使用。
格式： Math.方法名();

方法

random() :傳回 0 ~ 1 之間的随機數。含0不含1
ceil(x) ：對數進行上舍入
floor(x) ：對數進行下舍入
round(x) ：把數四舍五入為最接近的整數

屬性

PI

Number：數值

JavaScript 隻有一種數值類型。

寫數值時用不用小數點均可：

執行個體

1
2

var x1 = 34.00;     // 帶小數點
var x2 = 34;        // 不帶小數點

超大或超小的數值可以用科學計數法來寫：

執行個體

1
2

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

String：字元串

字元串（或文本字元串）是一串字元（比如 “Bill Gates”）。

字元串被引号包圍。您可使用單引号或雙引号：

執行個體

1
2

var carName = "Porsche 911";   // 使用雙引号
var carName = 'Porsche 911';   // 使用單引号

您可以在字元串内使用引号，隻要這些引号與包圍字元串的引号不比對：

執行個體

1
2
3

var answer = "It's alright";             // 雙引号内的單引号
var answer = "He is called 'Bill'";    // 雙引号内的單引号
var answer = 'He is called "Bill"';    // 單引号内的雙引号

RegExp：正規表達式對象

正規表達式：定義字元串的組成規則。

單個字元:[]

如：
[a] [ab] [a-zA-Z0-9_]

特殊符号代表特殊含義的單個字元： \d :單個數字字元 [0-9] \w :單個單詞字元 [a-zA-Z0-9_]

量詞符号： ? ：表示出現0次或1次 * ：表示出現0次或多次 + ：表示出現1次或多次 {m,n} :表示 m<= 數量 <= n

m如果預設： {,n}
：最多n次

n 如果預設：
{m,} ：最少m次

開始結束符号
- ^ :開始
- $ :結束

正則對象

建立

有兩種建立形式：

var reg = new RegExp("正規表達式");
var reg = /正規表達式/;

方法

test(參數) :驗證指定的字元串是否符合正則定義的規範

Global：全局對象

特點

全局對象

這個Global中封裝的方法不需要對象就可以直接調用：

方法名();

方法

encodeURI() ：url編碼
decodeURI() ：url解碼
encodeURIComponent() ：url編碼,編碼的字元更多
decodeURIComponent() ：url解碼
parseInt() ：将字元串轉為數字
- 逐一判斷每一個字元是否是數字，直到不是數字為止，将前邊數字部分轉為number
isNaN() ：判斷一個值是否是NaN
- NaN六親不認，連自己都不認。NaN參與的==比較，全部都是false
eval() ：講 JavaScript 字元串，并把它作為腳本代碼來執行。

URL編碼

傳智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

BOM

概念

Browser Object Model 浏覽器對象模型

将浏覽器的各個組成部分封裝成對象。

浏覽器對象模型（Browser Object Model (BOM)）

不存在浏覽器對象模型（BOM）的官方标準。

現代的浏覽器已經（幾乎）實作了 JavaScript 互動相同的方法和屬性，是以它經常作為 BOM 的方法和屬性被提到。

該部分筆記不全，詳細見 JavaScript Window - 浏覽器對象模型

組成

Window ：視窗對象
Navigator ：浏覽器對象
Screen ：顯示器螢幕對象
History ：曆史記錄對象
Location ：位址欄對象

Navigator 浏覽器對象

Navigator 對象擷取一些浏覽器的資訊.

屬性

appName 傳回浏覽器的名稱。

相關文檔 https://www.w3school.com.cn/jsref/dom_obj_navigator.asp

Screen 螢幕對象

Screen 對象包含有關用戶端顯示螢幕的資訊。

屬性

width : 傳回螢幕的寬度
height : 傳回螢幕的高度

相關文檔 https://www.w3school.com.cn/jsref/dom_obj_screen.asp

Location 位址欄對象

Location 對象包含有關目前 URL 的資訊。

建立(擷取)

window.location
location

方法

reload() : 重新加載目前文檔,重新整理操作.

屬性

href : 設定或傳回完整的url.

Demo

<body>
<input id="btn" type="button" value="跳轉">

<script type="text/javascript">

	// 擷取input标簽
	var btn = document.getElementById("btn");
	// 設定事件
	btn.onclick = function (){
		location.href = "https://www.baidu.com";
	}

</script>

</body>

相關文檔 https://www.w3school.com.cn/jsref/dom_obj_location.asp

History 對象

History 對象包含使用者（在浏覽器視窗中）通路過的 URL。

建立(擷取)

window.history
history

方法

back() 加載 history 清單中的前一個 URL。
forward() 加載 history 清單中的下一個 URL。
go(參數) 加載 history 清單中的某個具體頁面。

參數：

正數：前進幾個曆史記錄

負數：後退幾個曆史記錄

屬性

length : 傳回目前視窗曆史清單中的url數量.

Window 視窗對象

Window 對象表示浏覽器中打開的視窗。

方法

與彈出框有關的方法
- alert() : 顯示帶有一段消息和一個确認按鈕的警告框.
- confirm() : 顯示帶有一段消息,以及确認和取消兩個按鈕的對話框. 若點選确定,該方法傳回true, 點選取消,傳回false.
  - 如果使用者點選确定按鈕，則方法傳回true
  - 如果使用者點選取消按鈕，則方法傳回false
- prompt() : 顯示可提示使用者輸入的對話框. 傳回值為使用者輸入的内容.
與打開關閉有關的方法
- close() :關閉浏覽器視窗。誰調用我，我關誰
- open(arg1, arg2, arg3, arg4) : 打開一個新的浏覽器視窗，傳回新的Window對象
  - 注意: 這4個參數都是可選的, arg1 傳入url, arg3傳入視窗的特征(設定寬高等)

`1`	`window.open("https://www.baidu.com","","width=100,height=100");`

與定時器有關的方法
- setTimeout(code,millisec) : 在指定的毫秒數後調用函數或計算表達式。
  - 參數：
    - js代碼或者方法對象
    - 毫秒值
  - 傳回值：唯一辨別，用于取消定時器
- clearTimeout(id_of_settimeout) : 取消由 setTimeout() 方法設定的 timeout。傳入某個定時器的id用來取消指定的定時器.
- setInterval(code,millisec) : 按照指定的周期（以毫秒計）來調用函數或計算表達式。
- clearInterval(id_of_settimeout) : 取消由 setInterval() 設定的 timeout。

屬性

擷取其他BOM對象
- History
- location
- Navigator
- Screen
擷取DOM對象
- document

特點

Window對象不需要建立可以直接使用： window.方法名()
window引用可以省略： 方法名();

DOM

簡單學習：為了滿足案例要求

功能：控制html文檔的内容

擷取頁面标簽(元素)對象：Element

* `document.getElementById("id值")`:通過元素的id擷取元素對象

操作Element對象：
1. 修改屬性值：
  1. 明确擷取的對象是哪一個？
  2. 檢視API文檔，找其中有哪些屬性可以設定
2. 修改标簽體内容：
  - 屬性：``innerHTML`
  1. 擷取元素對象
  2. 使用 innerHTML 屬性修改标簽體内容

概念

Document Object Model 文檔對象模型
将标記語言文檔的各個組成部分，封裝為對象。可以使用這些對象，對标記語言文檔進行CRUD的動态操作

功能

控制html文檔的内容

W3C DOM 标準被分為 3 個不同的部分

核心 DOM — 針對任何結構化文檔的标準模型
- Document：文檔對象
- Element：元素對象
- Attribute：屬性對象
- Text：文本對象
- Comment：注釋對象
- Node：節點對象，其他5個(D、E、A、T、C)的父對象
XML DOM — 針對 XML 文檔的标準模型
HTML DOM — 針對 HTML 文檔的标準模型

對象樹

當網頁被加載時，浏覽器會建立頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被結構化為對象樹：

JavaScript：讓頁面元素動起來概念特點功能發展史JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)ECMAScript：用戶端腳本語言的标準BOMDOM事件

DOM:

Document Object Model

文檔對象模型

文檔: 超文本文檔(超文本标記文檔) html, xml
對象: 提供了屬性和方法.
模型: 使用屬性和方法操作超文本标記文檔
可以使用js裡面的dom裡面提供的對象,使用這些對象的屬性和方法,對标記型文檔進行操作.
dom裡面已經将html裡面的标簽,屬性,文本内容都封裝成了對象.

該部分筆記不全，詳細見 JavaScript HTML DOM

DOM解析html文檔的過程

JavaScript：讓頁面元素動起來概念特點功能發展史JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)ECMAScript：用戶端腳本語言的标準BOMDOM事件

根據html的層級結構,在記憶體中配置設定一個樹形結構, 需要把html中的每部分封裝為對象.

Document 對象: 整個文檔
Element 對象: 标簽對象
Attribute 對象: 首先要擷取标簽對象
Text 對象: 首先要擷取标簽對象
Comment 對象: 注釋對象
Node節點對象 : 這個對象是上面這些對象的父對象, 如果在對象内找不到想要的方法, 此時可以在Node節點對象中去查找想要的方法.

核心DOM模型

Document 文檔對象

建立(擷取)

在html dom模型中可以使用window對象來擷取
window.document
document

方法

write()

向頁面輸出變量/html代碼

1
2

document.write("abc");
document.write("<hr>");

擷取Element對象 getElementById() ：根據id屬性值擷取元素對象,id屬性值一般唯一 getElementsByTagName() ：根據元素名稱擷取元素對象們。傳回值是一個數組 getElementsByClassName() :根據Class屬性值擷取元素對象們。傳回值是一個數組 getElementsByName() : 根據name屬性值擷取元素對象們。傳回值是一個數組
建立其他的DOM對象 createAttribute(name) createComment() createElement() createTextNode()

Element 元素對象(标簽對象)

建立(擷取)

通過document來擷取和建立

方法

首先通過document來擷取元素,然後通過元素進行操作 getAttribute(attributename) : 擷取指定的屬性 setAttribute(attributename,attributevalue) : 給元素添加屬性 removeAttribute(attributename) : 移除指定名稱的屬性
注意: 不能删除 value
擷取标簽下面的子标簽 childNodes : 這個屬性相容性很差 getElementsByTagName(标簽名) : 相容性好,擷取标簽下面子标簽的唯一有效方法.

Node 節點對象

特點

所有dom對象都可以被認為是一個節點.

屬性

parentNode 傳回節點的父節點

方法

nodeName

:擷取節點的名稱

nodeType

: 擷取節點的類型

nodeValue

: 擷取節點的value值

因為dom在解析html的時候, html裡面的标簽,屬性,文本都是一個節點,是以上面的三個屬性對其都是不同的值.

标簽節點對應的nodeType為1
屬性節點對應的nodeType為2
文本節點對應的nodeType為3

parentNode

: 擷取父節點的屬性

childNodes

: 得到所有子節點,相容性差

firstChild

: 擷取第一個子節點

lastChild

: 擷取最後一個子節點

nextSibling

: 傳回一個給定節點的下一個兄弟節點

previousSibling

: 傳回一個給定節點的上一個兄弟節點

CRUD_DOM樹

查找節點

getElementById() :通過節點的id屬性,查找指定節點

添加節點

appendChild() ：向節點的子節點清單的結尾添加新的子節點

插入節點

insertBefore(newNode, oldNode) : 向oldNode節點前插入一個新節點.通過父節點添加

删除節點

removeChild() ：删除（并傳回）目前節點的指定子節點。

替換節點

replaceChild() ：用新節點替換一個子節點。通過父節點替換

複制節點

cloneNode(true) : 複制節點

innerHTML屬性

innerHTML 作用:
1. 擷取文本内容
2. 向标簽裡面設定内容(可以是html代碼)

Demo

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#div1 {
            width: 360px;
            height: 150px;
            border: 2px solid red;
        }

        div#div2 {
            width: 360px;
            height: 150px;
            border: 2px solid black;
        }
    </style>
</head>
<body>

<div id="div1">
    <ul id="ul1">
        <li id="li1">one</li>
        <li id="li2">two</li>
        <li id="li3">three</li>
        <li id="li4">four</li>
    </ul>
</div>
<div id="div2"></div>

<input id="input1" type="button" value="添加節點">
<input id="input2" type="button" value="插入節點">
<input id="input3" type="button" value="删除節點">
<input id="input4" type="button" value="替換節點">
<input id="input5" type="button" value="複制節點">

<script type="text/javascript">

    // 添加節點
    /*
    1.擷取到ul
    2.擷取到div2
    3.把ul添加到div2
    */
    var input1 = document.getElementById("input1");
    input1.onclick = function () {
        var ul = document.getElementById("ul1");
        var div = document.getElementById("div2");
        div.appendChild(ul);
    }

    // 插入節點
    /*
    1.擷取到li3标簽
    2.建立li
    3.建立文本
    4.把文本添加到li下面
    5.擷取到ul
    6.把li添加到ul下面
    */
    var input2 = document.getElementById("input2");
    input2.onclick = function () {
        var li3 = document.getElementById("li3");
        var li = document.createElement("li");
        var text = document.createTextNode("朝陽紅");
        li.appendChild(text);
        var ul = document.getElementById("ul1");
        ul.insertBefore(li, li3);
    }

    // 删除節點
    /*
    1.擷取到li标簽
    2.執行父節點ul标簽
    3.執行删除
    */
    var input3 = document.getElementById("input3");
    input3.onclick = function () {
        var li3 = document.getElementById("li3");
        var ul = document.getElementById("ul1");
        ul.removeChild(li3);
    }
    
    // 替換節點
    /*
    1.擷取到li标簽
    2.建立标簽li
    3.建立文本
    4.把文本添加到li下面
    5.擷取父節點Ul标簽
    6.執行替換
    */
    var input4 = document.getElementById("input4");
    input4.onclick = function () {
        var li3 = document.getElementById("li3");
        var li = document.createElement("li");
        var text = document.createTextNode("HelloWorld");
        li.appendChild(text);
        var ul = document.getElementById("ul1");
        ul.replaceChild(li, li3);
    }

    // 複制節點(把ul清單複制到另一個div中)
    /*
    1.擷取到ul
    2.執行複制方法：cloneNode(true)
    3.把複制後的内容放到div2中
        擷取div2
        appendChild方法
    */
    var input5 = document.getElementById("input5");
    input5.onclick = function () {
        var ul = document.getElementById("ul1");
        var ulClone = ul.cloneNode(true);
        var div = document.getElementById("div2");
        div.appendChild(ulClone);
    }
</script>
</body>
</html>

HTML DOM

标簽體的設定和擷取：innerHTML
使用html元素對象的屬性

控制元素樣式

使用元素的style屬性來設定

提前定義好類選擇器的樣式，通過元素的className屬性來設定其class屬性值。

如：

//修改樣式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";

控制樣式

通過DOM來控制标簽的樣式
使用 style 屬性來設定
提前定義好類選擇器的樣式，通過元素的 className 屬性來設定其class屬性值。

Demo

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sun {
            font-weight: bold;
            font-size: 30px;
            color: skyblue;
            border: 2px dashed #000;
        }
    </style>

</head>
<body>

<div class="zy">桂朝陽</div>
<div class="sun">大太陽</div>


<script type="text/javascript">

    // 擷取類名為zy的标簽
    var zy = window.document.getElementsByClassName("zy")[0];
    // alert(zy.className);

    // 方式一(自己添加)給類名為zy的div添加樣式
    // zy.style.border = "1px solid #ccc";
    // zy.style.fontSize = "20px";

    // 方式二(調用已經寫好的)
    zy.className = "sun";
    
</script>
</body>

事件

簡單學習

功能：某些元件被執行了某些操作後，觸發某些代碼的執行。
- 比如，造句： xxx被xxx,我就xxx。
  - 我方水晶被摧毀後，我就責備對友。
  - 敵方水晶被摧毀後，我就誇獎自己。
如何綁定事件
1. 直接在html标簽上，指定事件的屬性(操作)，屬性值就是 js 代碼
  - 事件： onclick — 單擊事件
2. 通過 js 擷取元素對象，指定事件屬性，設定一個函數

小案例：

<body>
	<img id="light" src="img/off.gif"  οnclick="fun();">
	<img id="light2" src="img/off.gif">
				
	<script>
		function fun(){
			alert('我被點了');
			alert('我又被點了');
		 }
				
		function fun2(){
		        alert('咋老點我？');
		}
				
		 //1.擷取light2對象
		var light2 = document.getElementById("light2");
		 //2.綁定事件
		light2.onclick = fun2;
				
	</script>
</body>

功能

些元件被執行了某些操作後，觸發某些代碼的執行

事件監聽機制

概念: 某些元件被執行了某些操作後，觸發某些代碼的執行。
- 事件：某些操作。如：單擊，輕按兩下，鍵盤按下了，滑鼠移動了
- 事件源：元件。如：按鈕文本輸入框…
- 監聽器：代碼。
- 注冊監聽：将事件，事件源，監聽器結合在一起。當事件源上發生了某個事件，則觸發執行某個監聽器代碼。

常見的事件

點選事件： onclick ：單擊事件 ondblclick ：輕按兩下事件
焦點事件 onfocus :元素獲得焦點 onblur ：失去焦點
- 一般用于表單驗證
加載事件： onload ：一張頁面或一幅圖像完成加載。
滑鼠事件： onmousedown ：滑鼠按鈕被按下。
- 定義方法時，定義一個形參，接受event對象。
- event對象的button屬性可以擷取滑鼠按鈕鍵被點選了。
onmouseup ：滑鼠按鍵被松開。 onmousemove ：滑鼠被移動。 onmouseover ：滑鼠移到某元素之上。 onmouseout ：滑鼠從某元素移開。
鍵盤事件： onkeydown ：某個鍵盤按鍵被按下。 onkeyup ：某個鍵盤按鍵被松開。 onmouseout ：某個鍵盤按鍵被按下并松開。
選擇和改變 onchange ：域的内容被改變。 onselect ：文本被選中。
表單事件： onsubmit ：确認按鈕被點選。
- 可以阻止表單的送出
- 方法傳回false則表單被阻止送出。
onreset ：重置按鈕被點選。

Demo:電燈開關

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>電燈開關</title>

</head>
<body>

<img id="light" src="img/off.gif">

<script>
    /* 分析：
        1.擷取圖檔對象
        2.綁定單擊事件
        3.每次點選切換圖檔
         * 規則：
             * 如果燈是開的 on,切換圖檔為 off
             * 如果燈是關的 off,切換圖檔為 on
         * 使用标記flag來完成
     */

    //1.擷取圖檔對象
    var light = document.getElementById("light");
    var flag = false;//代表燈是滅的。 off圖檔

    //2.綁定單擊事件
    light.onclick = function(){
        if(flag){//判斷如果燈是開的，則滅掉
            light.src = "img/off.gif";
            flag = false;
        }else{
            //如果燈是滅的，則打開
            light.src = "img/on.gif";
            flag = true;
        }
    }
</script>
</body>
</html>

标記>>>學習BOM和DOM時用的是CSDN部落客「White Camel」的筆記，原文連結：https://blog.csdn.net/m0_37989980/article/details/103669620