3 分钟快速成为脚本小子

JavaScript DOM 操作速通指南

这是一个常见的 HTML 元素：

html

<span id="search-btn" class="btn blue" onclick="javascript:searchJump(1);">
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#iconsousuo"></use>
  </svg>
  <i>搜索</i>
</span>

注意到每个元素会有以下几个可用于定位的东西：

tag：标签，比如上面的结构中有 span 元素，其子元素有 svg i 两个子元素。
id：通常是唯一确定的，就是 ID 的意思。
class：「类」，通常用很多元素都是同一个 class，方便统一设置样式用的。同样，一个元素也可以有很多个 class，接受多个设置。
attribute：其实在 <...> 中除了标签之外的内容都是 attribute，包括 id="search-btn"。但是我们讨论选择器的时候一般排除 id 和 class，这里我们说 onclick 是其 attribute，值为 javascript:searchJump(1);。

CSS 选择器入门

选择器是用于定位元素的强大方式。

规定：id 用 # 标记，class 用 . 标记。比如，上面的 span 标签对应的选择器为：

css

span#search-btn.btn.blue

但是这些属性不需要全部覆盖，而是可以自由组合，所有下面的这些选择器都能选到这个元素：

css

span,
#search-btn,
.btn,
.blue,
.btn.blue,
span.btn,
#search-btn.blue,
......

还可以通过 attribute 来筛选元素：

css

span[onclick="javascript:searchJump(1);"]

这同样可以和上面的那些选择器自由组合。

还可以通过元素的结构关系来选择元素。比如，我们想选中上面的 i 标签，而 i 标签没有什么自己的特色，我们就可以这样：

css

span#search-btn.btn.blue i

用空格隔开，表示前者的所有子节点（包括子元素和子元素的子元素）中筛选符合后面的。这个也可以多写几个，比如

css

header div#searchbox span#search-btn.btn.blue i

如果不想选择子节点的子节点，只想选择下一级的的元素，使用符号 >：

css

header > div#searchbox

这样我们的 span 元素就不会被选中了。

总之，CSS 选择器是一种描述元素的方式。浏览器会根据你的描述筛选页面中符合条件的元素。描述越详尽，浏览器给出的元素数量就会越少直至唯一。

JavaScript 快速入门

申请变量使用 let 关键字，不必指明类型：

let m;

行尾的分号可以省略。写了更清楚。

条件（和 C 大差不差）

if (condition) {
  //do something
} else {
  //do something
}

循环（单双引号可以混用）

let array = ["a", "b", "c", "d"];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}
for (let i of array) {
  console.log(i);
}
let j = array.length;
while (j--) {
  console.log(array[j]);
}

输出

a
b
c
d
a
b
c
d
d
c
b
a

设置定时器：

setTimeout(() => {
  console.log("setTimeout!");
}, 600);
setInterval(() => {
  console.log("setInterval!");
}, 2000);

上述代码执行之后，控制台在 600ms 后输出 'setTimeout!'，每 2s 输出一次 'setInterval!'。注意，这个定时器不是太准，看情况可能有 20ms ~ 80ms 的误差，不要用来精确计时。

我们常常会等待页面加载完成之后再执行代码（否则有时候页面元素调用不到），使用：

window.onload = () => {
  //do something
};

还有一些常用的东西

alert("Alert box");
console.log(confirm("Confirm box"));

上述代码的效果是弹出一个提示框，关掉之后弹出一个选择框（确定 / 取消），控制台打印结果，如果确定就是 true，取消就是 false。

注意，alert 和 confirm 是少数几个引起代码阻塞的语句。这条没完下面的不会不会执行。

大部分代码都不会造成阻塞，包括上面的定时器。这是一种叫做异步的东西。

JS DOM 操作

获取页面元素：

let a = document.getElementById("search-btn");
let b = document.querySelector("span#search-btn.btn.blue");
let c = document.querySelectorAll("span");

上述方法都是字面意思。前两个返回的都是 HTML 元素，最后一个返回的是一个 NodeList，把它当成一个 HTML 元素组成的数组就好了。

如果找不到，querySelectorAll 会返回一个空的 NodeList，querySelector 和 getElementById 会返回 null。

元素的方法：我看你们就只用一个：

a.click();

字面意思，对 a 触发一个点击操作。

好了你已经掌握了成为一个脚本小子的基本技能。去写脚本刷课吧！

3 分钟快速成为脚本小子 ​

CSS 选择器入门 ​

JavaScript 快速入门 ​

JS DOM 操作 ​

3 分钟快速成为脚本小子

CSS 选择器入门

JavaScript 快速入门

JS DOM 操作