webAPI

API:应用程序编程接口 是预先定义的函数，目的是提供应用程序与开发人员基于某个软件或硬件得以访问一组例程的接口。

WebAPI:浏览器提供一些功能去操作页面元素和浏览器功能的API

BOM：浏览器对象模型 操作浏览器窗口

DOM:文档对象模型 操作页面元素的API,包括html标签

dom把html看成一个文档树，通过api操作树上的节点

1.DOM

文档：一个网页就是一个文档

节点：文档中所有的内容都是节点，(属性，标签，文本，注释等)

元素：网页中的标签

属性：标签的属性

1.2 获取页面元素

• 通过id获取元素 getElementById(id属性值) 值是唯一的

  // 获取页面中id值为box的元素
  var box = document.getElementById('box');
  

• 通过标签名获取元素 getElementsByTagName(标签名) 返回一个伪数组

  内部的数据是会动态增加的

  // 获取页面中所有的p标签
  

var pL = document.getElementsByTagName('p');

+ 元素对象内部获取标签元素

```javascript
var box1 = document.getElementById('box1');
// 获取div.box1标签中所有的p标签
var ps = box1.getElementsByTagName('p');

• 根据name属性获取元素 getElementsByName() 有兼容问题

  在ie opear 浏览器中可能会获取到id名与name值相同的元素

  选中的元素也是动态变化的

  // 获取元素中name属性值为age的元素
  // 节点列表集合 NodeList
  var ages = document.getElementsByName('age');
  

• 根据类名获取元素 getElementsByClassName() 返回一个伪数组

  也是会动态增加，不支持ie8以下浏览器

  // 获取页面中所有类名为.box的元素
  var box = document.getElementsByClassName('box');
  

• 根据选择器获取元素 querySelector() 选择符合条件的第一个元素

  querySelectorAll() 获取所有符合条件的元素

  不支持ie8以下浏览器

  // 获取页面中id为box的元素
  var box = document.querySelector('#box');
  // 获取box中所有的p标签
  var ps = box.querySelectorAll('p');
  

1.3 dom的事件

• 在什么时候执行什么事情

• 执行机制:触发-响应机制

• 三要素：

  • 事件源 ：给谁绑定
  • 事件类型：绑定什么事件 click点击
  • 事件函数：事件发生后执行的内容，写在函数内部

• 事件监听：js解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发对应的绑定事件，会立刻执行事件函数

• 常用事件监听方法

  • 在html元素上绑定事件 直接在html元素上绑定，不推荐

    <p onclick="alert('我被点击了;')">点我一下试试</p>
    

  • 通过dom元素绑定事件

    var btn = document.getElementById('btn');
    btn.onclick = function(){
      alert('我被点击aaaaa');
    }
    

• 常用的鼠标事件类型：

  事件	说明
  onclick	鼠标点击事件
  ondbclick	鼠标双击事件
  onmousedowm	鼠标按下事件
  onmouseup	鼠标抬起事件
  onmousemove	鼠标移动事件
  onmouseover	鼠标经过事件
  onmouseout	鼠标移出事件

1.4 绑定事件的方式

• DOM0级事件：on方法 onclick onmouseover 只能绑定一个事件，后面绑定的会层叠先绑定的事件

• DOM 2 级绑定事件：addEventListener().参数1：事件类型，不带on;参数2：事件函数

  • 同一个元素可以绑定多次事件监听，同一个事件类型可以注册多个事件函数
  • 兼容问题: 不支持 ie9以下浏览器

• element.attachEvent() 参数1：事件类型，需要添加on；参数2：事件函数

  • 同一个元素可以绑定多次事件监听，同一个事件类型可以注册多个事件函数
  • 只支持ie10以下浏览器
  • ie8及下在执行时会出现顺序错乱

• 兼容写法

  // 事件源 事件类型，事件函数
  function addEvent(ele,type,fn){
    // ie9以上
    // 浏览器能力检测
    if(ele.addEventListener){
      ele.addEventListener(type,fn);
    }else if(ele.attachEvent){
      ele.attachEvent("on"+type,fn);
    }else {
      
    }
  }
  

1.5 事件解绑

• DOM 0级： ele.onclick = null

• DOM2级： ele.removeEventListener();参数1：事件类型；参数2：事件函数 ；

  • 只能移除有名字的函数
  • 不支持ie9以下的浏览器

• ele.detachEvent() ie8以下解绑，参数1：事件类型(on);参数2：事件函数

  function removeEvent(ele,type,fn){
    // 
    if(ele.removeEventLintener){
      ele.removerEventLintener(type,fn);
    }else if(ele.detachEvent){
      ele.detachEvent("on"+type,fn);
    }
  }
  

1.6 DOM事件流

• addEventListener 第三参数：用来事件流的方向，参数是布尔值，false:事件冒泡类型； true:事件捕获类型。默认值是false

• 事件阶段：

  • 第一个阶段：事件捕获
  • 第二个阶段：事件执行过程
  • 第三个阶段：事件冒泡
  • addEventListener() 第三个参数为false,为事件冒泡
  • addEventListener() 第三个参数为true,为事件捕获
  • onclick类型：只能进行事件冒泡过程，没有捕获阶段
  • attachEvent()：只能进行事件冒泡过程，没有捕获阶段

• 事件对象 e

  • 函数内部的参数，在触发事件时候，就会有一个对象，内部存储了与事件相关的数据

  • 有兼容性： e = e || window.event;

  • e.eventPhase 插件事件触发时所处的阶段

  • e.target 触发事件的元素

  • e.srcElement 获取触发事件真正的元素，低版本浏览器使用

    //兼容写法
    var target = e.target || e.srcElement
    

  • e.currentTarget 获取绑定事件的元素

  • e.type 获取事件类型

  • e.clientX/clinetY 鼠标距离浏览器窗口的距离

  • e.pageX/pageY 鼠标距离页面的距离 ie8以下不支持

  • 案例

    • 鼠标跟随图片动

• 取消默认行为和阻止事件传播

  • e.preventDefault() 取消默认行为
  • e.returnValue() 取消默认行为 低版本浏览器
  • e.stopPropagation() 阻止冒泡 标准
  • e.cancelBubble = true; 阻止冒泡 低版本 标准中已废弃

1.4 非表单元素属性操作

• 非表单元素属性：href,title,id,src

• 调用方式：元素对象打点调用属性名：a.href

• 注意：部分的属性名跟关键字和保留字冲突，更换写法：class-className; for--htmlFor, rowspan-- rowSpan

• 属性赋值：给元素属性赋值，等号右侧的赋值都是字符串格式

var link = document.getElementById('link');
var pic = document.getElementById('pic');
console.log(link.href);
console.log(pic.src);
pic.src = 'images/2.jpg';

• 案例
  • 点击按钮切换图片 --- 定义一个变量
  • 显示隐藏div
  • 美女相册

1.5 this

事件函数内部的this -- 指向事件源 触发事件对象 谁触发指向谁

普通函数的this -- window

构造函数的this -- new出来的实例对象

对象的方法的this -- 对象本身

1.6 获取标签内部内容的属性

• innerHTML: 会识别标签 不会去掉空白和换行

• innerText: 不会识别标签 会去掉空白和换行

  box.innerHTML; // 
  box.innerText;// 
  box.innerHTML = "<h2>我会识别标签</h2>";
  box.innerText = "<h2>我不会识别标签</h2>";
  

1.7 表单元素操作

• value 用于大部分表单元素的内容获取 除了option

• type 可以获取input框的类型

• disabled:禁用属性

• checked : 下拉菜单选中属性

• 在dom中元素对象的属性值只有一个时，会被转换成布尔值

  btn.value;// 获取
  btn.value = "点击"; // 修改
  

• 案例

  • 检测用户名和密码，不满足要求高亮显示文本框
  • 设置下拉框中的选中项
  • 搜索文本框
  • 全选和反选

1.8 自定义属性

• getAttribute(name) 获取标签的行内属性

• setAttribute(name)设置标签中的行内属性

• removeAttribute(name) 移除标签中的行内属性

• 与element.属性的区别：上述三个方法可以获取任意行内属性，包括自定义属性

  // 获取
  box.getAttribute("id");
  box.getAttribute("sex");
  // 设置
  box.setAttribute("sex","男");
  box.setAttribute("city","beijing");
  // 传的参数不需要进行属性名的修改
  box.setAttribute("class","demo");
  // 移除
  box.removeAttribute("sex");
  box.removeAttribute("class");
  

1.9 style属性的操作

• style的获取的值是行内样式组成的样式对象，内嵌式和外链的样式是得不到的
• 设置宽度，高度，位置的属性类型是字符串，需要加上px
• 复合属性转换成驼峰性
• 在实际工作中，如果需要修改多条通过类名的方式，如果需要修改的样式只有1-2条直接使用style操作
• 案例
  • 开关灯
  • 显示隐藏二维码
  • 隔行变色
  • tab栏切换

1.10 节点

节点属性

• nodeType 节点类型 属性值为数字 表示不同的节点类型,只读
  • 元素节点 1
  • 属性节点 2
  • 文本节点3
• nodeName 节点名称(标签名称) 只读
• nodeValue 节点值 返回或设置当前节点的值，注意元素节点的nodeValue始终都是null

节点层级关系

• 父子节点常用属性
  • childNodes 获取一个节点上所有子节点的集合 动态的变化的 只读
  • children 返回一个节点上所有的子元素节点的集合 动态变化 只读
  • firstChild 返回该节点上第一个子节点 ，如果没有返回null,只读
  • lastChild 该节点的最后一个子节点，如果没有返回null, 只读
  • parentNode 一个当前节点的父节点，如果没有返回null,
  • parentElement 当前节点的父元素节点，如果没有父节点，或者父节点不是一个dom元素返回null
• 兄弟节点属性
  • nextSibling 返回该节点同级的下一个节点 没有返回null,只读
  • previousSibling 返回该节点同级的上一个节点，没有返回null,只读
  • nextElementSibling 返回该节点同级的下一个元素节点，没有返回null,只读
  • previousElementSibling 返回该节点同级的上一个元素节点，没有返回null,只读
  • nextElementSibling 和 previousElementSibling 有兼容性 ie9后才支持
• 创建节点的方法
  • 创建元素节点 document.createElement("div")
  • 创建属性节点 document.createAttribute("id")
  • 创建文本节点 document.cretateTextNode("hello")
  • 一般将创建的节点保存在变量中，方便以后使用
• 增删改查,克隆节点的方法
  • parentNode.appendChild(child) 将一个节点添加到指定节点的子节点列表末尾
  • parentNode.replaceChild(newChild,oldChild) 用指定节点替换当期节点的一个子节点，并返回被替换掉的节点
  • parentNode.insertBefore(newNode,referenceNode) 在参考节点前插入一个拥有指定父节点的子节点，第二个参数必须设置，如果值为null,新节点将被插入到子节点的末尾
  • parentNode.removeChild(child) 移除当前节点的一个子节点，这个子节点必须存在于当前节点中
  • Node.cloneNode():克隆一个节点，如果参数为true就是深克隆，克隆自己和后代所有节点，如果参数为false为浅克隆，只克隆自己元素节点本身
• 节点的判断方法
  • Node.hasChildNodes() 没有参数，返回一个布尔值，表示该元素是否包含有子节点 不区分类型
  • Node.contains(child) 返回一个布尔值，表示传入的节点是否为该节点的后代节点
  • 判断当前节点是否有子节点
    • Node.firstChild !== null
    • node.childNodes.length > 0
    • node.hasChildNodes()
• 案例
  • 动态生成列表
  • 选择水果

1.11 offset 偏移量

• offsetParent 偏移参考父级 有定位的父级，没有就是body(html)
• offsetLeft/offsetTop 偏移位置
• offsetWidth/offsetHeight 自身包括border+padding

1.12 client 客户端

• 没有参考父级
• clientLeft/clientTop 边框区域的尺寸 不常用
• clientWidth/clientHeight 边框内部的大小

1.13 scroll 滚动偏移

• scrollLeft/scrollTop 盒子内部滚动出去的尺寸
• srcollWidth/scrollHeight 盒子内容的宽度和高度

2.BOM 浏览器对象模型

• 提供 了独立于页面内容，可以与浏览器窗口进行互动的对象
• window对象是BOM的顶层对象，其他对象都是该对象的子对象
• 在调用window下的子对象的时候可以省略window,有两个特殊的window.name(会在原来的name属性上赋值)和window.top (只读的，不能后期更改)
• 对话框
  • alert() 警示框
  • prompt() 提示框
  • comfirm() 用户进行确定或者取消选择的对话框
• onload事件 -- window对象加载完毕：指的是所有HTML结构加载完，并且外部引入的css,img加载完毕后才渲染js
• 一个页面中只有一个onload事件

2.1 延时器 定时器

• 是异步，同步的代码先输出，异步里面的代码必须等到同步执行完才执行

• setTimeout() 一次性定时器，参数1：延时函数，可以是匿名函数，也可以是函数名的引用，参数2：延时时间 单位是毫秒

• clearTimeout(延时器的名字) 清除延时器

• 函数节流操作

  var lock = false;
  btn.onclick = function(){
    // 函数内部需要判断是否在指定时间之外触发事件
    if(lock){
      return;
    }
    // 执行的代码
    // 执行完毕后,锁住
    lock = true;
    // 隔2秒后锁再打开
    setTimeout(function(){
      lock = false;
    },2000);
  }
  

• setInterval():参数1：定时函数 参数2：定时时间 毫秒；程序执行到定时器代码部分就相当于开启了一个定时器，不需要进行其他打开操作

• clearInterval(定时器的名字 ) 清除指定定时器

2.2 运动

简单运动

通过定时器，实现每隔一个极短的时间(50-100毫秒左右),执行函数，函数内部让运动的属性值发生变化

定时器的问题：1.多次点击，运动加速 2.多次开始不能够再停止，解决这种问题在使用定时器的时候先清除定时器

案例：

• 简易滚动轮播
• 多属性运动动画
• 高级无缝轮播
• 轮播图
• 返回顶部

2.3 location对象

返回浏览的url的地址的

2.4 history

2.5 navigator对象

包含浏览器的信息。userAgent常用