js的DOM扩展；事件；事件对象的总结(2018年暑假）

叁歲伎倆 2021-11-11 16:50 293阅读 0赞

## 8.6 ##

*  看红宝书的第十一章DOM的扩展

1.选择符API
        （1）querySelector()方法
            a.接收一个CSS选择符，返回与该模式匹配的第一个元素，返回null。
            b.通过document类型调用时，会在文档元素的范围内查找匹配的元素；通过Element类型调用时，只会在该后代元素的范围内查找匹配的元素
        （2）querySelectorAll()方法
            a.能调用的类型：Element，Document，DocumentFragment。
            b.接收一个css选择符，返回所有匹配的元素，返回的是一个NodeList实例
        （3）matchesSelector()方法
            a.接收CSS选择符，如果调用元素与该选择符匹配则返回true，否则返回false。
    2.元素遍历
        (1)五个增加的属性（详见288页）
    3.HTML5
        （1）与类相关的扩充
            a.getElementByClassName()方法
                *接收一个参数，即一个包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList.
            b.classList属性（可以更好的操作类名）
                *定义了如下的方法：
                    &.add（value）：将给定的字符串值添加到列表中，若已经存在则不添加
                    &.contains（value）：列表中是否存在给定的值，存在返回true
                    &.remove（value）：删除给定字符串
                    &.toggle（value):若给定值列表存在则删除，若不存在则添加
        （2）焦点管理
            a.document.activeElement属性(始终会引用DOM中当前后的了焦点的元素)
                *元素获得焦点的方法有三个:
                    &.页面加载
                    &.用户输入通常按Tab键
                    &.代码中调用focus()
                *默认情况下文档刚刚加载完成时，document.activeElement中保存的是document.body的引用；加载期间，值为null.
            b.document.hasFocus()方法：确定文档是否获得了焦点
        （3）HTMLDocument的变化
            a.readyState属性（可以通过它来实现一个指示文档已经加载完成的指示器）
                *两个可能值：loading与complete
            b.兼容模式
                *给document添加了一个名为compatMode属性，告诉开发者浏览器采用了哪种渲染模式
            c.head属性
        （4）字符集属性
            a.charset属性：表示文档中实际使用的字符集，也可以用来指定新的字符集
            b.dafaultCharset属是性表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么样。
        （5)自定义数据类型
            a.需要添加前缀data-，添加了自定义属性后可以使用dataset属性访问自定义属性值
        （6）插入标记
            a.innerHTML属性
                *读模式下，返回与调用元素的所有子节点对应的HTML标记
                *写模式，会根据指定的值创建的DOM树，然后用该树完全替换调用元素原先的所有节点。
                *不支持该属性的元素有<col>.<colgroup>.<frameset><html><style><tbody><thead><tfoot><tr><head>
                *若要使用innerHTML从外部插入HTML，提供了window。tostaticHTML()方法，接收一个参数即HTML字符串
            b.outerHTML属性
                *读模式，返回调用它的元素及所有的子节点的HTML标签
                *写模式，会根据指定的HTML字符串创建新的DOM子树，然后用该树完全替换调用元素。
            c.insertAdjacentHTML()方法（插入标记）
                *两个参数：插入位置与要插入的HTML文本，第一个值必须是下列值之一：
                    &.beforebegin
                    &.afterbegin：在当前元素之前插入一个同辈元素
                    &.beforeend： &.afterend：在当前元素之后插入一个同辈元素
            d.内存与性能问题
        （7）scrollIntoView（）方法
    4.专有扩展
        （1)文档模式
        （2）children属性
        （3）contains（）方法
            *调用该方法应该是祖先节点，接收一个参数，即要检测的后代节点
        （4）插入文本
            a.innerText属性
            b.outerText属性
        （5）滚动
            详见303页

*  看网课：dom继承数以及dom的基本操作！
 *  FreeCodeCamp上面开始做基础的题，今天刷了90道。

## 8.7 ##

*  红宝书第12章：DOM2.DOM3

1.dom的变化
        （1）针对XML命名空间的变化（命名空间要使用xmlns特性来指定）
            a.Node类型的变化
                *DOM2中包含下列特定于命名空间的属性：
                    localName（不带命名前缀的节点名称）、  namespaceURL（命名空间URL或null），  prefix（命名空间前缀或者null）。
                *DOM3中引入了与命名空间有关的方法
                    isDefaultNamespace（namespaceURL）：在指定的namespaceURL是当前节点的默认命名空间的情况下返回true。
                    lookupNamespaceURL(prefix):返回给定的prefix命名空间
                    lookupPrefix(namespaceURL):返回给定的namespaceURL前缀
            b.document类型的变化
                *包含下列与命名空间有关的办法：
                    createElementNS（namespaceURI，tagName）：使用给定的tagName创建一个属于命名空间namespaceURI的新元素
                    createAttributeNS(namespaceURL,attributeName):使用给定的attributeName创建一个属于命名空间namespaceURL的新特性。
                    getElementsByTagNameNS（namespaceURL，tagName）：返回属于命名空间namespaceURL的tagName元素的NodeList。
            c.Element类型的变化
                *主要涉及操作特性，新增方法：
                    详见308页
            d.nameNodeMap类型的变化
                *详见309页
        （2）其他方面的变化
            a.DocumentType类型的变化
                *新增了3个属性：publicID，systemID，internalSubset

