DOM

文档对象模型，,它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM

• DOM基础
  • DOM 简介
    • 什么是 DOM
      • 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
      • DOM在我们实际开发中主要用来操作元素。
    • DOM 树
      • 文档：一个页面就是一个文档，DOM 中使用 document 表示
      • 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
      • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
  • 获取元素
    • 如何获取页面元素
      • 根据 ID 获取
        • 使用 getElementById() 方法可以获取带有 ID 的元素对象。
          • document.getElementById('id');
        • 注意
          • get 获得 element 元素 by 通过 驼峰命名法
          • 参数 id是大小写敏感的字符串
          • 返回的是一个元素对象
      • 根据标签名获取
        • 使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
          • document.getElementsByTagName('标签名');
        • 可以获取父元素内部所有指定标签的子元素
          • 父元素.document.getElementsByTagName('子元素标签名');
        • 注意
          • 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
          • 得到元素对象是动态的
          • 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
      • 通过 HTML5 新增的方法获取
        • 根据类名返回元素对象集合
          • document.getElementsByClassName(‘类名’)；
        • 根据指定选择器返回第一个元素对象
          • document.querySelector('选择器');
        • 根据指定选择器返回
          • document.querySelectorAll('选择器');
        • 注意
          • querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');
      • 特殊元素获取
        • 获取body元素
          • doucumnet.body // 返回body元素对象
        • 获取html元素
          • document.documentElement // 返回html元素对象
  • 事件基础
    • 事件概述
      • JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。 简单理解： 触发--- 响应机制。 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
    • 事件三要素
      • 1. 事件源 （谁 事件被触发的对象）
      • 2. 事件类型 （如何触发 什么事件）
      • 3. 事件处理程序 （做啥 通过一个函数赋值的方式）
    • 执行事件的步骤
      • 1. 获取事件源
      • 2. 注册事件（绑定事件）
      • 3. 添加事件处理程序（采取函数赋值形式）
    • 常见的鼠标事件
  • 操作元素
    • 改变元素内容
      • 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
        • element.innerText
      • 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
        • element.innerHTML
      • innerText 和 innerHTML的区别
        • 1. innerText 不识别html标签 非标准 去除空格和换行
        • 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
    • 常用元素的属性操作
      • 1. innerText、innerHTML 改变元素内容
      • 2. src、href
      • 3. id、alt、title
    • 表单元素的属性操作
      • type
        • 规定按钮的类型
      • value
        • 规定按钮的初始值
      • checked
      • selected
      • disabled
        • 禁用该按钮
    • 样式属性操作
      • 1. element.style 行内样式操作
        • 如果样式比较少 或者 功能简单的情况下使用
      • 2. element.className 类名样式操作
        • 适合于样式较多或者功能复杂的情况
      • 注意
        • JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
        • JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
        • 如果样式修改较多，可以采取操作类名方式更改元素样式
        • class因为是个保留字，因此使用className来操作元素类名属性
        • className 会直接更改元素的类名，会覆盖原先的类名
    • 排他思想
      • 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法
        • 1. 所有元素全部清除样式（干掉其他人）
        • 2. 给当前元素设置样式 （留下我自己）
        • 3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
    • 自定义属性的操作
      • 1. 获取属性值
        • element.属性
        • element.getAttribute('属性');
        • 区别
          • element.属性 获取内置属性值（元素本身自带的属性）
          • element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性
      • 2. 设置属性值
        • element.属性 = ‘值’ 设置内置属性值。
        • element.setAttribute('属性', '值');
        • 区别
          • element.属性 设置内置属性值
          • element.setAttribute(‘属性’); 主要设置自定义的属性 （标准）
      • 移除属性
        • element.removeAttribute('属性');
      • 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
    • H5自定义属性
      • H5新增原因：有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性
      • 1. 设置H5自定义属性
        • H5规定自定义属性data-开头做为属性名并且赋值。 比如 element.setAttribute(‘data-index’, 2) 再比如
      • 2. 获取H5自定义属性
        • 兼容性获取 element.getAttribute(‘data-index’);
        • H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
        • 注意
          • dataset 是一个集合里面存放了所有以data开头的自定义属性
          • 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法 比如data-list-name="andy" => div.dataset['listName']
  • 节点操作
    • 为什么学节点操作
      • 获取元素方式
        • 利用 DOM 提供的方法获取元素
          • document.getElementById() document.getElementsByTagName() document.querySelector 等 逻辑性不强、繁琐
        • 利用节点层级关系获取元素
          • 利用父，子，兄节点关系获取元素 逻辑性强， 但是兼容性稍差
    • 节点概述
      • 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。 HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
      • 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
      • 元素节点 nodeType 为 1 属性节点 nodeType 为 2 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等） 我们在实际开发中，节点操作主要操作的是元素节点
    • 节点层级
      • 利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
      • 1. 父级节点
        • node.parentNode
          • 注意
            • parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
            • 如果指定的节点没有父节点则返回 null
      • 2. 子节点
        • parentNode.childNodes
          • 注意
            • 返回包含指定节点的子节点的集合，该集合为即时更新的集合
            • 返回值里面包含了所有的子节点，包括元素节点，文本节点等。
            • 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes
        • parentNode.firstChild
          • firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
        • parentNode.lastChild
          • lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
        • parentNode.firstElementChild
          • firstElementChild 返回第一个子元素节点，找不到则返回null。
        • parentNode.lastElementChild
          • lastElementChild 返回最后一个子元素节点，找不到则返回null。
      • 3. 兄弟节点
        • node.nextSibling
          • nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
        • node.previousSibling
          • previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
        • node.nextElementSibling
          • nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。
        • node.previousElementSibling
          • previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。
        • 注意
          • nextElementSibling和previousElementSibling 有兼容性问题， IE9 以上才支持 得自己封装一个兼容性的函数
            • function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; }
    • 创建节点
      • document.createElement('tagName')
      • document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在， 是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
    • 添加节点
      • 1. node.appendChild(child)
        • 将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。
      • 2. node.insertBefore(child, 指定元素)
        • 将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
        • 比如：ul.insertBefore(li, ul.children[0]);
    • 删除节点
      • node.removeChild(child)
        • node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。
    • 复制节点
      • node.cloneNode()
        • 返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
      • 注意
        • 1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 即只复制标签不复制里面的内容
        • 2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。
          • ul.children[0].cloneNode(true);
    • 三种动态创建元素区别
      • 1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
      • 2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
      • 3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
      • 4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰
      • 总结：不同浏览器下，innerHTML 效率要比 creatElement 高
  • DOM 重点核心
    • 1. 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。 2. 对于HTML，dom使得html形成一棵dom树. 包含 文档、元素、节点
    • 创建
      • document.write
      • innerHTML
      • createElement
    • 增
      • 1. appendChild
      • 2. insertBefore
    • 删
      • 1. removeChild
    • 改
      • 修改元素属性： src、href、title等
      • 修改普通元素内容： innerHTML 、innerText
      • 修改表单元素： value、type、disabled等
      • 修改元素样式： style、className
    • 查
      • DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
      • H5提供的新方法： querySelector、querySelectorAll 提倡
      • 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡
    • 属性操作
      • 1. setAttribute：设置dom的属性值
      • 2. getAttribute：得到dom的属性值
      • 3. removeAttribute移除属性
    • 事件操作
