JavaScript深入

DOM

DOM概述

简介

Document Object Model - 文档对象模型

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

观察以下html代码

html

<html>
<head>
    <title>文档标题</title>
</head>
<body>

<a href="#">我的链接</a>
<h1>我的标题</h1>

</body>
</html>

DOM 将 HTML 文档表达为树结构。

ct_htmltree

什么是DOM

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

什么是HTML DOM

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

元素

页面中所有的标签
标签=元素=对象

节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

节点父(parent)、子(child)和同胞(sibling)

dom_navigate

DOM操作

Document标签元素操作

getElementById()

通过标签的id属性获取元素

概要

javascript

document.getElementByid(id);

参数

id
元素(标签)的id属性值

描述

返回一个元素对象

getElementsByTagName()

通过标签的名称获取元素

概要

javascript

document.getElementsByTagName(tagName);

参数

tagName
元素(标签)的名称

描述

返回一个元素数组

getElementsByClassName(class)

通过标签的class属性获取元素

概要

javascript

document.getElementsByClassName(className);

参数

className
元素(标签)的class属性值

描述

返回一个元素数组

getElementsByName(name)

通过标签的name属性获取元素

概要

javascript

document.getElementsByName(name);

参数

name
元素(标签)的name属性值

描述

返回一个元素数组

querySelector()

概要

javascript

document.querySelector("input");

参数

input

选择器，与css选择器相同

描述

返回元素对象，如果选择器能够选择多个，则只返回一个

querySelectorAll()

概要

javascript

document.querySelectorAll("input");

参数

input

选择器，与css选择器相同

描述

返回元素对象，使用数组封装

evaluate()

概要

