javaEE -15（ 13000字 JavaScript入门 - 2）

一：JavaScript(WebAPI)

JS 分成三个大的部分

• ECMAScript: 基础语法部分
• DOM API: 操作页面结构
• BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM，这个是 W3C 组织规定的. (和制定 ECMAScript 标准的大佬们不是一伙人).

前面学的 JS 基础语法主要学的是 ECMAScript, 这让我们建立基本的编程思维. 相当于练武需要先扎马步，但是真正来写一个更加复杂的有交互式的页面, 还需要 WebAPI 的支持. 相当于各种招式.

API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM，所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.

二：DOM

DOM 全称为 Document Object Model.

W3C 标准给我们提供了一系列的函数, 让我们可以操作:

• 网页内容
• 网页结构
• 网页样式

一个页面的结构是一个树形结构, 称为 DOM 树.

页面结构形如:

DOM 树结构形如：

重要概念:

• 文档: 一个页面就是一个 文档, 使用 document 表示.
• 元素: 页面中所有的标签都称为 元素. 使用 element 表示.
• 节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node表示.

这些文档等概念在 JS 代码中就对应一个个的对象.所以才叫 “文档对象模型” .

2.1 获取元素

这部分工作类似于 CSS 选择器的功能.

1. 通过元素名称选择元素：

 const element = document.querySelector('div');
1

2. 通过类名选择元素：

 const element = document.querySelector('.my-class');
1

3. 通过ID选择元素：

 const element = document.querySelector('#my-id');
1

4. 通过属性选择元素：

 const element = document.querySelector('[data-attribute="value"]');
1

5. 根据指定选择器选择元素：

// 使用 document.querySelector 方法选择第一个匹配的元素
const button = document.querySelector('.button');
console.log(button);

// 使用 document.querySelectorAll 方法选择所有匹配的元素
const buttons = document.querySelectorAll('.button');
console.log(buttons);

1
2
3
4
5
6
7
8

querySelector方法将返回第一个与选择器匹配的元素。如果没有找到匹配的元素，则返回null。如果需要选择所有匹配的元素，可以使用querySelectorAll方法。

注意事项：

• querySelector只返回满足选择器条件的第一个元素，即使有多个元素满足条件。
• 如果选择器无效或没有匹配的元素，querySelector将返回null。
• querySelector只能选择文档中的元素，而不是文档外的元素。

2.2 获取特殊元素（body，html）

获取 body 元素：

doucumnet.body // 返回body元素对象
1

获取 html 元素：

document.documentElement // 返回html元素对象
1

三：事件

JS 要构建动态页面, 就需要感知到用户的行为.

用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作.

事件三要素

1. 事件源: 哪个元素触发的
2. 事件类型: 是点击, 选中, 还是修改?
3. 事件处理程序: 我们该如何处理.（往往是一个回调函数.）

简单代码示例：

<button id="btn">点我一下</button>
<script>
  var btn = document.getElementById('btn');
  btn.onclick = function () {
    alert("hello world");
 }
</script>
1
2
3
4
5
6
7

首先，HTML部分：

<button id="btn">点我一下</button>
1

这段HTML代码创建了一个按钮，按钮的id属性被设置为"btn"，用来在JavaScript代码中获取该按钮的引用。

接下来，JavaScript部分：

var btn = document.getElementById('btn');
btn.onclick = function () {
  alert("hello world");
}
1
2
3
4

首先，使用document.getElementById('btn')获取到HTML文档中id为"btn"的元素，此时 btn 就代表了这个元素

然后，通过给btn元素的onclick属性赋一个函数，代表了点击这个按钮就会执行对应的函数

所以这段代码的作用是在网页中创建一个按钮，当用户点击按钮时，会弹出一个提示框显示"hello world"。

其中：

• btn 按钮就是事件源.
• 点击就是事件类型
• function 这个匿名函数就是事件处理程序
• 其中 btn.onclick = function() 这个操作称为 注册事件/绑定事件