*  看网课：获取窗口属性，获取dom尺寸，脚本化CSS
 *  看网课：date对象以及定时器
 *  在FreeCodeCamp上刷题，刷了最后基础的30道

## 8.8 ##

*  因为第12章有些没看懂，所以先学习13章：事件（用户或浏览器自身执行的某种动作）

1.事件流（描述的是从页面中接收数据的顺序）
        （1）事件冒泡（IE事件流）
            a.事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）
        （2）事件捕捉（netscape Communicator团队提出）
            a.由不太具体的节点更早的接收事件，而最具体的节点最后接收到事件
        （3）DOM事件流
            a.“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
    2.事件处理程序（响应某个事件的函数，名字都以on开头）
        （1）HTML事件处理程序
            
        （2）DOM0级事件处理程序
            a.要使用js指定时间处理程序首先要取得一个要操作的对象的引用。
            b.这里添加的事件处理程序是在其依附的元素的作用域中运行，就是程序中的this引用当前元素。
            c.删除的话，只需要将事件处理程序属性设置为null即可。
        （3）DOM32级事件处理程序
            a.定义了两个方法：
                *addEventListener():指定事件处理程序
                *removeEventListener（）：删除事件处理程序
                *三个参数：要处理的事件名，作为时间处理程序的函数，布尔值
                    布尔值为true时：表示在捕获阶段调用时间处理程序
                    布尔值为false：表示在冒泡阶段调用事件处理程序
            b.这里添加的事件处理程序是在其依附的元素的作用域中运行，就是程序中的this引用当前元素。
            c.好处：可以添加多个事件处理函数，按照添加他们的顺序触发
            d.利用addEventListener（）添加的匿名函数无法通过removeEventListener（）移除。
        （4）IE事件处理程序
            a.两个方法：
                *attachEvent（）：
                *detachEvent（）：
                *两个参数:事件处理程序名称与事件处理程序函数，都会被添加到冒泡阶段。
            b.事件处理程序会在全局作用域中运行，其中的this等于window。
            e.好处：也可以同时添加多个事件处理程序，只不过是以添加的相反的顺序被触发。
            f.利用attachEvent（）添加的可以用detachEvent（）移除，只不过要提供相同的参数。，所以不能移除添加的匿名函数
        （5）跨浏览器的事件处理程序（只需要关注冒泡阶段）
            a.两个方法：
                *addHandler（）：视情况分别使用DOM0方法、DOM2方法或IE事件来添加事件。属于EventUntil对象
                *removeHandler():移除之前添加的事件处理程序
                *3个参数：要操作的元素、事件名称、事件处理程序函数。
    3.事件对象
        (1)DOM中的事件对象
            a.event对象包含与创建它的特定事件有关的属性与方法。，具体见355页
            b.type属性
            c.preventDefault()方法：阻止特定事件的默认行为，只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。
            d.stopPropagation():用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕捉或冒泡。
            e.eventPhase属性：确定时间当前位于事件流的那个阶段，捕获阶段返回1，处于目标对象上返回2，冒泡阶段返回3.
        （2）IE中的事件对象
            a.returnVaule属性，取消给定事件的默认行为，将它设置为false，就可以阻止。
            b.cancelBUbble属性：停止事件冒泡。将它设置为true。
        （3）跨浏览器的事件对象
            a.封装了四种方法，详见360页。

*  看网课：事件（上）（下）看的不透彻

## 8.9 ##

*  红宝书的13.3节事件对象

1.事件类型
       （1）UI事件(不一定与用户操作有关的事件)
           a.load事件（当页面完全加载后，就会触发window上的load事件。）
               *两种定义onload事件处理程序的方式）
           b.unload事件（在文档被完全卸载后触发）
           c.resize事件（当浏览器窗口被调整到一个新的高度或宽度时，就会触发）
           d.scroll事件（表示的是页面中相应元素的变化）
       (2)焦点事件
           a.blur:在元素失去焦点时触发
           b.focus:在元素获得焦点时触发
       (3)鼠标与滚轮事件（click,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseup,mouseover)
           a.客户区坐标位置
               *clientX与clientY：事件发生时鼠标指针在视口的水平垂直坐标
           b.页面坐标位置
               *pageX与pageY属性：告诉事件是在页面的什么位置发生的。即表示鼠标光标在页面中的位置。是从页面本身而非视口的左边和顶边计算的。
           c.屏幕坐标位置
               *screenX与screeY:确定鼠标事件发生时鼠标指针相对于整个电脑屏幕的位置。
           d.修改键
           e.相关元素
           f.鼠标按钮
           g.更多事件信息
           h.鼠标滚轮事件
           i.触摸设备
           j.无障碍性问题
       (4)键盘与文本事件(keydown,keypress,keyup)
           a.键码
           b.字符编码
           c.DOM3级变化
           d.textInput事件
           e.设备中的键盘事件
       (5)复合事件
       (6)变动事件
           a.删除节点
           b.插入节点
       (7)HTML5事件
           a.contextmenu事件
           b.beforeunload事件
           c.DOMContentLoaded事件
           d.readystatechange事件
           e.pageshow和pagehide事件
           f.haschange事件
       （8）设备事件
           a.orientationchange事件：以便开发人员能够确定用户何时将设备由横向查看模式切换为纵向

## 8.10 ##

*  在网上学习轮播图的制作，有个大概
 *  在w3scool上学习css3