JavaScript Web API 入门与常用操作

• selectors：有效的 CSS 选择器字符串
• 返回第一个匹配到的 Element 对象
• 如果要拿所有匹配项，用 querySelectorAll()
• 也可以在任意元素上调用，它会把这个元素当作查找根节点

参数必须写成选择器格式，比如 .box 是类选择器，#id 是 ID 选择器。

<div>abc</div>
<div>def</div>
<h3><span><input type="text"></span></h3>
<script>
var elem1 = document.querySelector('.box');
console.log(elem1);
var elem2 = document.querySelector('#id');
console.log(elem2);
var elem3 = document.querySelector('h3 span input');
console.log(elem3);
</script>

querySelectorAll

querySelectorAll 的思路一样，只是返回的是一个 NodeList 集合。

<div>abc</div>
<div>def</div>
<script>
var elems = document.querySelectorAll('div');
console.log(elems);
</script>

事件

事件是什么

页面只要有交互，就离不开事件。点击、输入、选择，这些操作在浏览器里都会变成事件，JavaScript 监听到之后再决定怎么处理。

事件三要素

• 事件源：哪个元素触发了事件
• 事件类型：点击、选中、修改等动作
• 事件处理程序：具体怎么响应，通常是一个回调函数

一个简单例子

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

这里的 btn 是事件源，点击是事件类型，匿名函数负责处理事件。btn.onclick = function () {} 这类写法，通常叫注册事件或者绑定事件。

这个函数不用手动调用，浏览器会在合适的时候自己触发它。

操作元素

获取和修改内容

innerText

innerText 读的是节点及其后代的渲染文本内容。

// 读操作
var renderedText = element.innerText;
// 写操作
element.innerText = string;

它不会识别 HTML 标签。读取时更接近'页面上看得到的文字'，换行和空格也不一定会原样保留。

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
console.log(div.innerText);
div.innerText = 'hello js <span>hello js</span>';
</script>

用 innerText 改完后，标签会被当成普通文本处理，不会变成真正的 HTML 结构。

innerHTML

innerHTML 读写的是元素后代的 HTML 内容。

// 读操作
var content = element.innerHTML;
// 写操作
element.innerHTML = htmlString;

它能识别 HTML 标签，也会保留换行和空格，是更常用的结构操作方式。

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
console.log(div.innerHTML);
div.innerHTML = '<span>hello js</span>';
</script>

如果你想同时控制内容和结构，innerHTML 的适用面会更广；如果只想拿纯文本，innerText 更直接。

获取和修改属性

很多元素都可以直接通过对象属性来读写，这样改完界面会跟着变。

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

可以直接读取属性值：

console.log(img.src);
console.log(img.title);
console.log(img.alt);

也可以直接修改属性：

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

点击图片就能切换显示状态，前提是对应图片资源已经准备好。这个例子很朴素，但拿来理解'属性改了，页面也跟着变'很够用。

表单元素属性

表单元素，主要是 input，常见的可操作属性有这些：

• value：输入值
• disabled：是否禁用
• checked：复选框是否选中
• selected：下拉选项是否选中
• type：输入框类型

切换按钮文本

下面这个例子模拟'播放 / 暂停'之间切换。

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

点击计数

输入框初始值为 0，每点一次按钮加 1。

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

这里要记住一点：value 对表单元素来说就是内容本身。输入框里改的是值，按钮上显示的也是值。

全选功能

这个例子里有两个目标：

1. 点全选时，把所有选项都勾上
2. 任意一个选项取消后，全选状态也要跟着取消

<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) {
            return false;
        }
    }
    return true;
}
</script>

这个写法不算花哨，但逻辑很稳：全选按钮负责批量设置，子选项负责反向修正全选状态。实际项目里也经常是这种思路，没必要把问题绕复杂。