DOM
JS的组成
ECMAScript js的基础语法
DOM 文档对象模型
BOM 浏览器对象模型
DOM
Document Object Model(文档对象模型)
学习DOM就是学习封装好的操作页面的API(应用程序接口)，Application programming interface 就是一些封装好的方法
DOM：文档对象模型(Document Object Model)，又称为文档树模型。是一套操作HTML和XML文档的API
DOM是由哪些部分组成的？
首先是由节点组成的，节点又分以下几部分：
元素 属性 文本 注释
1、获得页面元素的方式
- document.getElementById() 通过标签的Id获得的是唯一的页面标签对象
var li2 = document.getElementById("li2"); //通过id的方式获得页面中的标签，是唯一的一个对象
- document.getElementsByTagName() 通过标签(元素)名
var lis = document.getElementsByTagName("li"); // 通过标签的方式获得所有的li元素,是一个标签对象的数组
- document.getElementsByClassName() 通过标签的类名:在JS中不推荐使用这种方式，因为有兼容性的问题
var divs = document.getElementsByClassName("box"); // 通过类名的方式获得的也是标签对象的数组
- H5的获取元素节点： document.querySelector("")
- H5的获取元素节点： document.querySelectorAll("")
注意：DOM对象的属性和标签的属性几乎是一模一样的，用DOM的方法获得的标签对象就是DOM对象
2、获取元素后的一些操作
获取元素内的内容
textContent
innerHTML
区别：textContent与innerHTML方法类似会返回对象节点下所有的文本内容，但是textContent返回的内容只有去HTML化的文本节点的内容
设置内容
textContent
innerHTML
innerHTML会直接渲染成对应的HTML标签
标签的属性操作
- 获取属性值（可以获的自定义属性的值）：dom.getAttribute(name)
- 设置属性值（可以获的自定义属性的值）：dom.setAttribute(name, value)
- 移除属性值：dom.removeAttribute(name)
- 特列：获取class的值 dom.className , 设置则可以赋值设置，返回的是个字符串
- 特列：获取class的值 dom.classList.add() | remove() , 添加或者删除，返回的是一个类名数组
js设置样式
通过js动态添加类名从而达到更改样式
-
通过dom.style属性获取样式 或者设置样式
dom.style.width = "100px" dom.style.heigth = "100px" dom.style.color = "red" dom.style.border = "1px solid red" dom.style.backgroundColor = "yellow"
3. 节点
DOM是由节点组成的 节点：标签，文本，学习节点的目的，是为了让我们对DOM操作更加的灵活一些。
节点获取：
- dom.parentNode： 获取dom节点的父节点
- dom.children: 获取dom节点的子节点，是一个数组
- dom.nextElementSibling : 获取dom的下一个元素节点
- dom.nextSibling ：获取dom的下一个节点（包括元素节点）
- dom.previousSibling
- dom.previousElementSibling 同上
节点的创建和插入：
-
document.createElement()
<script> var box = document.getElementById("box"); var ul = document.createElement("ul"); // 创建的是一对标签 box.appendChild(ul);// 将创建出来的ul标签追加到box中 var li = document.createElement("li"); // 创建的一个标签对象 ul.appendChild(li); li.innerHTML = "这是新添加的内容"; </script> cloneNode
appendChild
//var li11 = dom.cloneNode(false); // 如果参数是false的话，表示浅度克隆，只克隆标签，不会克隆标签之间的内容
var li11 = li1.cloneNode(true);// 如果参数为true的话，表示 深度克隆，会克隆标签内的一切内容
// var li11 = li1.cloneNode();// 如果不写参数的话，与false一致
// console.log(li11);
// 可以将克隆出来的内容追加到任何一个节点上
// appendChild
ul.appendChild(li11); // 在当前父级元素的最后，追加一个克隆出来的标签节点
console.log(ul);
- m.insertBefore(k,n) 在m元素的k节点前添加n节点
删除节点
- m.removeChild(n)删除m元素中的n节点
4、事件
JavaScript是一种事件驱动的语言，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。分为触发和响应
- 触发：交互的某个瞬间
- 响应：就是要执行的某些代码要达到一定的效果
事件三要素
事件源 要给谁注册事件
事件类型 要给事件源注册什么样的事件
事件处理程序 要执行的代码，去达到某种效果 函数或是匿名函数
注册事件
- On的方式注册事件
- addEventListener()
移除事件
dom.removeEventListener(type,listener) 高级浏览器支持的方式
事件冒泡
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
事件委托
本来要自己做的事，可以委托其它的标签去做，这种方式叫做事件委托
比来要给li注册的事件，现在只需要注册到ul即可，通过事件冒泡的方式，也可以达到相应的效果。
阻止事件冒泡
取消冒泡和捕获: stopPropagation() 取消冒泡和捕获
事件捕获 刚好和事件委托相反
是从DOM的最外层到目标对象执行触发
而冒泡是从当前对象往DOM的最顶级元素去执行触发
事件的三个阶段
事件对象event
任何事件触发的时候，程序都会提供给我们一个事件对象event
存储着一些与事件相关的信息
也是有兼容生的，高级浏览器是支持的，但是IE8及以下的浏览器的是支持的window.event
Var e = event || window.event;
三个坐标
event.clientX/Y 可视区，以浏览器可视区的左上角为基准
event.pageX/Y 以页面的左上角为基准
event.screenX/Y 以电脑屏幕的左上角为基准
pageX/Y是有兼容性的，
event.pageX/Y = event.clientX/Y+event.scrollTop/Left
DOM事件的Event对象的常见应用：
- event.preventDefault() : 阻止默认事件
- event.stopPropagation(): 阻止冒泡
- event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
- event.target: 返回触发事件的元素
- event.currentTarget: 返回绑定事件的元素
DOM 的事件级别
DOM1也是存在，只是没有涉及到事件，DOM3比DOM2多了键盘和鼠标一些事件
DOM的自定义事件：
var eve = new Event('eventName')
dom.addEventListener('eventName',function(){
}) //注册事件
dom.dispatchEvent(eve); // 触发事件，
---------------------------------------------------------
这个事件不能添加参数，想要添加参数，得自定义 CustomEvent事件
// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)
其他事件类型：
Onmouseover 鼠标移入的事件
Onmouseout 鼠标离开的事件
Onfocus 获得焦点的事件
Onblur 失去焦点的事件
Ondblclick 鼠标的双击事件
移动端的事件
click事件
单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟
touch类事件
触摸事件，有touchstart touchmove touchend touchcancel 四种之分
touchstart：手指触摸到屏幕会触发
touchmove：当手指在屏幕上移动时，会触发
touchend：当手指离开屏幕时，会触发
touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
tap类事件
触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
