文章目录
一、WebAPI是什么？
本质上可以看成一些现成的方法来供程序员调用，方便开发。
由于WebAPI有很多，大多数使用都是以查阅接口的详细说明文档为主，本文主要列举一些开发中常用的API。
二、事件
2.1 概念
JS要构建动态页面，就需要感知用户的行为。用户对于页面的一些操作，比如点击、选择、修改等操作都会在浏览器中产生一个个时间，被JS获取到，从而达到交互的效果。
其中，最常用的事件就是点击事件onclick。
2.2 事件三要素
- 事件源：哪个元素触发的；
- 事件类型：是点击，选中，还是修改？
- 时间处理程序：进一步如果处理，往往是一个回调函数；
三、获取元素
需要通过一个API，querySelector函数来实现~该方法返回匹配指定CSS选择器的一个元素。
/* 语法:
参数：CSS选择器
类型：String
返回值：匹配指定CSS选择器的第一个元素，如果没有找到，返回null。
*/
document.querySelector(CSS selectors);
<div class="box">abc</div>
<script>
var elem1 = document.querySelector('.box');
console.log(elem1);
</script>
若选中的元素有多个，但querySelector只能获取到其中一个，如果想要都获取到，就需要使用querySelectorAll函数来实现~
<div class="box">abc</div>
<div id="id">def</div>
<script>
var elems = document.querySelectorAll('div');
console.log(elems);
</script>
四、操作元素
4.1 获取/修改元素内容
//读操作
元素对象.innerText;
//写操作
元素对象.innerText = String;
4.1.1 innerText
innerText只能获取/修改元素里面的文本；
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 读取 div 内部内容
console.log(div.innerText);
// 修改 div 内部内容, 界面上就会同步修改
div.innerText = 'hello js <span>hello js</span>';
</script>
网页效果如下图所示，因为innerText无法获取到div内部的HTML结构，之恶能得到本文内容，所以修改页面时把span标签也当成本文来显示了。
4.1.2 innerHTML
innerHTML不仅可以获取/修改元素里面的文本，也可以获取/修改里面嵌套的标签；
<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>
与innerText不同的是，innerHTML不仅可以获取到文本，同时也能获取到页面的HTML结构并且修改页面结构。显然innerHTML的应用要比innerText更广。
4.2 获取/修改元素属性
直接通过JS代码来修改相关属性，
<img src="rose.png" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
img.onclick = function(){
img.src = 'cat.png';
}
</script>
上面的代码实现的功能是，当点击rose.png这张图片时，将图片换成cat.png显示
4.3 获取/修改表单元素属性
4.3.1 value:input标签的值
<input type="button" value="播放">
<script>
var btn = document.querySelector('input');
btn.onclick = function () {
if (btn.value === '播放') {
btn.value = '暂停';
} else {
btn.value = '播放';
}
}
</script>
上述diamagnetic中，input标签是按钮，value表示按钮的内容，可以通过反复点击按钮来达到更换按钮文本值的功能。
4.4 获取/修改样式属性
4.4.1 行内样式操作
<div style="color: black; font-size:20px">哈哈</div>
<script>
var div = document.querySelector('div');
div.onclick = function () {
var curFontSize = parseInt(this.style.fontSize);
curFontSize += 50;
this.style.fontSize = curFontSize + "px";
}
</script>
上述代码实现了点击文字使其放大的功能，显然其修改的是文字的大小样式。
4.4.2 类名样式操作
-
基本语法
/* 获取属性 /
HTMLElementObject.className
/ 设置属性值 */
HTMLElementObject.className=classname
五、操作节点
5.1 新增节点
5.1.1 创建元素节点
var element = document.createElement(tagName);
5.1.2 插入节点到 DOM 树中
创建新的元素节点后将其插入到DOM树中才会在页面中显示出来。
-
appendChild 是把新元素插入到父元素的所有子节点最后；
element.appendChild(aChild);
刷新网页可以看到新创建的节点div已经被加入到了DOM树中。
-
insertBefore 是把新元素插入到指定子元素的前面；
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
11
22
33
44
<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[2]);
container.insertBefore(newDiv, container.children[4]);
</script>
上述代码中将新节点 newDiv 前后两次插入到第二个元素前和第四个元素前，网页显示如下图，显然最后新节点是插入到了第四个元素之前，即最后一个插入操作生效。
5.2 删除节点
removeChild : 删除某个父元素的指定子元素；
oldChild = element.removeChild(child);
同样使用上述的代码例子，最后一行将第二个元素节点删掉。
<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[2]);
container.removeChild(container.children[1]);
</script>
