JS总结（二）

DOM 文档对象模型

DOM 的顶级对象是 document
DOM把以下内容都看作是对象
文档：一个页面就是一个文档，document
元素：页面中的所有标签，element
节点：网页中的所有内容（标签、属性、文本、注释等），node

获取元素

• 根据 ID 获取 ： document.getElementById(‘id’);
  console.dir() 可以打印我们获取的元素对象
• 根据标签名获取： document.getElementsByTagName(‘标签名’);
  得到的是一个对象集合
• H5 新增方法
  • document.getElementsByClassName(‘类名’)；
    返回元素对象集合
  • document.querySelector(‘选择器’);
    返回第一个元素对象
  • document.querySelectorAll(‘选择器’);
    返回对象集合
    注：选择器要加符号
• 返回特殊元素
  • doucumnet.body
    返回body元素对象
  • document.documentElement
    返回html元素对象

操作元素

• 改变元素内容

  • element.innerText
    去除 html 标签、空格和换行
  • element.innerHTML
    包括 html 标签，保留空格和换行

• 样式属性操作

  • element.style 行内样式操作
    样式采用驼峰命名法，产生的是行内样式
  • element.className 类名样式操作
    会直接更改类名，覆盖原来的类名
  • element.getAttribute(‘属性’); 获取属性值
  • element.setAttribute(‘属性’, ‘值’); 主要设置自定义属性
  • element.removeAttribute(‘属性’); 移除属性
  • H5自定义属性
    以data-开头作为属性名
    H5新增获取
    • element.datast.属性名（不用加data-）
    • element.datast[‘属性名’]（不用加data-） ie11才开始支持

节点操作

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3

• 节点层次

• 父级节点
  node.parentNode 返回最近的一个父节点，没有父节点返回null

• 子节点

  • parentNode.childNodes
    返回包含指定节点的子节点的集合，返回值里面包含了所有的子节点，包括元素节点，文本节点等
  • parentNode.children
    返回所有的子元素节点，它只返回子元素节点，其余节点不返回
  • parentNode.firstChild
    返回第一个子节点，也是包含所有的节点，找不到则返回null
  • parentNode.lastChild
    返回最后一个子节点，包含所有的节点，找不到则返回null
  • parentNode.firstElementChild
    返回第一个子元素节点，找不到则返回null，ie9以上支持
  • parentNode.lastElementChild
    返回最后一个子元素节点，找不到则返回null，ie9以上支持

• 兄弟节点

  • node.nextSibling
    返回当前元素的下一个兄弟元素节点，也是包含所有的节点，找不到则返回null
  • node.previousSibling
    返回当前元素上一个兄弟元素节点，也是包含所有的节点，找不到则返回null
  • node.nextElementSibling
    返回当前元素下一个兄弟元素节点，找不到则返回null，ie9以上支持
  • node.previousElementSibling
    返回当前元素上一个兄弟节点，找不到则返回null，ie9以上支持

• 创建节点
  document.createElement(‘tagName’)

• 添加节点

  • node.appendChild(child)
    将一个节点添加到指定父节点的子节点列表末尾
  • node.insertBefore(child, 指定元素)
    将一个节点添加到父节点的指定子节点前面

• 删除节点
  node.removeChild(child)

• 复制节点
  node.cloneNode()
  返回调用该方法的节点的一个副本
  参数为空或者为 false ，是浅拷贝，只复制节点本身，不复制里面的子节点。
  参数为 true ，是深度拷贝，会复制节点本身以及里面所有的子节点。

• 替换节点
  parentNode.replaceChild(newChild, oldChild);
  用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

事件

• 事件三要素

  • 事件源
  • 事件类型
  • 事件处理程序

• 执行事件的步骤

  • 获取事件源
  • 注册事件（绑定事件）
  • 添加事件处理程序

