DOM补充

47 阅读1分钟

获取文本对象的三种方式

  • innerHTML
  • innerText
  • value 是专门给 输入框添加展示文本
    • innerHTML/innerText
    • innerHTML 认识字符串中的 标签, 能够将字符串中的标签转换成真正的标签进行渲染
      • innerText 不认识字符串中的标签
      • 推荐使用 innerText 能够防止用户注入恶意代码

事件冒泡

  • 事件冒泡就是当给一个元素添加事件以后,在触发事件的时候,他的父元素有相同的事件也会触发
    • 冒泡会从 点击的元素开始, 一直到页面最顶层的元素
    • 哪怕你的元素没有绑定点击事件, 也会触发事件冒泡 冒泡是向上传导

事件委托

  • 事件委托就是利用事件冒泡的原理
  • 将所有子元素的一个事件(点击事件), 委托给共同的父级

DOM 尺寸

  • offsetParent 获取元素相对于参考的父级
  • offsetLeft / offsetTop 获取元素相对于参考父级的偏移量
  • offsetWidth/ offsetHeight 获取元素可见框的宽高 (内容 + padding + border 的宽度)
  • clientWidth 和 clientHeight 获取元素内容区宽高(内容 + padding 的宽度-)
  • document.documentElement.clientWidth 浏览器视口的宽度
  • document.documentElement.clientHeight 浏览器视口的高度
  • document.documentElement.scrollLeft 滚动的宽度
  • document.documentElement.scrollTop 滚动的高度

事件

  1. click 鼠标单击(左键)
  2. dblclick 鼠标双击
  3. contextmenu 右键单击
  4. mousedown 鼠标按下
  5. nouseup 鼠标抬起
  6. mousemove 鼠标移动
  7. mouseover 鼠标移入
  8. mouseout 鼠标移出

onscroll 滚动事件 onchange 切换事件