一、Web API 介绍
1.1 概述
JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。
一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。
因此这里也可以称为 网页编程或网页特效。
1.2 什么是BOM
BOM 是 JavaScript 操作浏览器的接口，全称为“浏览器对象模型”（Browser Object Model）。
浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。
比如: 操作网页元素、弹出框、控制浏览器跳转、刷新浏览器、后退、前进、在浏览器中输入URL等等。
console.log(window)
1.3 什么是DOM
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。 也就是window对象下的document对象，它的作用是将网页转为一个 JavaScript 对象， 从而可以用脚本进行各种操作（比如增删内容）。
console.log(document)
二、CSS操作
2.1 操作行内样式
2.1.1 添加样式
- 直接读写 CSS 的样式属性，不过，连词号需要变成骆驼拼写法。
var oDiv = document.querySelector('div').style;
oDiv.backgroundColor = 'red';
oDiv.border = '1px solid black';
oDiv.width = '100px';
oDiv.height = '100px';
oDiv.fontSize = '10em';
oDiv.backgroundColor // red
oDiv.border // 1px solid black
oDiv.height // 100px
oDiv.width // 100px
cssText属性用来读写当前规则的所有样式声明文本。
var oDiv = document.querySelector('div').style;
oDiv.cssText = 'background-color: red;'
+ 'border: 1px solid black;'
+ 'height: 100px;'
+ 'width: 100px;';
CSSStyleDeclaration.setProperty方法用来设置新的CSS属性。该方法没有返回值。
// HTML 代码为
// <div id="myDiv" style="color: red; background-color: white;">
// 111
// </div>
var style = document.getElementById('myDiv').style;
style.setProperty('border', '1px solid blue');
该方法可以接受三个参数。
2.1.2 删除样式
- 删除一个元素的所有行内样式，最简便的方法就是设置
cssText为空字符串。
divStyle.cssText = '';
CSSStyleDeclaration.removeProperty方法接受一个属性名作为参数，在 CSS 规则里面移除这个属性，返回这个属性原来的值。
// HTML 代码为
// <div id="myDiv" style="color: red; background-color: white;">
// 111
// </div>
var style = document.getElementById('myDiv').style;
style.removeProperty('color') // 'red'
// HTML 代码变为
// <div id="myDiv" style="background-color: white;">
2.1.3 获取样式 `CSSStyleDeclaration.getPropertyValue`方法接受 CSS 样式属性名作为参数，返回一个字符串，表示该属性的属性值。
// HTML 代码为
// <div id="myDiv" style="width: 200px; height: 200px; margin: 10px; color: red;"></div>
var style = document.getElementById('myDiv').style;
style.margin // "10px"
style.getPropertyValue("margin") // "10px"
2.2 计算后样式
行内样式（inline style）具有最高的优先级，改变行内样式，通常会立即反映出来。 但是，网页元素最终的样式是综合各种规则计算出来的。 因此，如果想得到元素实际的样式，只读取行内样式是不够的，需要得到浏览器最终计算出来的样式规则。
var div = document.querySelector('div');
var styleObj = window.getComputedStyle(div);
styleObj.backgroundColor
var result = window.getComputedStyle(div, ':before');
三、属性操作
HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”(attribute)。我们接下来就是要对这些属性进行学习。
3.1 某元素的所有属性
扫描二维码关注公众号，回复：
14289423 查看本文章
元素对象有一个attributes属性，返回一个类似数组的动态对象，成员是该元素标签的所有属性节点对象，属性的实时变化都会反映在这个节点对象上。
<body>
<img src="./1.png" alt="asdfd" title="adsfsadf2" data-id="adsfdfdf2e">
<script>
let oImg = document.querySelector("img");
console.log(oImg.attributes);
</script>
</body>
3.2 元素的标准属性
HTML 元素的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性。
var a = document.getElementById('test');
a.id // "test"
a.href // "http://www.example.com/"
这种用法虽然可以读写属性，但是无法删除属性，delete运算符在这里不会生效。
3.3 操作属性
3.3.1 获取属性
Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。
// HTML 代码为
// <div id="div1" align="left">
var div = document.getElementById('div1');
div.getAttribute('align') // "left"
3.3.2 设置属性
Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。该方法没有返回值。
// HTML 代码为
// <button>Hello World</button>
var b = document.querySelector('button');
b.setAttribute('name', 'myButton');
b.setAttribute('disabled', true);
3.3.3 判断是否含有属性
Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性。
var d = document.getElementById('div1');
if (d.hasAttribute('align')) {
d.setAttribute('align', 'center');
}
上面代码检查div节点是否含有align属性。如果有，则设置为居中对齐。
3.3.4 移除属性
Element.removeAttribute方法移除指定属性。该方法没有返回值。
// HTML 代码为
// <div id="div1" align="left" width="200px">
document.getElementById('div1').removeAttribute('align');
// 现在的HTML代码为
// <div id="div1" width="200px">
3.3. 修改属性
获取属性的值
let strAttr = oImg.getAttribute("a");
console.log(strAttr);
设置属性的值
oImg.setAttribute('src', "./images/x.gif");
oImg.setAttribute("data-id", "abcdefg");
删除属性
oImg.removeAttribute('a');
oImg.removeAttribute('b');
判断是否包含某属性
console.log(oImg.hasAttribute('a')); // true
console.log(oImg.hasAttribute('c')); // false