JS知识点笔记（基础）

1. JS常用函数；有些前面都要加个：document.
   getElementById()：通过id获取元素
   getElementsByTagName：通过标签获取元素
   getElementsByClassName：通过类名获取元素
   querySelector()：返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
   querySelectorAll()：返回指定选择器的所有元素对象集合
   body：获取body元素
   documenElement：获取HTML元素
   createElement：创建元素
   insertBefore：添加元素
   removeChild：删除元素
   cloneNode：克隆节点
   appendChild() ：添加列表项
   addEventListener ：事件侦听注册事件
   removeEventListener ：删除事件
2. 事件触发函数
   变量.onclick = function(){}：点击触发
   onfocus = function(){}：获得焦点事件
   onblur = function(){}：失去焦点事件
   onmouseover = function(){}：鼠标经过事件
   οnmοuseοut= function(){}：鼠标离开事件
   keyup：按键弹起的时候触发(最后)
   keypress：按键按下的时候触发，不能识别功能键(其次)
   keydown：按键按下的时候触发，能识别功能键(最先触发)
   load： 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
   DOMContentLoaded： 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
   resize：对浏览器窗口调整大小进行计数
3. innerText 和 innerHTML的区别
   （1）、innerText 不识别html标签 非标准 去除空格和换行
   （2）、 innerHTML 识别html标签 W3C标准 保留空格和换行的
4. 自定义属性操作
   getAttribute（）：获取属性的值
   setAttribute（‘属性名’, ‘值’）：设置属性的值
   removeAttribute（）：移除属性
   dataset： 是一个集合里面存放了所有以data开头的自定义属性
   childNodes 所有的子节点 包含 元素节点 文本节点等等
   children 获取所有的子元素节点 也是我们实际开发常用的
   firstChild 第一个子节点 不管是文本节点还是元素节点
   firstElementChild 返回第一个子元素节点 ie9才支持
   nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
   nextElementSibling 得到下一个兄弟元素节点
5. 三种创建元素方式区别
   (1).document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
   (2).innerHTML 创建元素
   (3).document.createElement() 创建元素
6. dom 事件流 三个阶段
   1.JS 代码中只能执行捕获或者冒泡其中的一个阶段。
   2.onclick 和 attachEvent（ie） 只能得到冒泡阶段。
   3.捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
   4.冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
7. 常见事件对象的属性和方法
   1.e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
   区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
   2.e.preventDefault():阻止默认行为事件
   3.e.stopPropagation：stop 停止 Propagation 传播
   4.e.cancelBubble = true：非标准 cancel 取消 bubble 泡泡
   5.contextmenu ：我们可以禁用右键菜单
   6.selectstart：禁止选中文字
   7.MouseEvent：鼠标事件对象
   8.e.client 鼠标在可视区的x和y坐标
   9.e.page 鼠标在页面文档的x和y坐标
   10.e.screen 鼠标在电脑屏幕的x和y坐标
   11.classList：添加类名
   12.toggle：元素之间进行转换
   13.sessionStorage.setItem(‘uname’, val)：本地存储，生命周期为关闭浏览器窗口
   14.localStorage.setItem(‘username’, val)：声明周期永久生效，除非手动删除 否则关闭页面也会存在
8. 定时器
   setTimeout：设置延迟时间，延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
   clearTimeout：清除setTimeout设置
   setInterval：每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
   clearInterval：清除setInterval
9. offset系列
   offsetTop、offsetLeft：获得元素偏移的位置，返回的是不带单位的数值
   offsetWidth、offsetHeight：可以得到元素的大小 宽度和高度 是包含padding + border + width
   client ：和offsetWidth 最大的区别就是 不包含边框
10. animate事件
    animate(obj, target, callback)：动画函数
11. touch事件
    touchstart、touchmove、touchend：触摸开始移动结束
    
    
    
    
    
    
    location常见的方法