WebAPI
1.API（Application Programming Interface,应用程序编程接口）,通俗的讲，API就是编程语言给我提供的一些工具，通过这些工具，我们可以非常轻易的完成一些功能。
2.Web API : 浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）, 通过这套API我们可以非常轻松的操作页面的元素和浏览器的一些功能。
3.任何开发语言都有自己的API
4.API的特征是输入输出（I/O）
5.API使用方法（console.log())
javascript组成
1.ECMAScript - JavaScript的核心：ECMAScript是一套标准, 规范了语言的基本语法和数据类型
与具体实现无关。
2.BOM - 浏览器对象模型：
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口, 比如刷新、控制浏览器跳转等。
3.DOM - 文档对象模型：
一套操作页面元素的API
通过DOM提供的API可以获取/操作网页上的元素。
DOM
1.DOM ( Document Object Model ) 文档对象模型, 是W3C组织推荐的一套操作网页元素的API。
2.DOM又称为文档树模型, 因为整个HTML文档是一个树形的结构。
常见概念
1.文档 document : 一个网页可以称为文档 ; (换句话说: 操作页面,其实就是操作document)
2.节点node : 网页中的所有内容都是节点 (标签、属性、文本)
3.元素 element : 网页中的标签节点
4.属性：标签的属性
获取网页元素
1.根据id获取
document.getElementById()
功能：通过id 获取元素
document : 文档对象
get : 得到
element:元素
by:通过
id:id值
参数 : 字符串类型的id
返回值 : 一个元素 一个对象
var div = document.getElementById('div');
console.dir(div);
注：
console.log打印一个元素的时候，是以标签的形式进行展示的
console.dir打印一个元素的时候，是以对象的形式进行展示的（对象是有类型的）
DOM中，页面标签的属性和DOM对象的属性是一一对应的，因此我们可以通过修改DOM对象的属性来修改标签的属性。
如果id不存在,返回值为null
2.根据标签名获取
getElementsByTagName
作用 : 根据标签名获取元素
参数：标签名
返回值：伪数组，无论有几个元素，返回都是伪数组
document.getElementsByTagName("tagName");
box.getElementsByTagName("tagName");
//getElementsByTagNameNS 命名空间
var btns = document.getElementsByTagNameNS('*','button');
注：
getElementByTagName获取的集合是动态集合
如果参数不存在,返回值为0
3.根据类名获取
getElementsByClassName
作用 : 根据类名获取元素
参数：字符串类型的类名
返回值：伪数组
document.getElementsByClassName("class")
4.根据name获取
getElementsByName
作用 : 通过name属性值 获取元素
参数 : name值
返回值 : 伪数组
var ps = document.getElementsByName("aa");
5.根据css选择器获取（重点）
document.querySelector();
简单选择器 : div .box #box
复杂选择器 : * div,p p.div div p div>p
作用 : 根据css选择器获取
参数：是一个css选择器
如果是类选择器， .demo
如果是id选择器： #aa
返回值：只会返回一个对象，如果有很多个，会返回第一个
document.querySelectorAll();
参数：是一个css选择器
返回值：会返回伪数组，不管有多少个，都会返回伪数组
事件
1.事件：
理解为浏览器的感知系统 , 触发 --> 响应机制
javascript是基于事件驱动的。
2.事件三要素 :
事件源 + 事件名称 + 事件处理函数
事件源 : 给谁注册事件 ( 按钮 btn )
事件名称 : 注册了什么事件 ( click事件 )
事件处理函数 : 事件触发后要执行的代码(函数形式)
注：事件处理函数并不会立马执行，而是当事件触发的时候才会执行（浏览器会自动调用）
3.基本语法 :
var box = document.getElementById('box');
//on:当 click:点击 当按钮被点击的时候触发
box.onclick = function() {
console.log('代码会在box被点击后执行');
};
属性
1.普通标签属性：
通过DOM设置普通标签属性，两边都会变化。常见的属性有：src、title、href、class、id等
2.表单属性操作：
常见的表单属性有：disabled、type、value、checked、selected
（1）disabled : 禁用
true : 禁用
false : 不禁用
（2）checked : 多选框和单选框选中
true : 选中
false : 不选中
（3）selected : 菜单下拉框选中
true : 选中
false : 不选中
在DOM对象中，他们的赋值.只要有值,很多都可以起到效果,但是为了统一规范, 使用 true/false
3.标签的自定义属性：
<div id="box" aa="bb"></div>
// 给div标签中 添加不存在的未知属性aa, 这就是自定义属性
innerText 和 innerHTML
1.都是用来获取和设置标签的内容的。
2.innerHTML可以用于获取和设置标签的所有内容，包括标签和文本内容。
3.innerText可以用于获取和设置标签的文本内容，会丢弃掉标签。
4.innerHTML能够识别标签，标签能够生效；innerText只识别文本，标签会被转义。
处理兼容性问题
function getInnerText(element){
if(typeof element.innerText === "string"){
return element.innerText;
} else {
return element.textContent;
}
}
注：innerText是IE提出来的属性，因此低版本的火狐浏览器不支持这个属性。火狐有一个textContent属性，效果跟innerText一样，但是IE678不支持这个属性。
节点
1.节点分类：
元素节点、文本节点、属性节点、注释节点
2.节点常用的属性：
nodeType: 节点类型 元素节点 = 1 属性-2(过时) 注释-8 文本-3
nodeName: 节点名称
nodeValue: 节点值
childNodes : 获取所有的子节点
3.查找节点
（1）childNodes:获取所有的孩子节点（包括了元素节点和其他很多类型的节点，基本不常用）
（2）children — 获取所有的子元素（用途很广泛），兼容性：IE678会把注释节点算上。
（3）firstChild 第一个子节点 firstElementChild 第一个子元素
（4）lastChild 最后一个节点 lastElementChild 最后一个子元素
（5）第几个元素 children[n] 第n个元素
4.兄弟节点：
nextSibling:下一个兄弟节点
nextElementSibling:下一个兄弟元素
previousSibling 上一个兄弟节点
previousElementSibling 上一个兄弟元素
5.父亲节点
parentNode:父节点
创建节点
1.document.write（基本不用）:
(1)可以生成新的节点，但是不推荐使用。
如果页面已经加载完成了，还是用document.write写内容的话，会把之前的页面给覆盖掉.
(2)document.write的本意就是在文档流上写入内容。如果页面没加载完成，文档流还是开着的，document.write直接在这个文档流上写东西
(3)如果页面加载完成了，还是用document.write写东西，会重新开启一个新的文档流，往新的文档流上写东西，旧的文档流就被新的文档流覆盖了。
window.onload = function () {
document.write('你好')
}
2.innerHTML (偶尔用):innerHTML创建节点的时候有一个特点，如果原来有内容的话，使用innerHTML会把原先的内容给干掉。
div.innerHTML = '<h1>你好</h1>'
3.createElement (常用)：
语法：var element = document.createElement("tagName");
作用：在内存里面创建了一个节点
返回：一个元素
var div = document.querySelector('div')
var h1 = document.createElement('h1');
console.log(h1);
h1.style.background = 'red';
h1.innerText = '哈';
div.appendChild(h1);
添加节点 (重点)
1.appendChild 在子元素的最后添加一个新元素
语法：parent.appendChild(newChild)
parent : 调用者，父节点来调用
newChild : 需要添加的那个孩子。
作用 ：把newChild添加到parent的孩子的最后面。
注：如果添加的是页面中本来就存在的元素，是一个剪切的效果，原来的就不在了。
克隆节点 (重点)
语法：var newNode = 节点.cloneNode(deep)
功能：在内存中克隆一份节点
参数：false / true
false：默认值：是浅复制，只会复制标签，节点本身，不会复制节点的孩子。
true: 深度复制，会复制标签，还会复制标签的所有内容 常用
var newNode = div.cloneNode(true);
// false : 浅复制 只复制该元素
// true : 深复制 不仅复制该元素 还复制其子元素
console.log(newNode);
注：
克隆出来的节点跟原来的节点没有关系，修改了也不会相互影响。
如果克隆的节点带了id，我们需要给id重新设置一个值，不让id冲突。
删除节点 (重点)
语法：
parent.removeChild(child);
解析 : 父元素.removeChild(子元素);
功能：有父盒子调用，删除里面的一个子元素。
使用1 :
div.removeChild(p);
使用2 :
p.parentNode.removeChild(p);
替换节点
语法：parentNode.replaceChild(newChild, oldChild);
newChild用来替换 oldChild的新节点。
如果newChild已经存在于DOM树中，则它会被从原始位置删除。