DOM

---

DOM(文档对象模型)

什么是DOM?

D 代表 Document， DOM 将 HTML 页面解析为一个 文档。同时提供了 document 对象。
O 代表 Object， DOM 将 HTML 页面中每个元素解析为一个 对象。例如 <div> 元素在 DOM 中对应就是 HTMLDivElement 对象。
M 代表Model，DOM 中表示各个对象之间的关系。也就是DOM树。
--DOM树

image.png

DOM操作

--JavaScript 能够操纵页面中的 HTML 元素
--JavaScript 能够操纵页面中的 HTML 属性
--JavaScript 能够改变页面中的 CSS 样式
--JavaScript 能够对页面中的事件做出响应

---

节点类型

DOM = HTML + 其他多种类型(元素、属性、文本等)
所有组成DOM的内容都称作DOM节点。

--节点类型

image.png

---

querySelector与getElement系列的区别

https://www.zhihu.com/question/24702250

---

attribute与propety的区别

attribute包含自定义属性和预定义属性，而propety只包含预定义属性

<1>非布尔值
attribute与propety会实时同步关系
<2>布尔值属性
--propety不会同步attribute
--如果没有修改过propety,attribute会实时同步propety,
一旦修改过propety,attribute不会实时同步proprty
####浏览器响应的是propety，用户操作的也是propety

---

事件对象

eg:
div.onclick = function(ev){  //形参ev:一般情况下浏览器会将事件对象作为事件回调的第一个参数传入
ev = ev||event;        //event:某些浏览器将事件对象绑给了window对象(window.event)
}

DOM中关于获取CSS尺寸&位置的API

--尺寸

clientWidth&clientHeight     //padding-box
offsetWidth&offsetHeight    //border-box(=padding-box+border,此API获取的尺寸与盒模型的值有关，根据盒模型的值而发生变化)

//获取视口的大小
document.documentElement.clientWidth
document.documentElement.clientHeight

--位置

clientX&clientY       //clientX：触发事件时，在X轴上，鼠标距离视口的位置
                              //clientY：触发事件时，在Y轴上，鼠标距离视口的位置
getBoundingClientRect()     //元素相对视口的位置(getBoundingClientRect().left,getBoundingClientRect().top)

offsetleft&offsettop&offsetParent

---

阻止事件的默认行为

--HTML阻止事件的默认行为
1.<a href = "javascript:;"></a>
2.<a href = "#"></a> //地址栏中会产生锚点#,所以不推荐使用
--DOM0阻止事件的默认行为
1.ev.preventDefalut();
2.return false;
--DOM2阻止事件的默认行为
ev.preventDefalut();
注意点：只有当cancelble为true时才能取消事件默认行为，否则不能取消事件默认行为

---

事件流

事件流以事件为单位。
--DOM0事件流只有冒泡
--DOM2事件流既有冒泡(false)也有捕获(true)
--冒泡的条件：
HTML结构有嵌套(父子关系)
嵌套结构有相同的事件
--捕获定义：
当触发事件时，浏览器会从根节点开始由外向内进行传播(如果子元素与父元素都绑定了相应事件，会先触发父元素)
--冒泡定义：
当触发事件时，；浏览器会从子节点开始由内向外进行传播(先触发子元素再冒泡到父元素)

完整的事件流

捕获---->目标处理(无捕获和冒泡)---->冒泡

阻止冒泡

1.ev.stopProgation();
2.ev.cancleBubble = true;

阻止冒泡&阻止事件默认行为

如果一个节点的父级阻止了默认行为，会影响到子级(子级也会阻止事件的默认行为)，但可以通过阻止冒泡来使父子之间通信，这样子级就可以使用默认行为(因为这时子级无法知道父级是否阻止了默认行为)

image.png

事件委托

事件委托要基于事件冒泡，当子节点有共性操作是使用事件委托
事件委托:一般来讲，会将一个或一组元素的事件委托到它的父级或更外层元素元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

eg:
<ul>
  <li>item1</li>
  ...
  <li>itemn</li>
</ul>
<script>
  window.onload = function(){
    var ul = document.queraySelector("ul");
    //ul是currentTarget,始终是监听事件者，而target是事件的真正发出者
    ul.onclick = function(ev){
        ev = ev||event;
        if(ev.target.nodeName.toupperCase()==[]){
          alert(ev.target.textContent);
}
}
}
</script>

---

事件分类

具体的事件分类可参考以下地址：

https://developer.mozilla.org/zh-CN/docs/Web/Events