概念

一门客户端脚本语言

特点

运行在客户端浏览器中的。每一个浏览器都有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 的值相等，但类型不相等：
typeof undefined		 // undefined
 typeof null				 // object
null === undefined		// false
null == undefined		 // true

引用数据类型

对象（object）
数组（array）

变量

变量：一小块存储数据的内存空间
Java语言是强类型语言，而JavaScript是弱类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据

弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法

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:值2;

判断表达式的值，如果是true则取值1，如果是false则取值2；

示例：

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 lang="en">
<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：函数(方法)对象

创建格式

function 方法名称(形式参数列表){
	方法体
}

var 方法名 = function(形式参数列表){
	方法体
}

建议不用

var fun = new Function(形式参数列表,方法体);  //忘掉吧

方法

属性

length：代表形参的个数

特点

方法定义是，形参的类型不用写,返回值类型也不写。
方法是一个对象，如果定义名称相同的方法，会覆盖
在JS中，方法的调用只与方法的名称有关，和参数列表无关
在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数

调用

方法名称(实际参数列表);
<!--
比如：
var x = myFunction(4, 3);        // 调用函数，返回值被赋值给 x
-->

函数中的代码将在其他代码调用该函数时执行：

当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时
自动的（自调用）

当 JavaScript 到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者：

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。

实例

var x = true;
var y = false;

布尔值经常用在条件测试中。

Date：日期对象

创建格式

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 只有一种数值类型。

写数值时用不用小数点均可：

实例

var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点

超大或超小的数值可以用科学计数法来写：

实例

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

String：字符串

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

字符串被引号包围。您可使用单引号或双引号：

实例

var carName = "Porsche 911";   // 使用双引号
var carName = 'Porsche 911';   // 使用单引号

您可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配：

实例

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传入窗口的特征(设置宽高等)

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 模型被结构化为对象树：

对象树

DOM: Document Object Model 文档对象模型

文档: 超文本文档(超文本标记文档) html, xml
对象: 提供了属性和方法.
模型: 使用属性和方法操作超文本标记文档
可以使用js里面的dom里面提供的对象,使用这些对象的属性和方法,对标记型文档进行操作.
dom里面已经将html里面的标签,属性,文本内容都封装成了对象.

该部分笔记不全，详细见 JavaScript HTML DOM

DOM解析html文档的过程

根据html的层级结构,在内存中分配一个树形结构, 需要把html中的每部分封装为对象.

Document对象: 整个文档
Element对象: 标签对象
Attribute对象: 首先要获取标签对象
Text对象: 首先要获取标签对象
Comment对象: 注释对象
Node节点对象: 这个对象是上面这些对象的父对象, 如果在对象内找不到想要的方法, 此时可以在Node节点对象中去查找想要的方法.

核心DOM模型

Document 文档对象

创建(获取)

在html dom模型中可以使用window对象来获取
window.document
document

方法

write() 向页面输出变量/html代码

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 lang="en">
<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 lang="en">
<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"  onclick="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 lang="en">
<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