注意: 这个匿名函数相当于一个回调函数, 这个函数不需要程序猿主动来调用, 而是交给浏览器, 由浏览器自动在合适的时机(触发点击操作时) 进行调用.

常见的鼠标事件：

3.1 操作元素

3.1.1 获取/修改元素内容

3.1.1.1 innerText

从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉

innerText 用法和 innerHTML 基本一样，只是 innerText 提取和解析内容的时候是纯文本，而 innerHTML 在提取和解析内容的时候会解析成 html

3.1.1.2 innerHTML

起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

innerHTML 是 JavaScript 中的一个属性，用于获取或设置一个元素的 HTML 内容。

使用 innerHTML 属性，你可以动态地修改 HTML 元素的内容。下面是一些示例：

1. 获取元素的 HTML 内容：

const element = document.getElementById("myElement");
const htmlContent = element.innerHTML;
console.log(htmlContent);
1
2
3

2. 设置元素的 HTML 内容：

const element = document.getElementById("myElement");
element.innerHTML = "<h1>Hello, World!</h1>";
1
2

3. 在现有内容的基础上添加新内容：

const element = document.getElementById("myElement");
element.innerHTML += "<p>This is additional content.</p>";
1
2

使用 innerHTML 属性时，它会将字符串解析为 HTM，如果你只需要获取纯文本内容而不是 HTML，可以使用 innerText属性。

3.1.2 获取/修改元素属性

可以通过 Element 对象的属性来直接修改, 就能影响到页面显示效果.

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
  var img = document.querySelector('img');
  console.dir(img);
</script>
1
2
3
4
5

console.dir() 方法用于打印出该元素的详细信息。

此时可以看到 img 这个 Element 对象中有很多属性

我们可以在代码中直接通过这些属性来获取属性的值.

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
  var img = document.querySelector('img');
  // console.dir(img);
  console.log(img.src);
  console.log(img.title);
  console.log(img.alt);
</script>
1
2
3
4
5
6
7
8

还可以直接修改属性：

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
  var img = document.querySelector('img');
  img.onclick = function () {
    if (img.src.lastIndexOf('rose.jpg') !== -1) {
      img.src = './rose2.png';
   } else {
      img.src = './rose.jpg';
   }
 }
</script>
1
2
3
4
5
6
7
8
9
10
11

这段代码实现了一个简单的点击切换图片效果，当用户点击图片时，会在 “rose.jpg” 和 “rose2.png” 之间进行切换，从而实现页面上图片的动态改变效果。

注意：JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

3.1.3 获取/修改表单元素属性

表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

• value: input 的值.
• disabled: 禁用
• checked: 复选框会使用
• selected: 下拉框会使用
• type: input 的类型(文本, 密码, 按钮, 文件等)

代码示例 1: 切换按钮的文本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Attributes</title>
</head>
<body>
  
  <input type="button" value="播放">
  <button onclick="updateForm()">Update Form</button>

  <script>
    var btn = document.querySelector('input');
    btn.onclick = function () {
      if (btn.value === '播放') {
        btn.value = '暂停';
     } else {
        btn.value = '播放';
     }
   }
  </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

点击暂停后：

代码示例 2: 点击计数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Attributes</title>
</head>
<body>
  <input type="text" id="text" value="0">
  <input type="button" id="btn" value='点我+1'>
  <script>
    var text = document.querySelector('#text');
    var btn = document.querySelector('#btn');
    btn.onclick = function () {
      var num = +text.value;
      console.log(num);
      num++;
      text.value = num;
   }
  </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

点击一次：

再点击一次：

代码示例 3: 全选/取消全选按钮