// 通过XPath获取单个元素
var result = document.evaluate("your-xpath-expression", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
var element = result.singleNodeValue;

// 通过XPath获取多个元素
var result = document.evaluate("your-xpath-expression", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
var elements = [];
for (var i = 0; i < result.snapshotLength; i++) {
    elements.push(result.snapshotItem(i));
}

描述

返回元素对象

createElement()

根据标签名创建一个标签

概要

javascript

document.createElement("input");

参数

"input"
创建元素的标签名

描述

返回元素对象

标签元素操作

【属性】innerHTML

标签内容属性
获取 - 获取标签体内的所有信息
javascript
var content = element.innerHTML;
1
设置 - 设置的内容当成html片段，插入到标签体中
javascript
element.innerHTML = "<div>abc</div>";
1

【属性】innerText

标签内容属性
获取 - 获取标签内的文本信息
javascript
var content = element.innerText;
1
设置 - 把设置的内容都当成字符串，插入到标签体中
javascript
element.innerText = "<div>abc</div>";
1

【属性】value、checked、selected、src

特殊属性

获取

javascript

var flag = element.checked;
// 如果已勾选，返回true；如果未勾选，返回false

var selected = element.selected;
// 如果已选中，返回true；如果未选择，返回false

var value = element.value;
// 返回value属性值

设置

javascript

// 单选/多选框
element.checked = true;
element.checked = "checked";
element.checked = 1;
// 以上三行代码，都能够设置为已选中状态
      
element.checked = false;
element.checked = "";
element.checked = 0;
// 以上三行代码，都能够设置为未选择中状态
      
// option的selected属性，与单选框/多选框的checked一致
      
// 输入框
element.value = "张三";

【方法】remove()

删除某元素
javascript
element.remove();
// 删除element标签对象
1
2

【方法】hasChildNodes()

判断当前标签对象下是否含有子节点。返回值是boolean值
javascript
var exists = element.hasChildNodes();
// 如果element具有子元素/标签，返回true；否则，返回false
1
2

【方法】removeChild()

通过父标签对象删除子标签对象
javascript
parentElement.removeChild(childElement);
// 将parentElement下的子元素/标签——childElement删除
1
2

【方法】appendChild()

向父标签下追加子标签对象

javascript

parentElement.appendChild(ChildElement)；
// 在parentElement下，添加一个子元素/标签——childElement

【属性】parentElement

获取父元素

javascript

var parent = element.parentElement;
// parent为element的父元素

属性操作

【方法】getAttribute()

获取普通属性

javascript

// 获取element元素的disabled属性值
let disabled = element.getAttribute("disabled");

【方法】setAttribute()

设置普通属性

javascript

// 将element元素的disabled属性的值，设置为true
element.setAttribute("disabled", true);

【方法】removeAttribute()

删除普通属性

javascript

// 删除element元素的disabled属性
element.removeAttribute("disabled");

样式操作

【建议使用】`element.style`

javascript

// 设置样式
document.querySelector("element").style.color = "red";

// 删除样式
document.querySelector("element").style.removeProperty("color");

【建议使用】`element.classList`

javascript

// 设置样式
document.querySelector("element").classList.add("red-text");

// 删除样式
document.querySelector("element").classList.remove("red-text");

【不建议使用】`element.setAttribute`

javascript

// 设置样式
document.querySelector("element").setAttribute("style", "color: red;");

// 删除样式
document.querySelector("element").removeAttribute("style");

js内置函数

typeof()

获得参数的数据类型

html

typeof(value);

decodeURI()

解码一个URI中的字符

javascript

decodeURI(uri);

encodeURI()

转义一个URI中的字符

javascript

encodeURI(uri);

parseFloat()

将一个字符串转化为数字

概要

javascript

praseFloat(s);

参数

s
待解析并转化为数字的字符串

描述

解析并返回s中出现的第一个数字，如果s 不是一个有效数字开头，则返回NaN

parseInt()

将数字转化为整数

概要

javascript

parseInt(s);

参数

s
待解析并转化为数字的字符串

描述

解析并返回s中出现的第一个数字，如果s 不是一个有效数字开头，则返回NaN

2.6 isNaN()

2.7 isFinite()

eval()

js内置对象

Arguments【扩展】

arguments[]数组只定义在函数体中。在函数体中，arguments指代该函数的Arguments对象。该对象拥有数值属性，可当做数组来用，含有传入到该函数的所有参数。arguments标识符本质上是一个局部变量，在生个函数中会自动声明并初始化该变量。arguments仅在函数体中时才指代Arguments对象，在全局代码中为undefined。

Array【重点】

对数组的内置支持

构造函数

javascript

new Array();

javascript

new Array(size);

javascript

new Array(element0, element1, element2);

直接量语法

javascript

var a = [1, true, 'abc'];

属性

length
指明数组中的元素个数

方法

delete关键字删除元素

注意

使用delete删除数组元素类似于给该元素赋undefined值。从数组中删除元素后，数组会变稀疏。

javascript

let array = ["zero", "one", "two", "three", "four"];
delete array[0];

console.log(array); // [empty, 'one', 'three', 'four']

filter删除元素

注意

js仅支持根据下标删除元素，若想删除指定元素，可使用filter完成

javascript

let a = [1,2,3]
let b = [2,3]

a = a.filter(item => !b.includes(item))

splice()删除元素

javascript

let array = ["zero", "one", "two", "three", "four"];
let deleted = array.splice(2, 1);

console.log(array); // ['zero', 'one', 'three', 'four']
console.log(deleted); // ['two']

splice()插入元素

javascript

let array = ["zero", "one", "two", "three", "four"];
let deleted = array.splice(5, 0, "five", "six");

console.log(array); // ['zero', 'one', 'three', 'four', 'five', 'six']
console.log(deleted); // []

splice()替换元素

javascript

let array = ["zero", "one", "two", "three", "four"];
let deleted = array.splice(4, 1, "five", "six");

console.log(array); // ['zero', 'one', 'two', 'three', 'five', 'six']
console.log(deleted); // ['four']

push()添加元素

javascript

let array = ["zero", "one", "two", "three", "four"];
array.push("five", "six");

console.log(array); // ['zero', 'one', 'two', 'three', 'four', 'five', 'six']

concat()

概要

javascript

array.concat(value, ...)

参数

value, ...
任意个要衔接到array中的值

描述

concat()会将参数衔接到 array 中得到一个新数组并返回。它不会修改 array。如果传给concat()的某个参数本身是一个数组，则会将该数组的元素衔接到 array 中，而不是数组本身。

forEach()

概要

javascript

array.forEach(f)

参数

f
为array的每一个元素调用的函数

描述

遍历 array，并对每一个元素调用一次f。f带有三个参数:

javascript

// element: 数组元素
// index: 元素下标
// array: 数组
function(element, index, array) {
}

示例

javascript

var a = [1, 2, 3];
a.forEach(function(element, index, array){
    a[i]++;
});

// a现在是[2, 3, 4]

join()

概要

javascript

array.join();

javascript

array.join(separator);

参数

separator
在返回的字符串中，用来分隔数组的某个元素与下一个元素的可选字符或字符串。如果省略，默认是英文逗号(,)。

描述

join()将数组的每一个元素转换为字符串，并通过在中间插入指定的 separator 字符串将它们衔接起来，最后返回衔接好的字符串。

reverse()

概要

javascript

array.reverse();

描述

reverse()将颠倒数组中的元素顺序，在原数组中进行操作

sort()

概要

javascript

array.sort();

javascript

array.sort(orderfunc);

参数

orderfunc
用来指定如何排序的可选参数

描述

sort()方法在原数组中对数组元素进行排序，并不会创建新数组。如果在调用 sort()时不带参数，将按字母顺序对数组中元素进行排序。比较函数orderfunc带有二个参数:

javascript

// a与b分别是数组中的元素
// 比较函数的返回值，决定了数组排序后的结果
// 返回值小于0: a排在b的前面
// 返回值等于0: a与b相等
// 返回值大于0: a排在b的后面
function(a, b) {
}

示例

javascript

a = new Array(33, 4, 1111, 222);
a.sort();
// a的结果: 字母顺序: 1111, 222, 33, 4

a.sort(function(a, b){
    return a - b;
});
// a的结果: 数值排序: 4, 33, 222, 1111

Boolean【了解】

概要

对布尔值的支持

构造函数

javascript

new Boolean(value);

javascript

Boolean(value)

描述

0、NaN、null、空字符串""和undefined都会转换成false。其他原始值，除了false之外，都会转换成true

Date【了解】

概要

操作日期和时间

创建方式

创建当前日期时间
javascript
```
var date = new Date();
```
1

创建指定日期时间

javascript

var date = new Date(毫秒值);
// 1970-01-01开始的毫秒值

获取方式

getFullYear()
tex
```
四位数字年份
```
1

getMonth()

tex

返回月份(0 - 11)
返回的数字，是当前的月份减1
所以展示的时候，要加1

getDay

tex

返回一周中的某一天(0 - 6)
从1到6，数字是几，就是周几
0是周日

getDate
tex
```
对象返回一个月中的某一天
```
1

getTime

tex

返回 1970 年 1 月 1 日至今的毫秒数

getHours()
获小时
getMinutes()
获取分钟
getSeconds()
获取秒数

Math【掌握】

提供一系列的数学函数和常量

abs()

概要

javascript

Math.abs(x)

参数

x
任意数值

描述

计算绝对值

ceil()

概要

javascript

Math.ceil(x)

参数

x
任意数值

描述

对一个数字向上取整

floor()

概要

javascript

Math.floor(x);

参数

x
任意数值

描述

对一个数值向下取整

max()

概要

javascript

Math.max(args...);

参数

args...
0个或多个值

描述

返回参数中最大的值。如果没有参数，则返回-Infinity。如果任意一个参数是NaN或不可转换为数字，则返回NaN。

min()

概要

javascript

Math.min(args...);

参数

args...
0个或多个值

描述

返回参数中最小的值。如果没有参数，则返回-Infinity。如果任意一个参数是NaN或不可转换为数字，则返回NaN。

random()

概要

javascript

Math.random()

描述

生成一个大于等于0.0，并小于1.0的伪随机数

round()

概要

javascript

Math.round(x);

参数

x
任意数字

描述

返回参数x四舍五入后的整数

Number【了解】

概要

表示数字

构造函数

javascript

new Number(value);

javascript

Number(value);

Object【了解】

概要

所有JavaScript对象的父类

构造函数

javascript

new Object();

javascript

new Object(value);

RegExp【掌握】

分析

11 位数字

1 打头

第 2 位 13456789

第 3 位到第 11 位

要求

手机号码和邮箱要掌握

概要

用于模式匹配的正则表达式
正则表达式: Regular Expression

构造函数

javascript

var patt = new RegExp(pattern);

javascript

var patt = /pattern/;

参数

pattern
用于描述正则表达式的字符串

test()方法

测试字符串是否匹配正则表达式

概要

javascript

var regexp = new RegExp("^1(3|5|6|7|8)\d{9}$");
regexp.test(string);

参数

string
待测试的字符串

描述

匹配，则返回true；不匹配，则返回false

常用正则

手机号校验

javascript

var cellExp = /^1(3|5|6|7|8)\d{9}$/;
if (cellExp.test("13412345678")) {
   // ... 校验通过代码
}

邮箱地址校验

javascript

var emailExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if (emailExp.test()) {
    // ... 校验通过代码
}

String【了解】

概要

字符串支持

构造函数

javascript

new String(s);

javascript

String(s);

参数

s
待存储到一个String对象中或转换为一个原始字符串的值。

JSON【扩展】

解析JSON格式的字符串

概要

javascript

JSON.parse(s);

参数

s
要解析的字符串

描述

将字符串转换为JSON对象

特殊变量/常量【扩展】

Infinity

表示无穷大的数值

概要

判断数值是否有限

javascript

isFinite(n);

参数

n
要检测的数字

描述

数字有限，则返回true；无限，则返回false

NaN

非法数值

概要

javascript

isNaN(x)

参数

n
要检测的值

描述

如果x不是数值，或者是NaN，则返回true；否则，返回false。

null

空值

undefined

未定义的值

概要

javascript

undefined;

描述

判断一个值是否为非法，可统一使用:
javascript
if (value) {
      // ...
}
1
2
3
浏览器会自动进行:非0、非null、非undefined、非空字符串判断

学习目标总结

能够使用 JS 获取页面中的指定元素【重点】
能够使用 JS 创建元素【了解】
能够使用 JS 对元素的属性进行操作【熟悉】
能够使用 JS 对元素的标签体进行操作【熟悉】
能够使用 JS 对指定元素的样式进行操作（获取或修改）【熟悉】
能够使用 JS 中的 Array，Date 对象【熟悉】

JavaScript深入 ​

DOM ​

DOM概述 ​

简介 ​

什么是DOM ​

什么是HTML DOM ​

元素 ​

节点 ​

节点父(parent)、子(child)和同胞(sibling) ​

DOM操作 ​

Document标签元素操作 ​

getElementById() ​

概要 ​

参数 ​

描述 ​

getElementsByTagName() ​

概要 ​

参数 ​

描述 ​

getElementsByClassName(class) ​

概要 ​

参数 ​

描述 ​

getElementsByName(name) ​

概要 ​

参数 ​

描述 ​

querySelector() ​

概要 ​

参数 ​

描述 ​

querySelectorAll() ​

概要 ​

参数 ​

描述 ​

evaluate() ​

概要 ​

描述 ​

createElement() ​

概要 ​

参数 ​

描述 ​

标签元素操作 ​

【属性】innerHTML ​

【属性】innerText ​

【属性】value、checked、selected、src ​

【方法】remove() ​

【方法】hasChildNodes() ​

【方法】removeChild() ​

【方法】appendChild() ​

【属性】parentElement ​

属性操作 ​

【方法】getAttribute() ​

【方法】setAttribute() ​

【方法】removeAttribute() ​

样式操作 ​

【建议使用】element.style ​

【建议使用】element.classList ​

【不建议使用】element.setAttribute ​

js内置函数 ​

typeof() ​

decodeURI() ​

encodeURI() ​

parseFloat() ​

概要 ​

参数 ​

描述 ​

parseInt() ​

概要 ​

参数 ​

描述 ​

2.6 isNaN() ​

2.7 isFinite() ​

eval() ​

js内置对象 ​

Arguments【扩展】 ​

Array【重点】 ​

构造函数 ​

直接量语法 ​

属性 ​

JavaScript深入

DOM

DOM概述

简介

什么是DOM

什么是HTML DOM

元素

节点

节点父(parent)、子(child)和同胞(sibling)

DOM操作

Document标签元素操作

getElementById()

概要

参数

描述

getElementsByTagName()

概要

参数

描述

getElementsByClassName(class)

概要

参数

描述

getElementsByName(name)

概要

参数

描述

querySelector()

概要

参数

描述

querySelectorAll()

概要

参数

描述

evaluate()

概要

描述

createElement()

概要

参数

描述

标签元素操作

【属性】innerHTML

【属性】innerText

【属性】value、checked、selected、src

【方法】remove()

【方法】hasChildNodes()

【方法】removeChild()

【方法】appendChild()

【属性】parentElement

属性操作

【方法】getAttribute()

【方法】setAttribute()

【方法】removeAttribute()

样式操作

【建议使用】`element.style`

【建议使用】`element.classList`

【不建议使用】`element.setAttribute`

js内置函数

typeof()

decodeURI()

encodeURI()

parseFloat()

概要

参数

描述

parseInt()

概要

参数

描述

2.6 isNaN()

2.7 isFinite()

eval()

js内置对象

Arguments【扩展】

Array【重点】

构造函数

直接量语法

属性