DOM操作 和 BOM操作

DOM操作 和 BOM操作

• DOM操作
  JavaScript 提供的 操作 html文件的方法
• BOM操作
  JavaScript 提供的 操作 浏览器的方法

DOM操作之获取标签对象

推荐使用方式  对于低版本IE不兼容
    document.querySelector('条件');
        获取符合条件的第一个标签对象
        执行结果是 一个独立的标签对象 
        可以直接操作这个独立的标签对象
         如果没有符合条件的标签对象 结果是 null

    document.querySelectorAll('条件');
        获取符合条件的所有标签对象
        执行结果是一个 伪数组
        伪数组的单元 存储的具体数据 是 一个独立的标签对象
        伪数组 不能直接操作 
        可以通过 []语法 获取一个独立的标签对象 再操作
        还可以通过 循环语法 循环遍历 操作所有的标签对象

        获取的伪数组 可以使用 forEach循环遍历

        可以自己试试 使用 for循环 for...in循环 for...of循环

        如果没有符合条件的标签 结果是 length 为 0 的 空 伪数组


条件可以写 所有 html 和 css 支持的语法形式
    ('标签名称')
    ('#id属性值')
    ('.class属性值')
    ('[属性="属性值"]')
    ('ul>li')
    ('ul li')
    ('ul li:nth-child(1)')
    ('div + p')
    ('div ~ p')


总结: JavaScript 对于 标签对象的操作 一定是 对 独立的标签对象的操作
     不能直接对 标签对象 伪数组 进行操作

补充说明:
    所谓的伪数组 
        支持 []语法 和 length 属性
        可以执行的函数方法 和 数组不同

DOM操作

  1,  本质是 获取 和 操作 设定  标签对象

  2,  获取 标签对象
      方便的,不兼容低版本IE的
          document.querySelector('条件');
              独立的标签对象
              可以直接操作
          document.querySelectorAll('条件');
              标签对象伪数组
              []语法获取一个独立的标签对象 或者 循环遍历操作
              支持 forEach

      兼容所有浏览器的
          document.getElementById('id属性值');
              独立的标签对象
          document.getElementsByClassName('class属性值');
              标签对象伪数组 
              不能forEach
          document.getElementsByTagName('标签名称');
              标签对象伪数组 
              不能forEach
          document.getElementsByName('name属性值');
              标签对象伪数组 
              可以forEach
      特殊标签
          document.documentElement
              html标签
          document.body
              body标签
          document.head
              head标签
          document.title
              title标签的内容

  3,  操作设定标签
      (1) 内容
          标签对象.innerHTML
              支持解析标签
          标签对象.innerText
              不支持解析标签
          标签对象.value
              标签的数据

      (2) 标签属性

          标签支持的
              标签对象.属性

              id,class,title  标签的布尔属性

          标签不支持的
              标签对象.setAttribute('属性' , 属性值)
                  设定
              标签对象.getAttribute('属性')
                  获取
              标签对象.removeAttribute('属性')
                  删除

      (3) class操作方法
          标签对象.className 直接操作和设定
          
          标签对象.classList.add()
              原始属性值基础上新增

          标签对象.classList.remove()
              原始属性值基础上删除

          标签对象.classList.toggle()
              原始属性值基础上切换

          标签对象.classList.replace(属性值1 , 属性值2)
              原始属性值基础上替换

      (4) 样式
          设定
              标签.style.属性 = 属性值
                  设定的是行内样式

          获取
              标签.style.属性
                  只能获取 行内样式属性

              window.getComputedStyle(标签).属性
                  标准浏览器获取执行属性

              标签.currentStyle.属性
                  IE浏览器获取执行属性

      (5) 标签占位

          标签.offsetWidth
          标签.offsetHeight
              内容+padding+border

          标签.clientWidth
          标签.clientHeight
              内容+padding

          标签.clientTop
          标签.clientLeft
              border 上 左

          标签.offsetTop
          标签.offsetLeft
              定位父级 上 左

BOM操作_三大弹窗

• window.alert()
  警告框

• window.prompt()
  输入框

• window.confirm()
  确认框
  点击确定返回值是 true
  点击取消返回值是 false

BOM操作_获取浏览器相关数据

浏览器的相关数据
浏览器上卷 左移 的 距离

有文档类型声明
   document.documentElement.scrollTop
   document.documentElement.scrollLeft

没有文档类型声明
   document.body.scrollTop
   document.body.scrollLeft

总有一个数值 是 0 另一个 可以获取到正确的数据
可以使用 逻辑赋值 ||
var 变量 = document.documentElement.scrollTop || document.body.scrollTop

浏览器视窗窗口宽度高度

包含滚动条 
   window.innerWidth
   window.innerHeight

不包含滚动条
   有文档类型声明
   document.documentElement.clientWidth
   document.documentElement.clientHeight

   没有文档类型声明
   document.body.clientWidth
   document.body.clientWidth

总结兼容语法:
一种情况有值 一种情况没有值
使用 逻辑或 做 逻辑赋值

一种情况有 这个方法 一种情况 没有这个方法
使用 if判断 做兼容

BOM操作常见事件:

 鼠标事件
     click           左键单击
     dblclick        左键双击
     contextmenu     右键单击

     mousedown       鼠标按键按下
     mouseup         鼠标按键抬起
     mousemove       鼠标按键移动

     mouseover       鼠标移入
     mouseout        鼠标移出

     mouseenter      鼠标移入
     mouseleave      鼠标移出

 键盘事件

     keydown         按键按下
     keyup           按键抬起
     keypress        类似按键按下


 表单事件

     focus           获取焦点事件
     blur            失去焦点事件
     change          失去焦点并且数据改变事件
     input           输入事件
     submit          提交事件

 触摸事件
     只有移动端设备支持事件
         手机 pad...

     touchstart     触摸开始
     touchend       触摸结束
     touchmove      触摸移动

 特殊事件

     transitionstart    过渡开始
     transitionend      过渡结束

     animationstart     动画开始
     animationend       动画结束