Dom与BOM，Dom的介绍（上）

一、什么是Dom ？
Document Object Model（简称 Dom）文档对象模型 是一个应用编程接口（API），使用与HTML、XML。Dom 将整个页面抽象为一组树形结构，每个HTML内的元素都是一个树的节点，开发人员可对该树进行一系列的增删改查等操作。

二、Dom节点分为一下几大类型
1、元素节点—是Dom的基本，< html >为根节点，< html >里面还包含了< head >、< body >、< div >、< span >、< p >等标签，标签之间遵循规则，互相包含。
2、属性节点—Dom元素内包含了很多属性例如：id、class、name、title等，就像是一个对象，该对象身上有哪些特征。
3、文本节点—文本节点是指向文本的节点，网页上看到的文本内容都是文本节点。文本节点的父节点是元素节点，文本节点没有子节点。据查询资料了解到，ie8及以下版本的浏览器不能识别空白文本节点。

三、获取Dom与内容
获取Dom元素的方法如下：
1、document.getElementById(Dom中定义的id名称)
2、document.getElementsByClassName(Dom中定义的class名称)
3、document.getElementsByTagName(要获取的元素名称)
注意： getElement与getElements要注意区分最后有没有加s 有的话则会获取多个同名的元素节点 ，没有的话则只获取一个。
4、document.querySelector(#代表获取元素id名称 .代表获取元素class名称，获取到的不管有几个同名的id或class元素，都只获取第一个元素)
5、document.querySelectorAll(与第4个方法一样)只是我们该怎么获取所有名称一样的元素呢？诶嘿嘿，没错就是当前该方法，该方法返回一个元素的数组集合，相信从名称中就可以知晓。
注意： 除了document.getElementById和document.querySelector以外，其余获取元素的方法都会返回一个集合。
获取dom元素内容的方法如下：
1、获取到的元素.innerHTML 获取代码以及内容，但是只显示内容。
2、获取到的元素.innerText 获取代码与内容文本。
3、获取到的input框.value 获取input框内的文本内容。
四、操作Dom
操作元素的属性
1、获取到的元素.setAttribute("属性名称"，"属性值") 设置元素的id、class以及自定义属性等。
2、获取到的元素.getAttribute("属性名称") 获取元素的属性值。
3、获取到的元素.removeAttribute("要删除的属性名称") 删除对应的元素属性。
操作元素
1、需要插入元素的dom.appendChild(插入的元素) 该方法可向当前元素插入一个子元素。
2、需要删除子元素的dom.removeChild() 删除对应父元素的子元素。
3、dom元素.nextSibling 获取该dom元素的下一个同辈dom
4、dom元素.previousSibling 获取该dom元素的上一个同辈dom
5、dom元素.childNodes[要查找的元素下标] 获取该元素下的任意dom
6、dom元素.firstChild 该元素的第一个子元素
7、dom元素.lastChild 该元素的最后一个子元素
8、dom元素.parentNode 获取该dom的父级元素
设置元素样式
1、dom元素.style.要改变的样式名称 = “样式值”
操作元素事件
1、dom元素.onclick 点击dom触发
2、dom元素.ondbclick 双击dom触发
3、dom元素.onblur 元素失去焦点触发
4、dom元素.onfocus 元素获取焦点触发
5、dom元素.onchange 内容发生改变或失去焦点触发
6、dom元素.onmouseover 鼠标移入元素触发
7、dom元素.onmouseout 鼠标移出元素触发
8、dom元素.onkeyup 鼠标抬起触发
9、dom元素.onkeydown 鼠标按下触发
10、dom元素.onsubmit 提交表单触发
在此列举十个比较常用的dom事件，另外还有一种绑定事件的方法：
1、添加事件：addEventListener("要绑定的事件名称，例如：click 这边的事件都不添加on"，操作该dom的函数，该函数最好在外部调用后引入，后期如果要删除事件需要用到)。
2、删除事件：removeEventListener("要删除的事件名称，例如：click"，要删除的函数名)。