后哦阿胶高哦电话费㐎
console.log(document.getElementsByClassName('con')); //根据类名返回html集合 ```  ### 根据name获取元素 **语法**：`document.getElementsByName('name属性')` 作用：根据name属性获取元素对象 参数：name名称 返回值：**节点列表集合**（伪数组，数组元素是元素对象） ```js console.log(document.getElementsByName('username')); // 通过name获取,返回节点列表,类型为数组 ```  ### 根据标签名获取元素 **语法**：`document.getElementsByTagName('标签名')` **得到这个元素里面的所有标签** ``` `element.getElementsByTagName('标签名')` ``` 作用：根据标签名获取元素对象 参数：标签名 返回值：**元素对象集合**（伪数组，数组元素是元素对象） ```js1123
``` innerText和innerHTML的区别 * 获取内容时的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行 * 设置内容时的区别： innerText不会识别html，而innerHTML会识别  ### 常用元素的属性操作 innerText、innerHTML 改变元素内容 src、href id、alt、title 获取属性的值 **元素对象.属性名** 设置属性的值 **元素对象.属性名=值**  ### 表单元素的属性操作 利用DOM可以操作如下表单元素的属性： type、value、checked、selected、disabled 获取属性的值 **元素对象.属性名** 设置属性的值 表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是**布尔型**  获取select下拉列表的值 ```js var selects = document.getElementById('options'); var index = selects.options[selects.selectedIndex].value; selectedIndex 获取已被选中的的value值 options 获取所有数组，通过得到的value，用下标获取值 ``` ### 样式属性操作 我们可以通过 JS 修改元素的大小、颜色、位置等样式 常用样式 element.style行内样式操作 element.className 类名样式操作 （1）通过操作style属性 元素对象的style属性也是一个对象 元素对象.style.样式属性=值; **注意**： （1）JS里面的样式采取驼峰命名法 比如 fontSize、backgroundColor （2）修改style样式操作，产生的是行内样式，css权重比较高  (2）通过操作className属性 元素对象.className=值; 因为class是关键字，所有使用className 注意： （1）如果样式修改较多，可以采取操作类名方式更改元素样式 （2）class因为是个保留字，因此使用className来操作元素类名属性 （3）className会直接更改元素的类名，会覆盖原先的类名（要保留原先的类，可使用多类名选择器）  ## 排他操作 排他思想  如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 1. **所有元素全部清除样式**（干掉其他人） 2. **给当前元素设置样式** （留下我自己） 3. 注意顺序不能颠倒，首先干掉其他人，再设置自己  ## 自定义属性操作 获取属性值 * element.属性 获取属性值 * element.getAttribute('属性'); 区别 * element.属性 获取内置属性值（元素本身自带的属性） * element.getAttribute('属性'); 主要获得自定义的属性（标准）  设置属性值 * element.属性='值' 设置内置属性值 * element.setAttribute('属性','值'); 区别 element.属性 设置内置属性值 element.setAttribute('属性'); 主要设置**自定义的属性**（标准）  移除属性 `element.removeAttribute('属性');`  ### H5自定义属性 **自定义属性的目的** 为了保存并使用数据；有些数据可以保存到页面中而不用保存到数据库中 通过`getAttribute('属性')`获取 **新增：设置H5自定义属性** H5规定自定义属性\*\*data-\*\*开头做为属性名并且赋值 ```html 比如 或者使用JS设置 element.setAttribute('data-index',2) ``` **获取H5自定义属性** 兼容性获取 `element.getAttribute('data-index')`; H5新增`element.dataset.index` 或者 `element.dataset['index']` ie11才开始支持 可以通过 `HTMLElement.dataset.testValue` ( 或者是 `HTMLElement.dataset["testValue"]` ) 来访问 ## 节点操作 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示 HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性 * **元素**节点 nodeType 为 1 * **属性**节点 nodeType 为 2 * **文本**节点 nodeType 为 3（文本节点包含文字、空格、换行等） 实际开发中，节点操作主要操作的是元素节点 ### 节点层级 利用 DOM 树可以把节点划分为不同的层级关系，常见的是**父子兄层级关系**  ### 父级节点 `node.parentNode` parentNode 属性可返回某节点的父节点，注意是**最近的一个父节点** 如果指定的节点没有父节点则返回null ### 子节点 所有子节点 （1）`parentNode.childNodes`（标准） parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合 **注意** 返回值**包含了所有的子节点**，包括元素节点，文本节点等 如果只想要获得里面的元素节点，则需要专门处理。所以不提倡使用childNodes 子元素节点 （2）`parentNode.children`（非标准） parentNode.children 是一个只读属性，返回所有的子元素节点；它**只返回子元素节点**，其余节点不返回 各个浏览器支持使用 第1个子节点 （3）`parentNode.firstChild` firstChild返回第一个子节点，找不到则返回null。同样，也是**包含所有的节点** 最后1个子节点 （4）`parentNode.lastChild` lastChild返回最后一个子节点，找不到则返回null。同样，也是**包含所有的节点** 第1个子元素节点 （5）`parentNode.firstElementChild` firstElementChild返回第一个子元素节点，找不到则返回null 最后1个子元素节点 （6）`parentNode.lastElementChild` lastElementChild返回最后一个子元素节点，找不到则返回null **注意** firstElementChild和lastElementChild两种方法有兼容性问题，IE9以上支持 **解决方案** （1）如果想要**第一个子元素节点**，可使用`parentNode.children[0]` （2）如果想要**最后一个子元素节点**，可使用`parentNode.children[parentNode.children.length - 1]` ### 兄弟节点 下一个兄弟节点 （1）`node.nextSibling` nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是**包含所有的节点** 上一个兄弟节点 （2）`node.previousSibling` previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是**包含所有的节点** 下一个兄弟元素节点（兼容性） （3）`node.nextElementSibling` nextElementSibling 返回当前元素下一个兄弟元素节点，找不到返回null 上一个兄弟元素节点（兼容性） （4）`node.previousElementSibling` previousElementSibling 返回当前元素上一个兄弟元素节点，找不到返回null **注意** nextElementSibling和previousElementSibling存在**兼容性**问题，IE9以上才支持 **解决方法：** 封装一个兼容性函数 ### 创建节点 `document.createElement('tagName')` document.createElement()方法创建有tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，称为**动态创建元素节点** ### 添加节点 （1）`node.appendChild（child）` node.appendChild()方法将一个节点添加到指定父节点的子节点列表**末尾** （2）`node.insertBefore(child,指定元素)` node.insertBefore()方法将一个节点添加到父节点的指定子节点**前面** **select添加节点，通过Otions构造函数** ```js ``` ### 删除节点 `node.remove()`**删除所有子节点** **node.removeChild(child)** 方法从 node节点中删除一个**子节点**，返回删除的节点 ### 复制（克隆）节点 `node.cloneNode()` 方法返回调用该方法的一个副本。称为克隆节点/拷贝节点 **注意** 1.如果括号参数为**空**或者为**false**，则是**浅拷贝**，即只克隆复制节点本身，不克隆里面的子节点 2.如何括号参数为**true**，则是**深拷贝**，会复制节点本身以及里面所有的子节点 ### 创建元素的三种方式 ```js document.write() element.innerHTML document.createElement() ``` **区别** 1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 2. innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘 3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 4. createElement() 创建多个元素效率稍低一点，但是结构更清晰 **总结** **不同浏览器下，innerHTML 效率要比 createElement高** #### innerTHML和createElement效率对比 innerHTML字符串拼接方式（效率低） ```js function fn() { var d1 = +new Date(); var str = ''; for (var i = 0; i < 1000; i++) { document.body.innerHTML += ''; } var d2 = +new Date(); console.log(d2 - d1); //2263 } fn(); ``` createElement方式（效率一般） ```js function fn() { var d1 = +new Date(); for (var i = 0; i < 1000; i++) { var div = document.createElement('div'); div.style.width = '100px'; div.style.height = '2px'; div.style.border = '1px solid red'; document.body.appendChild(div); } var d2 = +new Date(); console.log(d2 - d1);//23 } fn(); ``` innerHTML数组方式（效率高） ```js function fn() { var d1 = +new Date(); var array = []; for (var i = 0; i < 1000; i++) { array.push(''); } document.body.innerHTML = array.join(''); var d2 = +new Date(); console.log(d2 - d1); //7 } fn(); ``` #### 浅拷贝 深拷贝 浅拷贝只是拷贝一层 深拷贝拷贝多层 **浅拷贝** `Object.assign(新对象,要拷贝的对象)` ES6新增 利用**递归函数**进行深拷贝 ```js var data = [{ name: '胡梓卓', age: 18, bir: [{ date: '1999 - 10 - 19', address: '湖北省天门市皂市镇白龙寺西路20号' }] }, { name: '涂鏊飞', age: 21, bir: [{ date: '2000 - 1 - 11', address: '湖北省天门市皂市镇舒滩村二组1号' }], }]; var arr = {}; Object.assign(arr, data); console.log('浅拷贝'); data[0].age = 999; console.log(arr) console.log('-----分割线-----'); function deepCopy(newDate, oldData) { for (var k in oldData) { var item = oldData[k]; if (item instanceof Array) { newDate[k] = []; deepCopy(newDate[k], item); } else if (item instanceof Object) { newDate[k] = {}; deepCopy(newDate[k], item); } else { newDate[k] = item; } } } function getId(json, name) { var newArray = {}; json.forEach(function(item) { if (item.name == name) { newArray = item; } else if (item.bir && item.bir.length > 0) { newArray = getId(item.bir, name) } }); return newArray; } // console.log(getId(data, '涂鏊飞')); deepCopy(arr, data); // data.bir.date = '1999-10-19'; console.log('深拷贝'); data[0].age = 888; console.log(arr); ``` #### insertAdjacent(HTML/Text/Element) **语法** https://developer.mozilla.org/zh-CN/Web/API/Element/insertAdjacentHTML#语法 ```js element.insertAdjacentHTML(position, text); ``` **insertAdjacentHTML()** 方法将指定的文本解析为 [Element](https://developer.mozilla.org/zh-CN/Web/API/Element) 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。 ```js element.insertAdjacentText(position,element) ``` `insertAdjacentText()` 方法将一个给定的文本节点插入在相对于被调用的元素给定的位置 返回值：Void ```js element.insertAdjacentElement(position,element) ``` `insertAdjacentElement()` 方法将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置 返回值：插入的元素，插入失败则返回null *** **position** 一个 [DOMString](https://developer.mozilla.org/zh-CN/Web/API/DOMString)，表示插入内容相对于元素的位置，并且必须是以下字符串之一： * 'beforebegin'：元素自身的前面。 * '**afterbegin**'：插入元素内部的第一个子节点之前。 * '**beforeend**'：插入元素内部的最后一个子节点之后。 * 'afterend'：元素自身的后面。 **text** 是要被解析为HTML或XML元素，并插入到DOM树中的 [DOMString](https://developer.mozilla.org/zh-CN/Web/API/DOMString)。 **Element** 要插入到树中的元素 *** [位置名称的可视化](https://developer.mozilla.org/zh-CN/Web/API/Element/insertAdjacentHTML#位置名称的可视化) ```jsfoo
注意： beforebegin和afterend位置，仅在节点在树中且节点具有一个parent元素时工作 ``` ## 事件操作 ### 注册事件（两种方式） 给元素添加事件，称为注册事件或绑定事件 注册事件有两种方式：传统方式和监听注册方式 **传统注册方式** * 利用 on 开头的事件 onclick * `` * btn.onclick=function(){} * 特点：注册事件的**唯一性** * 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 **监听注册方式** * w3c标准 推荐方式 * addEventListener() 它是一个方法 * IE9之前的IE不支持此方法，可使用\*\*attachEvent()\*\*代替 * 特点：同一个元素同一个事件可以注册多个监听器 * 按注册顺序依次执行 ### 事件监听 **addEventListener()事件监听（IE9以后支持）** ```js eventTarget.addEventListener(type,listener[,useCapture]) ``` eventTarget.addEventListener() 方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数 该方法接收**三个参数**： type：事件类型字符串，比如click、mouseover，注意这里不要带on listener：时间处理函数，事件发生时，会调用该监听函数 useCapture：可选参数，是一个布尔值，默认是false **attachEvent()事件监听（IE678支持）** ```js eventTarget.attachEvent(eventNameWithOn,callback) ``` eventTarget.attachEvent() 方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行 该方法接收**两个参数**： eventNameWithOn：事件类型字符串。比如onclick、onmouseover。这里要带on callback：事件处理函数，当目标触发事件时回调函数被调用 **注意：IE8及早期版本支持** ```js ``` **事件监听兼容性解决方案** 封装一个函数，函数中判断浏览器的类型； ```js function addEventListener(element,eventName,fn){ //判断当前浏览器是否支持addEventListener 方法 if(element.addEventListener){ element.addEventListener(eventName,fn); //第三个参数 默认是false } else if(element.attachEvent){ element.attachEvent('on'+eventName,fn); } else{ //相当于element.onclick=fn; element['on'+eventName]=fn; } } ``` ### 删除事件（解绑事件） （1）传统注册方式 eventTatget.onclick=null; （2）方法监听注册方式 * eventTarget.**removeEventListener**(type,listener\[,useCapture]); * eventTarget.**detachEvent**(eventNameWith**On**,callback);  **删除事件兼容性解决方案** ```js function removeEventListener(element,eventName,fn){ //判断当前浏览器是否支持removeEventListener方法 if(element.removeEventListener){ element.removeEventListener(eventName,fn); //第三个参数 默认是false } else if(element.detachEvent){ element.detachEvent('on'+eventName,fn); } else{ element['on'+eventName]=null; } } ``` ### DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子 当你**单击一个\*\*\*\*div**时，同时你**也单击了****div****的父元素**，甚至整个页面。 那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？ **事件流** 描述的是从页面中接收事件的顺序 **事件**发生时会在元素节点之间按照**特定的顺序传播**，这个传播过程 即**DOM\*\*\*\*事件流** 比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document  * 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程 * 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程 > 当时的2大浏览器霸主谁也不服谁！ > > IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流 > > Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流 > > 江湖纷争，武林盟主也脑壳疼！！！ > > 最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —--— 先捕获再冒泡。 > > 现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段**DOM****事件流经历****3\*\*\*\*个阶段** > > 1. **捕获阶段** > 2. **当前目标阶段** > 3. **冒泡阶段** **DOM事件流经历3个阶段** 1. **捕获阶段** 2. **当前目标阶段** 3. **冒泡阶段**  注意 （1）JS代码中只能执行捕获或者冒泡**其中的一个阶段** （2）**onclick** **和** **attachEvent** **只能得到冒泡阶段** （3）addEventListener(type,listener\[,useCapture])第三个参数如果是**true**，表示在事件捕获阶段调用事件处理程序；如果是false（默认是false），表示在事件冒泡阶段调用事件处理程序 （4）实际开发中我们很少使用事件捕获，**更关注事件冒泡** （5）**有些事件没有冒泡，比如onblur、onfocus、onmouseenter、onmouseleave** （6）事件冒泡有时候会带来麻烦，有时候又会帮助到我们 **事件冒泡** ```js