API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无须访问源码，或理解内部工作机制的细节
任何开发语言都可以有自己的APIAPI的特征输入和输入（I/O）API的使用方法浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
特指浏览器给JS提供的API（一组方法）
DOM的最小组成单位叫做节点，文档的树形结构（DOM树），就是由各种不同类型的节点组成
每个节点都可以看做是文档树的一片叶子或一个枝干
最顶层的节点就是document节点，他代表了整个文档；是文档的根节点
每张网页都有自己的document节点，window.document属性就指向这个节点的
只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用
每个HTML标签元素，在DOM树上都会转化成一个Element节点对象
文档里面最高一层一般是HTML标签，其他HTML标签节点都是他的下级
除了根节点之外，其他节点对于周围的节点都存在三种关系：
父节点关系(parentNode):直接的那个上级节点 子节点关系(childNodes):直接的下级节点 同级节点关系(sibling):拥有同一个父节点的节点事件的三要素
事件源：触发(被)事件的元素事件类型：事件的触发方式(例如鼠标点击或键盘点击)事件处理程序：事件触发后要执行的代码(函数形式)addEventListener：添加事件监听，第一个参数是要执行的动作，第二个参数是执行完动作后执行的操作·
//添加事件监听者 <input type="button" value="按钮" id="btn2"> //先获取节点对象，然后调用节点对象的方法，添加事件监听者 <script> var btn2 = document.getElementById('btn2'); btn2.addEventListener('click',function(){ console.log(3); }); </script>this关键字的问题
如果使用行内绑定，且绑定事件的处理程序是一个独立的函数，那么函数中的this指向window对象在同一个元素身上绑定了对个相同的事件，处理程序都是不一样的
行内绑定如果有相同的事件绑定，那么谁在前面执行谁，在行内中从左到右先找到谁就用谁
动态绑定如果有相同的事件绑定，那么谁在后面执行谁，后面的事件绑定会替换前面的事件绑定事件监听，如果有相同的事件绑定，事件会从上往下挨个执行，不会被替换事件监听方式绑定事件后，可以进行解绑，其他两种不可以
var af = function(){ console.log(85555); } btn2.addEventListener('click',af); // 将绑定在节点元素身上的事件进行解绑 btn2.removeEventListener('click',af); 事件监听的绑定方式可以选择事件处理阶段，另外两种不可以load:一个资源及其相关资源完成加载后触发的事件
<body onload="f1()"> </body> <script> function f1(){ console.log(333); } </script>onfocus：元素获得焦点
onblur：元素失去焦点
绑定在有焦点的元素身上 <body> <input type="text" id="text" value="请输入用户名"> </body> <script> var t = document.getElementById('text'); t.onfocus = function(){ console.log('hhhh'); } t.onblur = function(){ console.log('gggg'); } </script>onchange :域的内容发生改变，一般用于文件选择器和下拉列表
oninput :当内容改变时触发(值变化事件)
<body> <input type="text" id="tt"> </body> <script> var tt = document.getElementById('tt'); // 当内容改变且失去焦点的时候触发 tt.onchange = function(){ console.log('hhhh'); } // 只要内容有变化则触发事件 tt.oninput = function(){ console.log('kkk'); } </script>事件发生以后，系统会调用我们写好的事件处理程序
系统会在调用处理程序时，将事件发生的有关事件的一切信息，封装成一个对象，作为参数传给监听函数(事件处理程序)，我们把这个现象称为事件对象
有关事件发生的一切信息，都包含在这个事件对象中；
根据事件类型的不同，事件对象中包含的信息也有所不同；
如点击事件，包含鼠标点击的横纵坐标位置，键盘事件中，包含键盘的键值等；
<body> <div id="d1"> <p> ssaaa </p> </div> <input type="text" id="tt"> </body> <script> var d1 = document.getElementById('d1'); d1.onclick = function(xxx){ console.log(xxx); } document.getElementById('tt').onkeyup = function(ccc){ console.log(ccc); }; </script>event.bubbles: 属性返回一个布尔值，表示当前事件是否会冒泡；
event.eventPhase：返回一个整数值，表示事件留在传播阶段的位置
0：事件目前并没有发生1：事件目前处于捕获阶段2：事件到达目标节点3：事件处于冒泡阶段event.type：返回一个字符串，表示事件类型，大小写敏感
event.timeStamp：返回一个毫秒时间戳，表示事件发生的时间；
clientX、clientY：获取鼠标事件触发的坐标
<body> <div id="d"> kkkk <input type="text" id="t"> </div> </body> <script> document.getElementById('d').onfocus = function(){ console.log(33); } // document.getElementById('t').onfocus = function(ev){ // console.log(ev.bubbles); // console.log(44); // } document.getElementById('d').onclick = function(ev){ console.log(ev); console.log(55); } </script>target：获取触发事件的节点对象
currentTarget：获取事件源(打印这个id所包含的全部内容)
<body> <div id="d"> <p id="p">1111</p> <p>444</p> <p>555</p> </div> </body> <script> var d = document.getElementById('d'); // 事件代理，事件委托 d.onclick = function(ev){ // console.log(211); // 获取触发事件的节点对象 // console.log(ev.target); // 获取到事件源在哪里 // console.log(ev.currentTarget); ev.target.style.background = 'skyblue'; } </script>event.preventDefault()：取消浏览器对当前事件的默认行为
比如连续点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离
event.stopPropagation：
阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数
<body> <div id="d1"> <div id="d2"> 3333 <a id="aa" href="http://baidu.com">百度</a> </div> </div> </body> <script> var d1= document.getElementById('d1'); var d2 = document.getElementById('d2'); var d3 = document.getElementById('aa'); d1.onclick = function(){ console.log(222); } d2.onclick = function(ev){ // 阻止事件传播 ev.stopPropagation(); console.log(111); } d3.onclick = function(ev){ // 阻止浏览器的默认行为,超链接不进行跳转 ev.preventDefault(); console.log(111); } </script>document.creatElemnet()
用来生成网页元素节点，参数为元素的标签名
document.createTextNode()
用来生成文本节点，参数为所要生成的文本节点的内容
node.appendChild
接受一个节点对象作为参数，将其作为最后一个节点，插入当前节点
node.hasChildNodes
返回一个布尔值，表示当前节点是否有子节点，(空格回车都算子节点)
node.removeChild
接受一个子节点作为参数，用于从当前节点移除该子节点
node.cloneNode
用于克隆一个选中的节点
他接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不可隆子节点
**注意：**不会克隆绑定到该元素上的事件
node.innerHTML
返回该元素包含的HTML代码。该属性可读写，常用来设置某个节点的内容；(不属于W3C DOM 规范) node.innerText
返回该元素包含的内容。该属性可读写
node.nextElementSibling
返回紧跟在当前节点后面的第一个统计Element节点，如果当前节点后面没有同级节点，则返回null
node.previousElementSibling
返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null
node.parentElement
返回当前节点的父级Element节点
node.childNodes
返回一个NodeList集合，成员包括当前节点的所有子节点（空格，回车也算）
node.firstChild
返回树中节点的第一个子节点，如果节点是无子节点，则返回null
node.lastChild
返回该节点的最后一个子节点，如果该节点没有子节点，则返回null
HTML元素节点的标准属性(即在标准中定义的属性)，会自动成为元素节点对象的属性
node.getAttribute()
返回当前元素节点的指定属性，如果指定属性不存在，则返回null
node.setAttribute()
为当前元素节点新增元素，如果同名属性已存在，则返回null
node.hasAttribute()
返回一个布尔值，表示当前元素节点是否包含指定属性
node.removeAttribute()
从当前元素节点移除属性
<body> <!-- HTML中的属性在js中获取到这个节点对象后，HTML中的属性会自动的称为节点对象的属性 --> <div id="d1" ksf="ddd" src="xx1">111</div> <img src="xxx" alt="" id="ii"> </body> <script> //原生属性的操作 var d1 = document.getElementById('d1'); // 获取节点对象的属性 // console.log(d1.id); // 直接给节点对象的属性赋值，会直接 修改到页面中 // d1.id = 'ddd'; // console.log(d1.src); // 通过对象语法只能操作节点对象的原生属性，自定义属性无法操作 // console.log(d1.ksf); //undefinded // 原生属性并不是所有标签通用 // var i = document.getElementById('ii'); // console.log(ii.src); // 非原生属性 // 获取节点对象的属性(原生属性和非原生属性都可以操作) // var ss = d1.getAttribute('id'); // console.log(ss); // var ksf = d1.getAttribute('ksf'); // console.log(ksf); // 设置节点对象的属性 // d1.setAttribute('id','dddd11'); // d1.setAttribute('ksf','5555'); console.log(d1.hasAttribute('aa')); if(d1.hasAttribute('aa')){ d1.removeAttribute('aa'); }else{ d1.removeAttribute('ksf'); } </script>每个DOM对象都有style属性，我们可以直接操作，用来读写行内css样式
小细节：
名字需要改写，将横杠从css属性名中去除，然后将横杠后的第一个字母大写
比如background-color 要写成backgroundColor
属性值都是字符串，设置时必须包括单位
比如id.style.width = ‘100px’;
如果将样式写在style标签内
getComputedStyle()
接受一个节点对象，返回该节点对象最终样式信息的对象，所谓“最终样式信息”，指的是各种css规则叠加后的结果
注意：getComputedStyle()是Windows对象下的方法，不是DOM对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css样式操作</title> <style> #d2{ width: 200px; height: 200px; border:3px solid skyblue; } </style> </head> <body> <div id="d1" style="width: 400px;height: 400px;border: 3px solid skyblue;"></div> <div id="d2" style="width: 300px;height: 300px;"></div> </body> <script> var d1 = document.getElementById('d1'); d1.onclick = function(){ // node.style.xx 仅限于获取行内样式的操作，外联样式不能获取 // 设置css样式 d1.style.backgroundColor = 'skyblue'; // 获取css样式 console.log(d1.style.width); d1.style.width = '500px'; } var d2 = document.getElementById('d2'); d2.onclick = function(){ // 无法获取 // console.log(d2.style.width); // 可以获取 var w = getComputedStyle(d2).width; console.log(w); d2q.style.backgroundColor = 'skyblue'; d2.style.width = '400px'; } </script> </html>Browser Object Model 浏览器对象模型(BOM)，浏览器对象模型提供了独立于内容、可以与浏览器窗口进行互动的对象结构，我们使用JavaScript与浏览器交互的所有内容，均来自浏览器对象模型
浏览器对象模型的具体实例化对象就是Window对象
BOM是Windows对象的子对象
window.alert()
显示一个警告对话框，上面显示有指定文本内容以及一个”确定“按钮
window.prompt()
显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
window.confirm()
方法显示一个具有一个可选消息和两个按钮（确定和取消）的横态对话框
**注意：**Windows对象下的所有属性和方法在js调用时，可以直接写属性或方法的名字，不需要使用window.
window.console：返回console对象的引用，该对象提供了对浏览器调试控制台的访问
console.clear()：清空控制台
console.error：打印一条错误消息
console.table：将数组或对象数据在控制台以表格形式打印
console.log：打印字符串，使用方法类似于printf、echo等格式输出
setTimeout()和clearTimeout()
在指定的毫秒数到达之后执行指定的函数，只执行一次
setInterval()和clearInterval()
定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计时器</title> </head> <body> <input type="button" value="停止" id="stop"> </body> <script> // 倒时器，在指定的毫秒数到达后执行的函数，函数值执行一次 //实现在几秒之后的一次提示 var m = setTimeout(function(){ console.log('hhhh'); },1000); // 清除倒时器 clearInterval(m); // 定时器 每隔两秒执行函数 //setInterval 按照指定的周期（以毫秒计）来调用函数或计算表达式 var t = setInterval(function(){ var a = new Date(); console.log(a.getTime()); // console.log('小宝贝'); }, 2000); // 在20000毫秒内清除计时器 setTimeout(function(){ // 清除计时器 clearInterval(t); }, 20000); // 点击停止按钮便清楚计时器 document.getElementById('stop').onclick = function(){ clearInterval(t); }; </script> </html>