javaEE -15（ 13000字 JavaScript入门

这篇具有很好参考价值的文章主要介绍了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 树.

页面结构形如:
javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java
DOM 树结构形如：

重要概念:

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

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

2.1 获取元素

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

通过元素名称选择元素：

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

通过类名选择元素：

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

通过ID选择元素：

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

通过属性选择元素：

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

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

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

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

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

注意事项：

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

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

获取 body 元素：

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

获取 html 元素：

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

三：事件

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

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

事件三要素

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

简单代码示例：

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

首先，HTML部分：

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

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

接下来，JavaScript部分：

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

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

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

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

其中：

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

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

常见的鼠标事件：
javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java

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 元素的内容。下面是一些示例：

获取元素的 HTML 内容：

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

设置元素的 HTML 内容：

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

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

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

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

3.1.2 获取/修改元素属性

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

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

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

此时可以看到 img 这个 Element 对象中有很多属性
javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java
我们可以在代码中直接通过这些属性来获取属性的值.

<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>

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java
还可以直接修改属性：

<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>

这段代码实现了一个简单的点击切换图片效果，当用户点击图片时，会在 “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>

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java
点击暂停后：

代码示例 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>

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java
点击一次：

再点击一次：

代码示例 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>

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java
点击我全部都要按钮后：

也可以选单个按钮：

3.1.4 获取/修改样式属性

3.1.4.1 行内样式操作

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

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

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

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

element.style.backgroundColor = "red";

代码示例 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>

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

例如:

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

3.1.4.2 类名样式操作

element.className = [CSS 类名];

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

element.className = "active";

修改元素的 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';
 }
}

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java

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

3.1.5 自定义属性的操作

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

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

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

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

3.1.5.1 获取自定义属性的值

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

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

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

3.1.5.2 移除自定义属性

element.removeAttribute(‘属性’);

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

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

3.2 操作节点

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

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

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

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

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

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java

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

节点类型有三种：

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

3.2.1 节点层级

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

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java

3.2.1.1 父级节点

node.parentNode

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

3.2.1.2 子节点

1. parentNode.children

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

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

2. parentNode.firstChild

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

3. parentNode.lastChild

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

4. parentNode.firstElementChild

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

5. parentNode.lastElementChild

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

3.2.1.4 兄弟节点

1. node.nextSibling

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

2. node.previousSibling

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

3. node.nextElementSibling

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

4. node.previousElementSibling

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

3.2.2 新增节点

分成两个步骤

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

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

3.2.2.1 创建节点

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

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

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

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

3.2.2.1 插入节点

插入节点有两种方法：

方法一：

node.appendChild(child)

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>

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java

方法二：

node.insertBefore(child, 指定元素)

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>

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java
注意: 如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)

<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>

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java

3.2.3 删除节点

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

语法：

parent.removeChild(child)

参数：

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>

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

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

child.remove();

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

3.2.4 复制节点

node.cloneNode()

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

注意：

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

3.2.5 替换节点

parentNode.replaceChild(newChild, oldChild);

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

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>

javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java

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="提交">

此时效果形如：
javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java
接着调整样式：

<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>

此时效果形如：
javaEE -15（ 13000字 JavaScript入门 - 2）,javaEE,java-ee,javascript,java
接着实现提交功能：

// 给点击按钮注册点击事件
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 = '';
 }
}