• 注册事件（绑定事件）

  • 传统注册方式（事件前加on）
    • 在标签好内写 onclick = 函数名
    • eventTarget.onclick = function() {}
  • 事件监听方式
    • eventTarget.addEventListener(‘事件类型’, 事件处理函数[, useCapture]) 不带on
    • eventTarget.attachEvent(‘事件类型’, 事件处理函数) 带on，ie8及早期版本支持

  • 删除事件（解绑事件）

    • 传统注册方式
      eventTarget.onclick = null;
    • 事件监听注册方式
      eventTarget.removeEventListener(‘事件类型’, 事件处理函数[, useCapture]); eventTarget.detachEvent(‘事件类型’, 事件处理函数);

  • DOM事件流

    事件发生时会在元素节点之间按照特定的顺序传播
    • DOM 事件流分为3个阶段：
      • 捕获阶段 ：由最顶层节点document开始传递，然后逐层向下传播到最具体的元素接收
      • 当前目标阶段
      • 冒泡阶段 ：事件由最具体的元素接收，然后逐级向上传播到最顶层节点document

  • 事件对象

    eventTarget.onclick = function(event) {}
    eventTarget.addEventListener(‘click’, function(event) {}）
    event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。 event也可以写为e或evt
    event是个形参，但不需要传递实参。
    • 事件对象兼容性解决方案
      e = e || window.event;
    • 事件处理函数中，this指向事件绑定的元素
    • 事件对象的常见属性和方法
      e.target 返回触发事件的对象
      e.srcElement 返回触发事件的对象 ie6-8使用
      e.type 返回事件的类型，不带on
      e.preventDefault() 该方法组织默认事件
      e.returnValue该属性组织默认事件 ie6-8使用
      e.stopPropagation() 阻止冒泡
      e.cancelBubble 组织冒泡 ie6-8使用

  • 阻止事件冒泡

    • e.stopPropagation()
    • e.cancelBubble = true;

  • 事件委托

    不给每个子节点单独设置事件监听器，而是将事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

  • 常用的鼠标事件

    onclick 鼠标点击左键触发
    onmouseover 鼠标经过触发
    onmouseout 鼠标离开触发
    onfocus 获得鼠标焦点触发
    onblur 失去鼠标焦点触发
    onmousemove 鼠标移动出发
    onmouseup 鼠标弹起触发
    onmousedown 鼠标按下触发
    dblclick 双击左键触发

  • 鼠标事件对象（MouseEvent）

    e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
    e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
    e.pageX 返回鼠标相对于文档页面的X坐标，ie9+支持
    e.pageY 返回鼠标相对于文档页面的Y坐标，ie9+支持

  • 常见的键盘事件，给文档document添加

    onkeyup 某个键盘按键被松开时触发，识别功能键，不区分字母大小写
    onkeydown 某个键盘按键被按下时触发，识别功能键，不区分字母大小写
    onkeypress 某个键盘按键被按下并弹起时触发，不识别功能键，区分字母大小写

  • 键盘事件对象（KeyboardEvent）

    keyCode 返回该键的ASCII码值

BOM 浏览器对象模型

BOM 的顶级对象是 window
BOM提供了独立于内容而与浏览器窗口进行交互的对象，其核心 对象是 window，BOM 比 DOM 更大，它包含 DOM。
定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

window对象的常见事件

• 窗口加载事件

  • 当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等），传统注册方式只能写一次，事件监听方式没有限制
    window.onload = function(){} window.addEventListener(‘load’,function(){});
  • 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等，Ie9以上才支持
    document.addEventListener(‘DOMContentLoaded’,function(){})

• 调整窗口大小事件

  只要窗口大小发生像素变化，就会触发这个事件，可做响应式布局，window.innerWidth 当前屏幕的宽度
  window.onresize = function(){}
  window.addEventListener(“resize”,function(){});

定时器

• setTimeout() 定时器

  window.setTimeout(调用函数, [延迟的毫秒数]);
  window可以省略， 这个调用函数可以直接写函数，或者写函数名，只能执行一次
  • 停止 setTimeout() 定时器
    window.clearTimeout(timeoutID);
    window可以省略，参数为定时器的标识符

• setInterval() 定时器

  window.setInterval(回调函数, [间隔的毫秒数]);
  window可以省略， 这个调用函数可以直接写函数，或者写函数名，重复执行
  • 停止 setInterval() 定时器
    window.clearInterval(intervalID);
    window可以省略，参数为定时器的标识符

• this

  全局作用域或者普通函数中this指向全局对象window

• JS执行队列

  JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
  • 同步和异步
    • 同步任务：同步任务都在主线程上执行，形成一个执行栈。
    • 异步任务：JS 的异步是通过回调函数实现的，异步任务相关回调函数添加到任务队列中，由以下三种类型：
      • 普通事件，如 click、resize 等
      • 资源加载，如 load、error 等
      • 定时器，包括 setInterval、setTimeout 等
  • 执行过程
    • 先执行执行栈中的同步任务。
    • 异步任务（回调函数）放入任务队列中。
    • 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任 务结束等待状态，进入执行栈，开始执行。

location对象

用于获取或设置窗体的 URL，并且可以用于解析 URL

• URL

  统一资源定位符，是互联网上标准资源的地址

• location对象的属性

  location.href 获取或设置整个URL
  location.search 返回参数

• location对象的方法

  location.assign() 跟 href 一样，可以跳转页面，记录历史，可以实现后退页面
  location.replace() 替换当前页面，不记录历史，不能后退页面
  location.reload() 重新加载页面，相当于刷新键，若参数为true，则强制刷新

navigator 对象

包含有关浏览器的信息
userAgent属性可以返回由客户机发送服务器的 user-agent 头部的值

history 对象

包含用户（在浏览器窗口中） 访问过的 URL

• history对象方法

  back() 后退功能
  forward() 前进功能
  go(参数) 前进后退功能，参数为1，前进1个页面；参数为-1，后退1个页面