search

wangning0 / Autumn_Ning_Blog

572 stars 119 forks source link

DOM 理解 #19

Open wangning0 opened 7 years ago

wangning0 commented 7 years ago

DOM

DOM(文档对象模型)是针对HTML，XML文档的一个API，DOM描绘了一个层次化的节点树

DOM

Node---|--Document-------HTMLDocument
       |
       |--characterData---|----Text
       |                  |----Comment
       |--Element------HTMLElement---|--HTMLHeadElement
       |                             |--...
       |                             |--HTMLButtonElement
       |--Attr

Node类型

Javascript的所有节点类型都是继承来自Node类型，因此所有的节点类型都共享着相同的基本属性和方法

Document 类型

Javascript 通过Document类型表示文档，在浏览器中document对象是HTMLDocument（继承自Document类型）的实例。

Element 类型

特征：

属性和方法：

Text类型

文本节点又Text类型表示，包含的是可以照字面解释的纯文本内容，纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。

特征：

Comment 类型

注释在DOM中是通过Comment类型来表示的

Attr属性

元素的特性在DOM中以Attr类型来表示

度量

DOM度量

clientWidth/clientHeight: 带padding不带滚动条的内容区域

css的width包括了滚动条

scrollWidth/scrollHeight: 和clientWidth一样，但是包含了整个可以滚动的区域

scrollTop/scrollLeft 溢出部分的距离

offsetWidth/offsetHeight 包含border不包含margin的长度

clientTop/clientLeft top/left的border的长度

offsetParent/offsetLeft/offsetTop: offsetLeft和offsetTop反映了元素相对于它的offsetParent的偏移量。offsetParent是在布局上的父元素。

事件处理(IE 与 W3C的标准不同)

事件代理

常用的场景

事件代理可以让你使用一个事件监听器去监听大量的DOM节点的事件。

Event对象

type (String) — 事件的名称

target (node) — 事件起源的DOM节点

currentTarget?(node) — 当前回调函数被触发的DOM节点

bubbles (boolean) — 指明这个事件是否是一个冒泡事件（接下来会做解释）

preventDefault(function) — 这个方法将阻止浏览器中用户代理对当前事件的相关默认行为被触发。比如阻止a元素的click事件加载一个新的页面

stopPropagation (function) — 这个方法将阻止当前事件链上后面的元素的回调函数被触发，当前节点上针对此事件的其他回调函数依然会被触发。（我们稍后会详细介绍。）

stopImmediatePropagation (function) — 这个方法将阻止当前事件链上所有的回调函数被触发，也包括当前节点上针对此事件已绑定的其他回调函数。

cancelable (boolean) — 这个变量指明这个事件的默认行为是否可以通过调用event.preventDefault来阻止。也就是说，只有cancelable为true的时候，调用event.preventDefault才能生效。

defaultPrevented (boolean) — 这个状态变量表明当前事件对象的preventDefault方法是否被调用过

isTrusted (boolean) — 如果一个事件是由设备本身（如浏览器）触发的，而不是通过JavaScript模拟合成的，那个这个事件被称为可信任的(trusted)

eventPhase (number) — 这个数字变量表示当前这个事件所处的阶段(phase):none(0),

timestamp (number) — 事件发生的时间

DOM扩展

选择符API

HTML5

兼容模式

document.compatMode 属性可以区别渲染页面是标准的还是混杂的，标准模式是：CSS1Compat, 混杂模式是：BackCompat

字符集属性

document.charset

自定义数据属性

可以通过元素的dataset属性来访问自定义属性的值，

元素大小

偏移量

元素的大小由高度、宽度决定，包括所有内边距和滚动条和边框大小，注意不包括外边距

客户区大小

指的是元素内容及内边距所占据的空间大小，clientWidth clientHeight

滚动大小

包含滚动内容的元素的大小

确定元素大小

element.getBoundingClientRect()

返回： top left bottom right width height

事件

事件流

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，Netscape的事件流是事件捕获流

DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段

事件处理程序

DOM0级事件处理程序，将一个函数赋值给一个事件处理程序属性

DOM2级事件处理程序，定义了两个方法用于处理指定和删除事件处理程序的操作，addEventListener() removeEventListener()

IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent detachEvent 这两个方法接收相同的两个参数：事件处理程序名称和事件处理程序函数，因为IE8及更早版本只支持冒泡，所以通过attachEvent 添加的事件处理程序都会被添加到冒泡阶段

事件对象

再出发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件相关的信息（包括导致事件的元素、类型以及其他与特定事件相关的信息）

IE中的事件对象即event对象，在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在

    var EventUtil = {
        addHandler: function(elem, type, handler) {
            if(elem.addEventListener) {
                elem.addEventListener(type, handler);
            } else if(elem.attachEvent) {
                elem.attachEvent('on' + type, handler);
            } else {
                elem['on' + type] = handler;
            }
        },
        removeHandler: function(elem, type, handler) {
            if(elem.removeEventListener) {
                elem.removeEventListener(type, handler);
            } else if(elem.detachEvent) {
                elem.detachEvent('on' + type, handler);
            } else {
                elem['on' + type] = handler;
            }
        },
        getEvent: function() {
            return event ? event : window.event;
        },
        stopPropagation: function(event) {
            if(event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
        },
        preventDefault: function(event) {
            if(event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        getTarget: function(event) {
            return event.target || event.srcElement;
        }
    }

事件类型

“DOM3级事件”规定了以下几类事件：