DOM

发表于 更新于 分类于

DOM 基本概念

  1. DOM 是操控 HTML和CSS的桥梁
  2. DOM (Doucument Object Model) 文档对象类型，是Javascript操作HTML文档的接口，使文档操作变得非常优雅简便
  3. DOM最大的特点是将文档表示为节点树

节点访问和位置关系

  1. 访问元素节点
    • 访问元素节点的常用方法
      • document.getElementById()
        • 通过id得到元素
          • 如果页面上有相同id的元素，则只能得到一个
          • 不管元素藏得多深，都能把它找到
          • 延迟运行
            • 通常JS 一定要写到HTML的节点后面，否则JS无法找到相应的HTML节点
            • 可以使用 window.onload = function(){} 事件 ,使页面加载完后再执行指定代码
      • document.getElementsByTagName()
        • 通过标签名称得到元素数组
      • document.getElementsByClassName()
        • 通过类名得到元素数组
      • document.querySelector()
        • 通过选择器得到元素
      • document.querySelectorAll()
        • 通过选择器得到元素数组
  2. 节点的关系
    • 相对于父节点
      • 可以使用 farstChild 得到第一个子节点
      • 可以使用 lastChild 得到最后一个子节点
    • 相对于子节点
      • 父节点可以通过使用 childNodes 得到所有的子节点信息
      • 子节点可以通过 parentNode 来访问父节点
      • 对于后面一个 兄弟节点 可以使用 nextSibling 获取
      • 对于前面一个兄弟节点 可以使用 perviousSibling 获取前面一个
    • 注意：文本节点也属于节点
      • 文本节点也属于节点，使用节点关系时，一定要注意
    • 只考虑元素节点
      • children
      • firstElementChild
      • lastElementChild
      • perviousElementSibling
      • nextElementSiling

节点操作

  1. insertBefore
    • 父节点.insertBefore(孤儿节点,标杆节点);
  2. appendChild
    • 父节点.appendChild(内容)
    • 在尾部追加
  3. 改变元素节点的CSS样式
    • oBox.style.fontSize = '32px'
  4. 改变元素的HTML的属性
    • W3C 属性 直接，元素.属性 = 属性值
    • 非标准 W3C 属性
      • 元素.setAttribute(key,value)
      • 元素.getAttribute(key)

nodeType常用属性值

  • 1 元素节点，例如<p> 和 <div>
  • 3 文字节点
  • 8 注释节点
  • 9 document节点
  • 10 DTD节点

节点的创建、移除和克隆

  1. createElement
    • 创建一个指定tagname的HTML元素
  2. 获取body节点
    • document.body
  3. 获取html节点
    • document.documentElement
  4. 移动节点
    • 新父节点.appendChild(已经有父亲的节点)
    • 新父节点.insterBefore(已经有父亲的节点,标杆子节点)
  5. 删除节点
    • 父节点.removeChild(要删除的子节点)
    • 节点不能主动删除自己，必须由父节点删除它
  6. 克隆节点
    • cloneNode() 方法可以克隆节点，克隆出的节点是“孤儿节点”
    • var 孤儿节点 = 老节点.cloneNode(true|false);
    • cloneNode 参数是一个布尔值，表示是否采用深度克隆；如果为true该节点的所有后代节点也都会被克隆，如果为false，则只克隆该节点本身
  7. 访问元素节点
    • 所谓 ”访问“元素节点，就是指”得到“、”获取“页面上的元素节点。
    • 访问元素节点 主要依赖于 document

DOM事件

  1. 事件监听
    • 什么是“事件监听”
      • DOM允许我们书写Javascript代码以让HTML元素对事件做出反应
      • 什么是”事件”：用户与网页的交互动作
        • 点用户点击元素的时候
        • 点鼠标移动到元素的时候
        • 当网页加载完成的时候…
      • “监听”,顾名思义就是让计算机随时能够发现这个事件发生了，从而执行程序员预先编写的一些程序
      • 设置事件监听的方法主要有 onxxx 和 addEventListener()
    • 常见鼠标事件监听
      • onclick 当鼠标点击某个对象
      • ondblclick 当鼠标双击某个对象
      • onmousedown 当某个鼠标按键在某个对象上被按下
      • onmouseup 当某个鼠标按键在某个对象上被松开
      • onmousemove 当某个鼠标按键在某个对象上被移动
      • onmouseenter 当鼠标进入某个对象
      • onmouseleave 当鼠标离开某个对象
    • 常见的键盘事件监听
      • onkeyperss 当某个键盘的键被按下（系统按钮如箭头键和功能键无法得到识别）
      • onkeydown 当某个键盘的键被按下（系统按钮可以识别，并且会优先onkeypress发生）
      • onkeyup 当某个键盘的键被松开
    • 常见的表单事件监听
      • onchange 当用户改变域的内容
      • onfocus 当某个元素获得焦点（比如tab或鼠标点击）
      • onblur 当元素失去焦点
      • onsubmit 当表单被提交
      • onreset 当表单被重置
      • oninput 当用户输入
    • 常见的页面事件监听
      • onload 当页面或图像被完成加载
      • onunload 当用户退出页面
  2. 事件传播
    • 事件的传播是：先从外到内，然后再从内到外
      • 从外到内、捕获阶段（capturing phase）
      • 从内到外、冒泡阶段（Bubbling phase）
      • onxxx 这样的写法只能监听冒泡阶段
    • addEventListener() 方法
      • DOM 0级：只能监听冒泡阶段
        1
        2
        3
        box2.onclick = function(){
            console.log("我是box2")
        }
      • DOM 2级事件监听
        1
        2
        3
        box1.addEventListener('click',function(){

          },true)
        • true 监听捕获的阶段
        • false 监听冒泡阶段【默认】
      • 注意事项：最内部的元素不再区分捕获和冒泡阶段，会先执行写在前面的监听，然后执行后写的监听
      • 注意事项：如果给元素设置相同的两个或多个同名事件，则DOM0级写法后面写的会覆盖先写的；而DOM2级会按照顺序执行
  3. 事件对象
    • 什么是事件对象
      • 事件处理函数提供一个形式参数，它是一个对象，封装了本次事件的细节
    • e.charCode 和 e.keyCode 属性
      • e.charCode 属性通常用于 onkeypress 事件中，表示用户输入的字符的 “字符码”
        • 数字0 ~ 数字9 48 ~ 57
        • 大写字母A ~ Z 65 ~ 90
        • 小写字母 a ~ z 97 ~ 122
      • e.keyCode 属性通常用于 onkeydown 事件和onkeyup中，表示用户按下按键的 “键码”
        • 数字0 ~ 数字9 48 ~ 57
        • 字母部分大小写 a ~ z 65 ~ 90 （不区分大小写）
        • 四个方向键（左、上、右、下） 37、38、39、40
        • 回车键 13
        • 空格键 32
    • e.preventDefault() 方法
      • 阻止事件产生的“默认动作”
    • e.stopPropagation() 方法
      • 阻止事件继续传播
      • 在一些场合，非常有必要切断事件继续传播，否则会造成页面特效显示出bug
    • 鼠标滚轮事件
      • 鼠标滚轮事件是 onmousewheel ，它的事件对象e提供deltaY 属性 表示鼠标滚动方向，向下滚动时返回正值，向上滚动时，返回负值。
  4. 事件委托
    • 批量添加事件监听的性能问题
      • 每一个事件监听注册都会消耗一定的系统内存，而批量添加事件会导致监听数量太多，内存消耗会非常大
    • 定义
      • 利用事件冒泡机制，将后台元素事件委托给祖先元素
    • e.target 和 e.currentTarget 属性
      • target
        • 触发此事件的最早元素，即“事件源元素”
      • currentTarget
        • 事件处理程序附加到的元素
    • 使用场景
      • 当有大量类似元素需要批量添加事件监听时，使用事件委托可以减少内存开销
      • 当有动态元素节点上树时，使用事件委托可以让新上树的元素具有事件监听
    • 使用时注意事项
      • onmouseenter 和 onmouseover 都表示“鼠标进入”，它们有什么区别呢？
        • onmouseenter 不冒泡
        • onmouseover 冒泡
      • 不能委托不冒泡的事件给祖先元素
      • 最内层的元素不能再有额外的内层元素了，比如
        1
        2
        3
         <ul id="list">
            <li> <span>我是span</span>列表项</li>
        </ul>