DOM

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()

• 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树的最上层。

image.png

事件委托

本来要自己做的事，可以委托其它的标签去做，这种方式叫做事件委托

比来要给li注册的事件，现在只需要注册到ul即可，通过事件冒泡的方式，也可以达到相应的效果。

阻止事件冒泡

取消冒泡和捕获: stopPropagation() 取消冒泡和捕获

事件捕获 刚好和事件委托相反

是从DOM的最外层到目标对象执行触发

而冒泡是从当前对象往DOM的最顶级元素去执行触发

image.png

事件的三个阶段

image.png

事件对象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 的事件级别

DOM事件级别.png

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: 手指双击屏幕会触发