DOM操作与事件高级

朱雀 2022-11-27 15:37 160阅读 0赞

# Web API之DOM #

### Web-API ###

API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力而又无需访问源码，或了解内部工作机制的细节；  
*简单了解*：API是给程序员提供的一种工具，以便能更轻松实现想要完成的功能；

*  **Web API是游览器提供的一套操作游览器功能和页面元素API（DOM 和 BOM）**
 *  **主要是针对游览器提供的接口，应用于游览器做交互效果**
 *  **Web API 一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）**  
    ***好的，以上是关于API的初步了解，API（DOM和BOM）今天我们重点讲DOM***

### 什么是DOM ###

*  **DOM全拼为Document Object Model（文档对象模型）**
 *  **文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口**
 *  **W3C 已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式**
 *  **我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型**

#### DOM树 ####

*  **文档：** 一个页面就是一个文档，DOM中使用document表示
 *  **元素：** 页面中的所有标签都是元素，DOM 中使用element表示
 *  **节点：** 网页中的所有内容（包括注释）都是节点，DOM中使用node表示  
    ***DOM 把以上内容都看做对象***

#### 获取元素 ####

*我们要怎么样获取到页面中的元素？（获取页面元素有以下的几种方法）*

###### **01. 根据ID获取页面元素** ######

使用 getElementByld() 方法可以获取带有ID的元素对象

###### **02. 根据标签名获取页面元素** ######

使用getElementsByTagName(‘标签名’) 方法可以返回带有指定标签名的对象的集合

###### **03. 通过HTML5新增的方法获取页面元素** ######

*  **document.getElementsByClassName(‘类名’)；** 根据类名返回元素的集合
 *  **document.querySelector(‘选择器’);** 根据指定选择器返回第一个元素对象(选择器需要加符号，代表是什么选择器)
 *  **document.querySelectorAll(‘选择器’)；** 返回指定选择器的所有元素对象集合

###### **03. 特殊元素获取（body / html）** ######

*  **获取body元素document.body;**
 *  **获取html元素document.documentElement;**

#### 操作元素 ####

**JavaScript 的 DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等**  
*DOM操作元素有以下几种方式*

###### **01. 改变页面元素内容** ######

*  **element.innertext**  
    从起始位置到终止位置的内容，但它去除html标签，同时空格和换行一会去掉（不识别HTML标签，非标准）
 *  **element.innerHTNL**  
    起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行（可识别HTML标签，W3C标准）

###### **02. 常用的元素属性操作** ######

获取了元素后，我们可以（元素.属性）修改我们的元素属性

###### **03. 表单元素的属性操作** ######

*  **利用DOM 可以操作如下表单元素的属性：**  
    type / value / checked / selected / disabled

###### **03. 样式属性操作页面元素** ######

*可以通过JS 修改元素的大小、颜色、位置等样式*

*  **行内样式操作：** element.style
 *  **类名样式操作：** element.className  
    **注意：**  
    **！JS 里面的样式采取驼峰命名法；例如style.backgroundColor**  
    **！JS 修改 style 样式操作，产生的是行内样式，css权重比较高**  
    **！className 会直接更改元素的类名，覆盖原先的类名（取消原先类名的所有样式）；如果需要保留原先的类名，可以在前面加上原先的类名（多类名）**

###### **04. 自定义属性操作页面元素** ######

*  **获取属性值的方法**  
    1，获取内置属性值（元素本身自带的属性）：element.属性  
    2，主要获取自定义的属性（标准）：element.getAttribute(‘属性’)
 *  **设置属性值的方法**  
    1，设置内置属性值：element.属性 = ‘值’  
    2，设置自定义属性值：element.setAttribute(‘属性’, ‘值’)
 *  **移除属性值的方法**  
    element.removeAttribute(‘属性’)  
    **注意：**  
    **！H5 自定义属性的目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库**  
    **！H5 规定自定义属性 data开头作为属性名并且赋值**
 *  **获取H5自定义属性**  
    1，兼容性获取：element.getAttribute(‘data-index’)  
    2，H5新增 element.dataset.index 或者 element.dataset\[‘index’\]；ie11才开始支持  
    **注意：**  
    **！如果自定义属性里面有多个-连接的单词，我们获取时采取 驼峰命名法**  
    **dataset 是一个集合 里面存放了所有以data开头的自定义属性**

###### **05. 节点操作页面元素** ######

