Dom小知识

知识点回顾【总结】网站：https://www.yuque.com/lizhuojun/qfivuu/fcocvo

1、查找Dom节点

1、获取所有的节点   box.children
2、获取第一个子节点 box.fristChild
3、获取最后一个子节点   box.lastChild
4、获取前一个兄弟节点   box.previousSibling
5、获取后一个兄弟节点   box.nextSibling
6、获取父节点   box.parentNode

2、查找元素

- 通过关系查找
    1、子元素   box.children
    2、第一个子元素 box.fristElementChild
    3、最后一个子元素   box.lastElementChild
    4、前一个兄弟元素   box.previousElementSibling
    5、后一个兄弟元素   box.nextElementSibling
    6、父元素   box.parentElement
- 通过属性查找
    1、id   document.getElementById("")
    2、class    document.getElementByClassName("")
    3、tagName  document.getElementByTagName()
    4、name document.getElementByName()
    5、选择器   document.querSelector("")
    6、选择器   document.querySelectorAll("")

3、操作属性

- 标准属性
    1、box.属性名
- 自定义属性
    <div data-val></div>    box.dataset.val
- 通过 api
    box.getAttribute("")
        设置
        <!-- 改变颜色：<font color="red">中间写上想说的话</font> -->
    box.setAttribute("属性名","属性值")
        删除
    box.removeAttribute("属性名")
        切换
    box.toggleAttribute("属性")
        判断是否包含
    box.hasAttribute("属性名")
- 操作 class 属性
  - box.className
  - box.classList
    1、box.classList.add("")
    2、box.classList.remove("")
    3、box.classList.replace("")替换
    4、box.classList.toggle("")切换
    5、box.classList.contains("")

- 操作 style
  - box.style
    1、box.style="fontize:30px;color:blue"
    2、box.style.backgroundColor="blue"

4、操作元素

-  添加元素
    1、document.write("")
    2、box.innerHTML
    3、var rel=document.createElement("tagName") box.appendChild(rel)
- 删除元素
    1、box.removeChild("rel");
    2、box.innerHTML="";
- 修改元素
    1、var rel=document.createElement("tagName") box.insertBefore("newrel","targetrel")

修改元素内容

1、box.innerHTML
2、box.innerText
3、box.textContent

5、事件

- 事件属性
    - 绑定事件属性的三种方法

      1、<div onclick=fn(event)></div>    
          function fn(event){}
      2、<div id="box"></div>
          var box=document.getElementById("box");
          box.onclick=function(event){};
      3、box.addEventListente("click",function(event){},false(true))

- 事件属性与事件属性的区别
    1、事件属性多个相同的会被覆盖，事件监听不会被覆盖
    2、事件属性支持冒泡,事件监听可以在捕获或冒泡阶段监听
    3、事件属性移除事件处理程序,box.onclick=null; box.removeEventListenter("click",fn);
- 事件流
    事件在元素之间的传递顺序 三个阶段,捕获阶段 目标阶段 冒泡阶段
- 事件对象
    当发生事件交互时，系统会将所有的关于事件的信息(事件类型,鼠标的位置等)都放在 event 对象中,并传传递过来

事件类型

1、鼠标事件
  - click（点击） 
  - dbclick（双击）
  - mouseover（鼠标悬浮） 
  - mouseenter（鼠标移入）  
  - mouseleave（鼠标移出）
  - mouseout（鼠标离开）
  - mousedown（鼠标按下）
  - mouseup（鼠标松开）
  - mousemove（鼠标移动）
2、键盘事件
  - keydown（键盘按下）
  - keyup（键盘松开）
  - keypress（按键）
3、表单事件
  - focus blur input change selected
4、对象事件
  - onload onerror onresize onscroll
5、拖拽事件
  - drag dragstart dragend  
  - 关于容器    dragenter dragover dragleave drop
  - 注意：drop 之前需要在 dragover 阻止事件的默认行为 e.preventDefault

元素的尺寸和位置

1、元素的尺寸
    box.clientWidth box.offsetHeight
2、元素的位置
    box.offsetTop box.offsetLeft box.clientTop(边框的宽度)
3、window.innerWidth(包含滚动条) document.documentElement.clientWidth document.body.clientWidth
4、电脑屏幕的宽度 window.screen.width screen.availWidth
 - 以上都是只读
 - 获取 css 中的样式 getComputedtyle("box",null).width
5、内容的高度 box.scrollHeight 偏移量 box.scrollTop

鼠标的位置

1、e.pageY  相对于页面的卷去部分
2、e.clientY e.y    浏览器窗口的左上角
3、e.offsetY    目标元素
4、e.layerY 相对于离自己最近的非静态定位的祖先元素的位置
5、screenY  电脑屏幕