<input type="checkbox" id="all">我全都要 <br>
<input type="checkbox" class="girl">貂蝉 <br>
<input type="checkbox" class="girl">小乔 <br>
<input type="checkbox" class="girl">安琪拉 <br>
<input type="checkbox" class="girl">妲己 <br>
<script>
  // 1. 获取到元素
  var all = document.querySelector('#all');
  var girls = document.querySelectorAll('.girl');
  // 2. 给 all 注册点击事件, 选中/取消所有选项
  all.onclick = function () {
    for (var i = 0; i < girls.length; i++) {
      girls[i].checked = all.checked;
   }
 }
  // 3. 给 girl 注册点击事件
  for (var i = 0; i < girls.length; i++) {
    girls[i].onclick = function () {
      // 检测当前是不是所有的 girl 都被选中了.
      all.checked = checkGirls(girls);
   }
 }
  // 4. 实现 checkGirls
  function checkGirls(girls) {
    for (var i = 0; i < girls.length; i++) {
      if (!girls[i].checked) {
        // 只要一个 girl 没被选中, 就认为结果是 false(找到了反例)
        return false;
     }
   }
    // 所有 girl 中都没找到反例, 结果就是全选中
    return true;
 }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

点击我全部都要按钮后：

也可以选单个按钮：

3.1.4 获取/修改样式属性

3.1.4.1 行内样式操作

CSS 中指定给元素的属性, 都可以通过 JS 来修改.

通过 style 直接在标签上指定的样式. 优先级很高，适用于改的样式少的情况（JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高）：

element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];
1
2

例如，要将一个元素的背景色设置为红色，可以使用以下代码：

element.style.backgroundColor = "red";
1

代码示例 4: 点击文字则放大字体.

<div style="font-size: 20px; font-weight: 700;">
 哈哈
</div>
<script>
  var div = document.querySelector('div');
  div.onclick = function () {
    var curFontSize = parseInt(this.style.fontSize);
    curFontSize += 10;
    this.style.fontSize = curFontSize + "px";
 }
</script>
1
2
3
4
5
6
7
8
9
10
11

style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的.

例如:

• font-size => fontSize,
• background-color => backgroundColor

3.1.4.2 类名样式操作

element.className = [CSS 类名];
1

例如，要将一个元素的类名修改为 “active”，可以使用以下代码：

element.className = "active";
1

修改元素的 CSS 类名. 适用于要修改的样式很多的情况，由于 class 是 JS 的保留字, 所以名字叫做 className

代码示例 5: 开启夜间模式

<div class="container light">
 这是一大段话. <br>
 这是一大段话. <br>
 这是一大段话. <br>
 这是一大段话. <br>
</div>

* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 100%;
}
.light {
  background-color: #f3f3f3;
  color: #333;
}
.dark {
  background-color: #333;
  color: #f3f3f3;
}