*  **节点的概述**  
    网页中的所有内容都是节点，在DOM中节点使用node来表示；HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建、添加或删除
 *  **一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）、和nodeValue（节点值）这三个基本属性**  
    1，元素节点 nodeType 为 1  
    2，属性节点 nodeType 为 2  
    3，文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）  
    **在实际开发中，节点操作主要操作的是 元素节点，所以我们也可以利用节点类型判断，获取我们需要操作的元素节点，本文也有提供一些其他的方法获取元素节点**
 *  **节点层级**  
    **利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系**  
    **1，父级节点**  
    node.parentNode 标准(如果找不到就返回null)  
    **2，子节点**  
    **2-1** parentNode.childNodes 非标准 返回包含指点节点的子节点的集合，该集合为即时更新的集合  
    ！返回值里面包含了所有的子节点，包括元素节点，文本节点等  
    ！如果只想要获得里面的元素节点，则需要专门处理；通过循环和判断语句（nodeType == 1）可以获得里面的元素节点，就是有点麻烦，哇哇哇！  
    **2-2** parentNode.children 非标准，是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回  
    **2-3** parentNode.firstchidren 和 parentNode.lastchildren分别返回第一个和最后一个子节点，如果没有就返回null  
    **2-4** parentNode.firstElementChild 和parentNode.lastElementChild (有兼容性问题，IE9以下版本不支持)  
    **实际开发中如果我们想要，既没有兼容性问题又想得到子元素节点，可以使用数组的方式获取，例如：parentNode.children\[0\];根据数组的下标获取（这里获取的都是子元素节点）；  
    当我们需要获取的是第一个子元素节点和最后一个子元素节点时，还可以使用数组的length属性：  
    parentNode.children\[0\]; 获取第一个子元素节点  
    parentNode.children\[parentNode.length - 1\]; 获取最后一个子元素节点**  
    **3，兄弟节点**  
    **3-1** node.nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null,同样也是包含所有的节点  
    **3-2** node.previousSibling 返回当前元素上一个兄弟节点，找不到则返回null,包含所有节点  
    *！以下这两个获取兄弟节点的方法有兼容性问题，IE9以上才支持*  
    **3-3** node.nextElementSibling 返回当前元素下一个兄弟元素节点，找不到返回null  
    **3-4** node.previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null  
    **4，创建节点**  
    document.createElement('tagName);方法创建由tagName指定的HTML元素，因为这些元素原先不存在。是根据我们的需求动态生成的，所以我们也称为动态创建元素节点  
    **5，添加节点**  
    **5-1** node.appendChild()方法将第一个节点添加到指定父节点的子节点列表末尾，类似于css的after伪元素  
    **5-2** node.insertBefore(child, 指定元素)方法将一个节点添加到父节点的指定节点前面，类似css中的before伪元素  
    **6，删除节点**  
    node.removeChild(child);方法从DOM中删除一个子节点，返回删除的节点  
    **7，复制节点**  
    node.cloneNode();方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点  
    注意：  
    ！如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点；  
    ！所以给它一个参数true，则为深拷贝，会复制节点本身包括它的所有子节点；  
    ***很显然我们知道如何获取元素和如何操作元素，也了解了节点操作页面元素了，可还是没能知道具体需要怎么做才可以做自己想要的效果，因为这中间还差一步：注册事件（绑定事件）***

#### 事件 ####

###### **？什么是事件** ######

*  JavaScript 使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为； 理解：触发 ==》响应机制
 *  事件是由三部分组成的：事件源 事件类型 事件处理程序  
    事件源：事件被触发的对象  
    事件类型：如何触发  
    事件处理程序：通过一个函数赋值的方式完成
 *  执行事件的步骤  
    获取事件源 —》注册事件（绑定事件）—》添加事件处理程序（采用函数赋值形式）

###### **01. 注册事件的概括** ######

**给元素添加事件，称为注册事件或者绑定事件；注册事件有两种方式：传统方式和方法监听注册方式**

###### **02. 注册方式** ######

*  传统注册方式  
    1，利用on开头的事件，例如：onclick  
    2，特点：注册事件的唯一性  
    3，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖掉前面注册的处理函数
 *  方法监听注册方式  
    1，w3c 标准 推荐方式  
    2，addEventListener() 它是一个方法  
    3，IE9以下版本不支持此方法，可使用 attachEvent() 代替 ！IE9以前版本才能用  
    **特点：同一个元素同一个事件可以注册多个监听器；按注册顺序依次执行**

###### **03. 事件监听方式 addEventListener()** ######

*  语法：target.addEventListener(type, listener \[, options\]);
 *  eventTarget.addEventListener() 方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数
 *  该方法接收三个参数：  
    type：事件类型字符串，比如click  
    listener：事件处理函数，事件发生时会调用该监听函数  
    useCapture：可选参数，是一个布尔值，默认是false  
    **！注册事件兼容性解决方案：可以使用if判断游览器是否支持该方式**

###### **04. 删除事件** ######

*  传统事件：eventTarget.onclick = null;
 *  方法监听注册方式：  
    target.removeEventListener(type, listener\[, options\]);  
    eventTarget.datachEvent(eventNameWithon, callback)

###### **05. DOM事件流** ######

*  事件流描述的是从页面中接收事件的顺序
 *  事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM 事件流
 *  DOM 事件流分为3个阶段：1，捕获阶段 2，当前目标阶段 3，冒泡阶段  
    **注意：**  
    1，JS代码中只能执行捕获或者冒泡其中一种阶段  
    2，onclick 和 attachEvent 只能得到冒泡阶段  
    3，addEventListener(type, listener \[, options\]); 第三个参数如果是true 表示在事件捕获阶段调用事件处理程序；如果是false（不写，默认值）则表示在事件冒泡阶段调用事件处理程序  
    4，实际开发中我们很少使用事件捕获，而是更关注事件冒泡  
    5，有些事件是没有冒泡的，比如onclick，onfocus等  
    6，事件冒泡有时候会带来麻烦，有时候又会很巧妙地去帮助做某些事件

###### **05. 事件对象** ######

**？什么是事件对象**  
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件event，它有很多属性和方法。

*  事件对象常用的属性和方法  
    1，返回触发事件的对象（标准）：e.target  
    2，返回触发事件的对象（非标准 IE678 使用）：e.srcElement  
    返回事件的类型 比如click mouseover：e.type  
    3，阻止冒泡，标准：e.stopPropagation  
    4，该属性阻止冒泡（非标准IE678使用）：e.cancelBubble  
    5，该方法阻止默认事件（默认行为，标准）：e.preventDefault  
    6，该属性阻止默认事件（默认行为，非标准，ie679使用，如不让链接跳转）：e.returnValue
 *  阻止事件冒泡的两种方式  
    *事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点*  
    阻止事件冒泡：  
    1，标准写法：利用事件对象里面的 stopPropagation()方法  
    2，非标准：IE678 利用事件对象 cancelBubble属性 = true
 *  关于事件委托（代理，委派）  
    1，事件委托：事件委托也称为事件代理，在jQuery 里称为事件委派  
    2，事件委托的原理：不需要给每一个子节点单独设置事件监听器，而是把事件监听器设置在父节点上，然后利用冒泡原理影响设置每一个子节点；作用：只操作了一次DOM，提高了程序的性能
 *  **常用的鼠标与键盘事件（可以使用preventDefault禁用）**  
    1，鼠标右键菜单：contextmenu  
    2，鼠标开始选中：selectstart
 *  鼠标事件对象和键盘事件对象  
    event 对象代表事件的状态，跟事件相关的一系列信息的集合，现阶段我们主要是用鼠标事件对象MouseEvent 和 键盘事件对象KeyboardEvent  
    **常用鼠标事件：**  
    返回鼠标相对于游览器窗口可视化的X坐标：e.clientX  
    返回鼠标相对于游览器窗口可视区的Y坐标：e.clientY  
    返回鼠标相对于文档页面的X坐标：e.pageX  
    返回鼠标相对于文档页面的Y坐标：e.pageY  
    **常用键盘事件**  
    onkeyup 某个键盘按键被松开时触发  
    onkeydown 某个键盘按键被按下时触发  
    onkeypress 某个键盘按键被按下时触发（不识别功能键，但可以区分大小写，可以返回不同的ASCLL码）  
    ***！三个事件的执行顺序是：keydown – keypress – keyup***  
    **键盘事件对象属性：keyCode 返回该键的ASCLL值，我们可以利用这个属性知道我们输入的是键盘上的哪一个键**

***关于dom操作，我们主要针对于元素的操作，主要有***

*  **创建**
 *  **增**
 *  **删**
 *  **改**
 *  **查**
 *  **属性操作**
 *  **事件操作**

小怪留言：有些知识点比较少用到，忘记了不可怕，有空回来看看吖