您的位置 首页 python学习笔记

DOM操作-DOM操作大全

DOM简介 DOM:Document Object Model,即文档对象模型 DOM操作:将HTML文档中的元素当做JS中的对象进行操作 常用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
本文来自网络,不代表立场,转载请注明出处:http://www.zhengzhou888seo.com/3796.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

联系我们

18134416366

在线咨询: QQ交谈

邮箱: 894974231@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

返回顶部