DOM(Document Object Model)

DOM(Document Object Model)文档对象模型

	DOM是关于如何获取、更改、添加或删除HTML元素。它定义了访问和操作HTML文档标准的方法。
	DOM是以树的结构表达HTML文档。

获取元素的方法

	document.getElementById() 	=>通过元素的id来查找元素
    document.getElementsByClassName()	=>通过元素的类名来查找元素
	document.getElementsByName()	元素的通过name来查找元素
	document.getElementsByTagName()	=>通过标签名来查找元素
	document.querySelector()	=>与CSS选择器类似，可以通过各种类名，id名，标签获取元素第一个符合条件的元素,若没有满足条件的元素则返回null
	document.querySelectorAll()	=>获取满足条件的所有元素，返回的是一个类数组，若没有则返回空的类数组[]

• 间接获取元素方法
  el.parentElement =>获取el元素的父元素
  el.parentNode =>获取 el元素的父节点,不是父元素，但也与父元素类似，但在根节点和根元素这里会体现差异，以body为例：
  
  boody父节点是document ，父元素为null
  el.children =>获取元素的子元素们，返回的是一个类数组，若没有子元素则返回空的类数组，没有文本节点
  el.firstElementChild =>获取第一个子元素
  el.lastElementChild =>获取最后一个子元素
  这里返回的不是子元素，是子元素们，是类数组
  el.nextElementSibling =>获取元素的下一个同级元素，与el同等级的兄弟元素，没有则返回null
  el.previousElementSibling =>获取上一个兄弟元素，没有返回null
  el.childNodes =>获取元素的子元素节点们，节点包含节点文本例如代码间的空格、回车等都属于文本节点
  el.nextSibling =>获取元素的下一个兄弟节点，没有返回null
  el.previousSibling =>获取上一个兄弟节点，没有返回null
  el.firstChild =>获取第一个子节点，没有返回null
  el.lastChild =>获取最后一个子节点，没有返回null

• 获取文档元素
  document.body =>获取页面的body标签
  document.forms =>获取页面中的form表单们
  document.anchors =>获取页面中的a标签们
  document.images =>获取页面中的图片们
  document.links =>获取页面中的链接们
  document.URL =>获取当前文档的网址
• 操作元素
  给元素操作类名：
  element.className=“className” =>给元素添加|修改类名，重复使用会不断改变类名，最终只会拥有一个类名
  element.classList.add(“className”) =>给元素添加类名，重复使用会不断添加类名，不断添加同样的类名，最终只会给元素添加一次类名
  element.classList.remove(“className”) =>删除元素的类名
  element.classList.replace(“oldName”,“newName”) =>替换元素的类名，用newName代替oldName

事件

	元素在某种状态达成时，要执行的提前设定好的程序，称为事件句柄

• 事件三要素 ：事件源 事件类型 事件处理程序(handler)
  事件源：触发绑定事件的元素
  事件类型：给元素绑定的事件状态，例如点击，移动等状态
  事件处理程序：对于事件源元素执行事件。

• 绑定方式：
  行内式：只能绑定一个事件，多次绑定类似于覆盖取值
  
  属性绑定：只能绑定一个事件，多次绑定类似于覆盖取值
  
  给元素添加监听器：可以绑定多个监听器达到不同的效果。
  

• 事件类型：
  onclick 鼠标点击按下 松开
  ondblclick 鼠标点两下
  onmousedown 鼠标按下无论是否松开都会执行
  onmousemove 鼠标在里面移动就触发
  onmouseover 鼠标移入就触发
  onmouseout 鼠标移出就触发
  onmouseleave 鼠标移出就触发,子元素移到父元素不会触发
  onmouseennter 鼠标移入就触发，父进子，子进父不会触发只会触发一次
  onwheel 鼠标滚动,在事件源内部滚动才会触发
  onscroll 元素自身的滚动条滚动才会触发
  onkeydown 监听键盘,键盘按一下触发一次
  onkeyup 键盘松开触发一次
  onpress 键盘按下就触发，不松手一直触发
  oninput 监听元素,输入一次就触发一次,输入框在输入就触发
  onchange 输入框失焦，并且value改变就触发
  onfocus 获取焦点时触发
  onbLur 失去焦点时就触发
  onLoad 加载完毕时执行(5大BOM的功能加载完成),图片也有load
  在事件监听器上面绑定不需要写on

• 事件对象
  事件触发时，handler函数内部会传入数据(触发时的信息)
  
  
  altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
  ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
  metaKey 鼠标事件发生时，是否按下windows/commond键,返回一个布尔
  shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
  pageX 鼠标点击的位置距离页面左边的X 坐标;
  pageY 鼠标点击的 Y 坐标；(包含body隐藏的) body标签的y坐标
  clientX clientY 返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素(不包括body隐藏的)
  screenX screenY 返回鼠标位置相对于整个电脑屏幕左上角的坐标,单位为像素,浏览器的位置改变时，其值会改变
  movementX，movementY 返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离
  offsetX/offsetY 鼠标事件中鼠标相对于当前元素左上角的距离

  元素盒子模型

  这个属性只可以读取元素的属性，设置了并不会改变元素属性
  ​ el.offsetWidth：整个盒子的宽度，包括本身宽度+边框线+左右内边距；
  el.offsetHeight：整个盒子的高度，包括本身高度+边框线+上下内边距；
  el.offsetTop：距离最近的第一个有定位属性的父级元素的距离，子元素上边框距离父元素的距离；
  el.offsetLeft：距离最近的第一个有定位属性的父级元素的距离，子元素左边框距离父元素的距离；
  el.clientWidth：本身的宽度+左右内边距;
  el.clientHeight：本身的高度+上下内边距；
  el.clientTop：上边框线的宽度
  el.clientLeft：盒子左边框线的宽度
  el.scrollWidth：盒子的实际宽度(包括滚动条不可见部分，不包括边线)
  el.scrollHeight：盒子的实际高度(包括滚动条不可见部分，不包括边线)
  el.scrollTop：滚动条向下滚动的距离;
  el.scrollLeft：滚动条向右滚动的距离;
  window.innerHeight：浏览器窗口可见区域高度;
  window.innerWidth：浏览器窗口可见区域宽度;