var div = document.querySelector('div');
div.onclick = function () {
  console.log(div.className);
  if (div.className.indexOf('light') != -1) {
    div.className = 'container dark';
 } else {
    div.className = 'container light';
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

• 点击页面切换到夜间模式(背景变成黑色)
• 再次点击恢复日间模式(背景变成白色)

3.1.5 自定义属性的操作

在 JavaScript 中要自定义一个属性，可以使用 setAttribute 方法。该方法接受两个参数：要设置属性的元素和要设置的属性名和值。

const element = document.getElementById("myElement");
element.setAttribute("data-custom", "some value");
1
2

通过这段代码，我们就将 data-custom 属性设置为 “some value”。

• element.属性 ：设置内置属性值
• element.setAttribute(‘属性’); 主要设置自定义的属性

3.1.5.1 获取自定义属性的值

要获取已设置的属性值，可以使用 getAttribute 方法。该方法接受一个参数：要获取属性的元素和属性名。

const value = element.getAttribute("data-custom");
console.log(value); // 输出 "some value"
1
2

• element.属性 ：获取内置属性值（元素本身自带的属性）
• element.getAttribute(‘属性’); 主要获得自定义的属性

3.1.5.2 移除自定义属性

element.removeAttribute(‘属性’);

const element = document.getElementById('myElement');
element.removeAttribute('data-name');
1
2

我们调用 removeAttribute() 方法并传入要移除的属性名 ‘data-name’。这将从元素中移除名为 data-name 的属性。

3.2 操作节点

首先我们为什么学节点操作呢？

获取元素通常使用两种方式：

1. 利用 DOM 提供的方法获取元素（逻辑性不强、繁琐）
2. 利用节点层级关系获取元素 （逻辑性强， 但是兼容性稍差）

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

一般来说，节点至少拥有 nodeType（节点类型）、nodeName（节点名称）和 nodeValue（节点值）这三个基本属性。

节点类型有三种：

• 元素节点 nodeType 为 1
• 属性节点 nodeType 为 2
• 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

3.2.1 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

3.2.1.1 父级节点

node.parentNode
1

• parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
• 如果指定的节点没有父节点则返回 null

3.2.1.2 子节点

1. parentNode.children
1

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回

而 parentNode.childNodes 返回值里面包含了所有的子节点，包括元素节点，文本节点等，所以我们一般不提倡使用childNodes

2. parentNode.firstChild
1

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

3. parentNode.lastChild
1

lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

4. parentNode.firstElementChild
1

firstElementChild 返回第一个子元素节点，找不到则返回null。

5. parentNode.lastElementChild
1

lastElementChild 返回最后一个子元素节点，找不到则返回null。

3.2.1.4 兄弟节点

1. node.nextSibling
1

nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

2. node.previousSibling
1

previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

3. node.nextElementSibling
1

nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。

4. node.previousElementSibling
1

previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。

3.2.2 新增节点

分成两个步骤

1. 创建元素节点
2. 把元素节点插入到 dom 树中.

第一步相当于生了个娃, 第二步相当于给娃上户口

3.2.2.1 创建节点

1. 使用 createElement 方法来创建一个元素.

const divElement = document.createElement('div');
1

上面介绍的只是创建元素节点, 还可以使用:

• createTextNode 创建文本节点
• createComment 创建注释节点
• createAttribute 创建属性节点

3.2.2.1 插入节点

插入节点有两种方法：

1. 方法一：

node.appendChild(child)
1

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。

示例代码：

<div class="container">
</div>
<script>
  var div = document.createElement('div');
  div.id = 'mydiv';
  div.className = 'box';
  div.innerHTML = 'hehe';
  var container = document.querySelector('.container');
  container.appendChild(div);
</script>
1
2
3
4
5
6
7
8
9
10

2. 方法二：

node.insertBefore(child, 指定元素)
1

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。

代码示例：

<div class="container">
  <div>11</div>
  <div>22</div>
  <div>33</div>
  <div>44</div>
</div>
<script>
  var newDiv = document.createElement('div');
  newDiv.innerHTML = '我是新的节点';
  var container = document.querySelector('.container');
  console.log(container.children);
  container.insertBefore(newDiv, container.children[0]);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

注意: 如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)

<div class="container">
  <div>11</div>
  <div>22</div>
  <div>33</div>
  <div>44</div>
</div>
<script>
  var newDiv = document.createElement('div');
  newDiv.innerHTML = '我是新的节点';
  var container = document.querySelector('.container');
  console.log(container.children);
  // 此处的 children 里有 4 个元素
  container.insertBefore(newDiv, container.children[0]);
  // 此处的 children 里有 5 个元素(上面新插了一个), 0 号元素是 新节点,
  // 1 号元素是 11, 2号节点是 22, 所以是插入到 22 之前.
  container.insertBefore(newDiv, container.children[2]);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.2.3 删除节点

node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。

语法：

parent.removeChild(child)
1

参数：

• parent：要移除子节点的父节点。
• child：要移除的子节点。

示例代码：

<div id="parent">
  <p id="child">我是子节点</p>
</div>

<script>
  var parent = document.getElementById("parent");
  var child = document.getElementById("child");

  parent.removeChild(child);
</script>
1
2
3
4
5
6
7
8
9
10

注意：使用 removeChild 方法只会从 DOM 结构中移除该子节点，而不会删除该节点。

此外，如果你想要从文档中完全删除节点而不仅仅是从其父节点中移除它，可以使用 remove 方法。示例如下：

child.remove();
1

这将从 DOM 中彻底删除子节点，使其无法再被访问到。

3.2.4 复制节点

node.cloneNode()
1

node.cloneNode() 方法返回调用该方法的节点的一个副本。

注意：

1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

3.2.5 替换节点

parentNode.replaceChild(newChild, oldChild);
1

用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

3.3 代码案例

3.3.1 代码案例: 猜数字

<button type="button" id="reset">重新开始一局游戏</button>
<br>
请输入要猜的数字：<input type="text" id="number">
<button type="button" id="button">猜</button>
<br>
已经猜的次数：<span id="count">0</span>
<br>
结果：<span id="result"></span>
<script>
  var inputE = document.querySelector("#number");
  var countE = document.querySelector("#count");
  var resultE = document.querySelector("#result");
  var btn = document.querySelector("#button");
  var resetBtn = document.querySelector("#reset");
  // 随机生成一个 1-100 的数字
  var guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数
  var count = 0;
  // on: 当
  // click: 点击
  // 事件驱动（Event-Drive）：只要真正发生了点击事件时，才执行该函数
  btn.onclick = function() {
    count++;
    countE.innerText = count;
    var userGuess = parseInt(inputE.value);
    if (userGuess == guessNumber) {
      resultE.innerText = "猜对了";
      resultE.style = "color: gray;";
   } else if (userGuess < guessNumber) {
      resultE.innerText = "猜小了";
      resultE.style = "color: blue;";
   } else {
      resultE.innerText = "猜大了";
      resultE.style = "color: red;";
   }
 };
  resetBtn.onclick = function() {
    guessNumber = Math.floor(Math.random() * 100) + 1
    count = 0;
    countE.innerText = count;
    resultE.innerText = "";
    inputE.value = "";
 }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

3.3.2 代码案例: 表白墙

首先创建页面布局：

<h1>表白墙</h1>
<p>输入后点击提交, 会将信息显示在表格中</p>
<span>谁: </span>
<input type="text">
<span>对谁: </span>
<input type="text">
<span>说什么: </span>
<input type="text">
<input type="button" value="提交">
1
2
3
4
5
6
7
8
9

此时效果形如：

接着调整样式：

<div class="container">
  <h1>表白墙</h1>
  <p>输入后点击提交, 会将信息显示在表格中</p>
  <div class="row">
    <span>谁: </span>
    <input class="edit" type="text">
  </div>
  <div class="row">
    <span>对谁: </span>
    <input class="edit" type="text">
  </div>
  <div class="row">
    <span>说什么: </span>
    <input class="edit" type="text">
  </div>
  <div class="row">
    <input type="button" value="提交" class="submit">
  </div>
</div>
<style>
 * {
    margin: 0;
    padding: 0;
 }
  .container {
    width: 400px;
    margin: 0 auto;
 }
  h1 {
    text-align: center;
    padding: 20px 0;
 }
  p {
    color: #666;
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
 }
  .row {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
 }
  span {
    width: 100px;
    line-height: 40px;
 }
  .edit {
    width: 200px;
    height: 30px;
 }
  .submit {
    width: 304px;
    height: 40px;
    color: white;
    background-color: orange;
    border: none;
 }
 </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

此时效果形如：

接着实现提交功能：

// 给点击按钮注册点击事件
var submit = document.querySelector('.submit');
submit.onclick = function () {
  // 1. 获取到编辑框内容
  var edits = document.querySelectorAll('.edit');
  var from = edits[0].value;
  var to = edits[1].value;
  var message = edits[2].value;
  console.log(from + "," + to + "," + message);
  if (from == '' || to == '' || message == '') {
    return;
 }
  // 2. 构造 html 元素
  var row = document.createElement('div');
  row.className = 'row';
  row.innerHTML = from + '对' + to + '说: ' + message;
  // 3. 把构造好的元素添加进去
  var container = document.querySelector('.container');
  container.appendChild(row);
  // 4. 同时清理之前输入框的内容
  for (var i = 0; i < 3; i++) {
    edits[i].value = '';
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

此时效果形如: