DOM操作-DOM操作大全

DOM简介

• DOM：Document Object Model，即文档对象模型
• DOM操作：将HTML文档中的元素当做JS中的对象进行操作
• 常用DOM操作：元素的增删改查、事件处理、属性修改
• window对象相当于浏览器中打开的窗口，window.document对象相当于整个文档
• JS中属性的命名都是小驼峰风格，如：backgroundColor

元素查找

• 函数及功能

  函数	功能
  getElementById	根据ID查找，返回单个元素
  getElementsByClassName	根据class查找，返回一个数组
  getElementsByTagName	根据标签名查找，返回一个数组
  getElementsByName	根据name属性查找，返回一个数组

基本事件

• 事件及说明

  事件	说明
  onclick	单击
  ondblclick	双击
  onfocus	获取焦点
  onblur	失去焦点
  onmouseover	鼠标移入
  onmouseout	鼠标移出

获取样式

• 示例：

  var oDiv = document.getElementsByTagName('div')[0]
  // 只能获取行内样式
  // console.log(oDiv.style.width)
  // 可以获取任意样式
  console.log(getComputedStyle(oDiv).width)
  console.log(getComputedStyle(oDiv)['width'])

定时器

• 说明：所谓定时器其实就是让计算机在指定的时间做指定的事情。
• 分类：
  • 一次性定时器：设定一个时间，指定一件事，时间到做指定的事，之后销毁
    • 设置：var timer = setTimeout(函数, 时间)，时间的单位是毫秒
    • 清除：clearTimerout(timer)，清除操作不会打断定时任务的执行
  • 周期性定时器：设定一个时间，指定一件事，时间到做指定的事。然后循环
    • 设置：var timer = setInterval(函数, 时间)，时间的单位是毫秒
    • 清除：clearInterval(timer)，清除操作不会打断定时任务的执行
• 注意：
  • 定时器函数中的this不是设置时的对象，而是window，可以通过绑定进行解决

window

• 事件

  事件	说明
  onload	页面加载完成
  onresize	窗口尺寸改变
  onscroll	窗口发生滚动

• 属性

  属性	说明
  innnerWidth	窗口宽度(包括滚动条)
  innerHeight	窗口高度(包括滚动条)
  document	文档对象

• document

  属性|方法	说明
  title	文档标题
  write	向文档中写内容
  documentElement	相当于body元素

• document.documentElement

  属性	说明
  clientWidth	窗口宽度(不包括滚动条)
  cilentHeight	窗口高度(不包括滚动条)
  scrollLeft	水平滚动距离
  scrollTop	垂直滚动距离

  documentElement是H5标准写法，非H5标准使用body

• 效果：飘舞的小球
  • 练习：添加光标移入小球停止飘舞，离开后继续进行飘舞

元素关联查找

• 说明：根据已知元素，在文档树种进行关联查找
• 示例：

  var yawen = document.getElementById('yawen')
          
  // 前一个同胞
  var prev = yawen.previousElementSibling || yawen.previousSibling
  ​
  // 下一个同胞
  var next = yawen.nextElementSibling || yawen.nextSibling
  ​
  // 父级元素
  var parent = yawen.parentNode
  ​
  // 子元组
  var children = parent.children
  ​
  // 叔叔级元素(可以连续查找)
  var uncle = yawen.parentNode.nextElementSibling
  ​
  // 第一个子元素
  var first_child = parent.firstElementChild
  ​
  // 最后一个子元素
  var last_child = parent.lastElementChild
  ​
  console.log(last_child.innerText)

添加与删除

• 添加元素

  function append()
  {
      // 创建一个li元素
      var oLi = document.createElement('li')
      // 创建文档节点
      var textNode = document.createTextNode('金水区')
      // 将文本节点追加到li元素
      oLi.appendChild(textNode)
      // 找到ul
      var zhengzhou = document.getElementById('zhengzhou')
      // 追加子元素
      zhengzhou.appendChild(oLi)
  }
  ​
  function insert()
  {
      var oLi = document.createElement('li')
      oLi.innerText = '中原区'
  ​
      var zhengzhou = document.getElementById('zhengzhou')
      // 在指定的元素前面插入元素
      zhengzhou.insertBefore(oLi, zhengzhou.children[0])
  }

• 删除元素

  var btn = document.getElementsByTagName('button')[0]
          
  btn.onclick = function () {
      // 创建input
      var oInput = document.createElement('input')
      oInput.type = 'file'
      // 创建按钮
      var oButton = document.createElement('button')
      oButton.innerText = '删除'
      // 添加点击事件
      oButton.onclick = function(){
          // 找到父级元素
          var parent = this.parentNode
          // 找到祖父及元素
          var grand = parent.parentNode
          // 祖父元素删除父元素
          grand.removeChild(parent)
      }
      // 创建div
      var oDiv = document.createElement('div')
      oDiv.appendChild(oInput)
      oDiv.appendChild(oButton)
      // 将div追加到body
      document.body.appendChild(oDiv)
  }

事件冒泡

• 说明：当下层元素和上层元素支持同一事件，上层事件触发下层事件也触发，称为事件冒泡。
• 取消事件冒泡：在上层的事件处理函数中使用ev.cancelBubble = true
• 事件源元素：就是事件触发的元素，获取：ev.srcElement