• 事件高级
  • 注册事件（绑定事件）
    • 1. 注册事件概述
      • 给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式和方法监听注册方式
        • 传统注册方式
          • 利用 on 开头的事件 onclick
          • <button onclick=“alert('hi~')”></button> btn.onclick = function() {}
          • 特点： 注册事件的唯一性
          • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
        • 方法监听注册方式
          • w3c 标准 推荐方式
          • addEventListener() 它是一个方法
          • IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
          • 特点：同一个元素同一个事件可以注册多个监听器
          • 按注册顺序依次执行
    • 2. addEventListener 事件监听方式
      • eventTarget.addEventListener(type, listener[, useCapture])
        • 将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
      • 该方法接收三个参数
        • type：事件类型字符串，比如 click 、mouseover ，必定加引号，注意这里不要带 on
        • listener：事件处理函数，事件发生时，会调用该监听函数；直接写函数名调用，不需要调用加小括号
        • useCapture：可选参数，是一个布尔值，默认是 false。
    • 3. attachEvent 事件监听方式
      • eventTarget.attachEvent(eventNameWithOn, callback)
        • 将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
      • 该方法接收两个参数
        • eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
        • callback： 事件处理函数，当目标触发事件时回调函数被调用
    • 4. 注册事件兼容性解决方案
      • function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 addEventListener 方法 if (element.addEventListener) { element.addEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.attachEvent) { element.attachEvent('on' + eventName, fn); } else { // 相当于 element.onclick = fn; element['on' + eventName] = fn; }
      • 兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器
  • 删除事件（解绑事件）
    • 1. 传统注册方式
      • eventTarget.onclick = null;
    • 2. 方法监听注册方式
      • eventTarget.removeEventListener(type, listener[, useCapture]);
      • eventTarget.detachEvent(eventNameWithOn, callback);
    • 3.删除事件兼容性解决方案
      • function removeEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 removeEventListener 方法 if (element.removeEventListener) { element.removeEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.detachEvent) { element.detachEvent('on' + eventName, fn); } else { element['on' + eventName] = null; }
  • DOM事件流
    • 1. 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
    • 2. DOM 事件流分为3个阶段
      • 1. 捕获阶段
        • 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> div
      • 2. 当前目标阶段
      • 3. 冒泡阶段
        • 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 div->body -> html -> document
    • 3. 注意
      • JS 代码中只能执行捕获或者冒泡其中的一个阶段。
      • onclick 和 attachEvent 只能得到冒泡阶段。
      • addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序； 如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
      • 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
      • 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
      • 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件
  • 事件对象
    • 1. 什么是事件对象
      • 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。
      • 比如
        • 1. 谁绑定了这个事件。
        • 2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
        • 3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
    • 2. 事件对象的使用语法
      • eventTarget.onclick = function(event) { // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt } eventTarget.addEventListener('click', function(event) { // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt }）
      • 这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。 当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。
    • 3. 事件对象的兼容性方案
      • 1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
      • 2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
      • 解决
        • e = e || window.event;
    • 4. 事件对象的常见属性和方法
      • e.target 和 this 的区别
        • this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素） this 返回的是绑定事件的对象（元素）
        • e.target 是事件触发的元素； e.target 返回的是触发事件的对象（返回所选的子元素）
  • 阻止事件冒泡
    • 1 阻止事件冒泡的两种方式
      • 标准写法：利用事件对象里面的 stopPropagation()方法
        • e.stopPropagation()
      • 非标准写法：IE 6-8 利用事件对象 cancelBubble 属性
        • e.cancelBubble = true;
    • 2 阻止事件冒泡的兼容性解决方案
      • if(e && e.stopPropagation){ e.stopPropagation(); }else{ window.event.cancelBubble = true; }
  • 事件委托（代理、委派）
    • 事件委托
      • 事件委托也称为事件代理， 在 jQuery 里面称为事件委派。
    • 事件委托的原理
      • 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
    • 事件委托的作用
      • 我们只操作了一次 DOM ，提高了程序的性能。
    • 举例
      • 知否知否，应该有弹框在手 知否知否，应该有弹框在手 知否知否，应该有弹框在手 知否知否，应该有弹框在手 知否知否，应该有弹框在手
      • 点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。 所以给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件监听器。
  • 常用的鼠标事件
    • 常用的鼠标事件
      • 1.禁止鼠标右键菜单（contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单）
        • document.addEventListener('contextmenu', function(e) { e.preventDefault();//阻止默认行为 })
      • 2.禁止鼠标选中（selectstart 开始选中）
        • document.addEventListener('selectstart', function(e) { e.preventDefault();//阻止默认行为 })
    • 鼠标事件对象
      • event对象代表事件的状态，跟事件相关的一系列信息的集合。 现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。
  • 常用的键盘事件
    • 1 常用键盘事件
      • 注意
        • 如果使用addEventListener 不需要加 on
        • onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
        • 三个事件的执行顺序是： keydown -- keypress --- keyup
        • 用keyup是字先落入文本框里，再执行程序 keydown 和 keypress是先执行程序再，落入文本框
    • 2 键盘事件对象
      • 注意
        • onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
        • 在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）
        • Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值