JavaScript——DOM

例如：

刘德华

张学友

效果展示：

1·5·3 表单元素的属性操作

利用DOM可以操作如下表单元素的属性：type、value、checked、selected、disabled(禁用)。

例如：

按钮

效果展示：

1·5·4 样式属性操作

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

1. element.style：行内样式操作

2. element.className：类名样式操作

例如：

文本

注意：

1. JS里面的样式采取驼峰命名法，比如fontSize、backgroundColor。

2. JS修改style样式操作，产生的是行内样式，css权重比较高。

3. 如果样式修改较多，可以采取操作类命方式更改元素样式。

4. class因为是个保留字，因此使用className来操作元素类命属性。

5. className会直接更改元素的类命，会覆盖原先的类命。

1·5·5 自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’)获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

获取属性值：

1. element.属性；获取属性值

2. element.getAttribute（‘属性’）

区别：

1. element.属性；获取内置属性值（元素本身自带的属性）

2. element.getAttribute（‘属性’）；主要获得自定义的属性（标准）我们程序员自定义的属性

设置属性值：

1. element.属性=‘值’；设置内置属性值

2. element.setAttribute（‘属性’，‘值’）；

移除属性：

• element.removeAttribute(‘属性’)；

输出结果：

H5给我们新增了自定义属性：

1】设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。

比如

或者使用JS设置

element.setAttribute(‘data-index’,2);

2】获取H5自定义属性

1、兼容性获取 element.getAttribute(‘data-index’);

2、H5新增element.dataset.index或者element.dataset[‘index’];  ie11才开始支持。

H5新增的获取自定义属性的方法，它只能获取data-开头的，dataset是一个集合里面存放了所有以data开头的自定义属性，如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法。

1·5·6 操作元素总结

总结：

排他思想：如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1. 所有元素全部清除样式（干掉其他人）

2. 给当前元素设置样式（留下我自己）

3. 注意顺序不能颠倒，首先干掉其他人，再设置自己。

例如：

按钮1

按钮2

按钮3

按钮4

按钮5

效果展示：

1·6 节点操作

---

获取元素通常使用两种方式：

1】利用DOM提供的方法获取元素；

特点：逻辑性不强、繁琐；

2】利用节点层级关系获取元素；

特点：利用父子兄弟节点关系获取元素；逻辑性强，但兼容性不强；

1·6·1 节点概述

节点概述：网页中所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。HTML DOM数这的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。

一般地，节点至少拥有nodeType（节点类型）、nodeName(节点名称)和nodeValue（节点值）这三个基本属性。

1】元素节点 nodeType为1；

2】属性节点 nodeType为2；

3】文本节点 nodeType为3（文本节点包含文字、空格、换行等）；

1·6·2 节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

父级节点：node.parentNode;

1. parentNode属性可返回某节点的父节点，注意是最近的一个父节点；

2. 如果指定的节点没有父节点则返回null；

子节点：

1. parentNode.childNodes(标准);返回包含指定节点的子节点的集合。

2. parentNodes.children(非标准);返回所有的子元素节点。

3. parentNode.firstChild;返回第一个子节点，找不到返回null。同样，也是包含所有节点。

4. parentNode.lastChild;返回最后一个子节点，找不到返回null。同样，也是包含所有节点。

5. parentNode.firstElementChild;返回第一个子元素节点，找不到则返回null。

6. parentNode.lastElementChild;返回最后一个子元素节点，找不到则返回null。

注意：

1. parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为及时更新的集合。返回值里面包含了所有的子节点，包括元素节点、文本节点等。

2. parentNodes.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。

兄弟节点：

1. node.nextSibling;返回当前元素的下一个兄弟节点,找不到则返回null。同样，也是包含所有节点。

2. node.previousSibling;返回当前元素上一个兄弟节点，找不到则返回null。同样，也包含所有节点。

3. node.nextElementSibling;返回当前元素下一个兄弟节点，找不到则返回null。（IE9以上支持）

4. node.previousElementSibling;返回当前元素上一个兄弟节点，找不到则返回null。

例如：

父节点：

x

结果：

子节点：

• 我是li
• 我是li
• 我是li
• 我是li
• 我是li
• 我是li
• 我是li
• 我是li
• x

  结果展示：

  

  兄弟节点：

  我是div

  我是span

  结果展示：

  

  1·6·3 节点具体操作

  1. 创建节点：document.createElement(‘tagName’);

  2. 添加节点：node.appendChild(child);将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里面after伪元素。node.insertBefore(child,指定元素)；将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。

  3. 删除节点：node.removeChild(child);从DOM中删除一个子节点，返回删除的节点。

  4. 复制节点：node.cloneNode( );返回调用该方法的节点的一个副本。如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

  例如：
• 123

• 输出结果：

  

  删除
• 熊大
• 熊二
• 光头强

• 效果展示：

  
• 1111
• 2
• 3

• 输出结果：

  

  1·7 事件

  ---

  1·7·1 注册事件

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

  传统注册事件方式：

  • 利用on开头的事件onclick；

  • <button οnclick=“alert(‘hi~’)”>；

  • btn.οnclick=function(){}；

  • 特点：注册事件的唯一性；

  • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数；

  方法监听注册方式：

  • w3c标准 推荐方式；

  • addEventListenner()它是一个方法；

  • IE9之前的IE不支持此方法，可使用attachEvent（）代替；

  • 特点：同一个元素同一事件可以注册多个监听器；

  addEventListenner事件监听方式：

  语法：

  eventTarget.addEvenListener(type,listener[,useCapture])

  使用：

  eventTarget.addEventListennertListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。

  该方法接收三个参数：

  1】type：事件类型字符，比如click、mouseover，注意这里不要带on；

  2】listener：事件处理函数，事件发生时，会调用该监听函数；

  3】useCapture：可选参数，是一个布尔值，默认false。

  1·7·2 删除事件

  1】传统注册事件：

  eventTarget.οnclick=null;

  2】方法监听注册方式：

  1、eventTarget.removeEventListener(type,listener[,useCapture]);

  2、eventTarget.detachEvent(eventNameWithon,callback);

  1·7·3 DOM事件流

  事件流描述的是从页面中接收事件的顺序。

  事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

  DOM事件流分为3个阶段：

  1、捕获阶段

  2、当前目标阶段

  3、冒泡阶段

  事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。

  事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。

  注意：

  1. JS代码中只能执行捕获或者冒泡其中的一个阶段。

  2. onclick和attachEvent只能得到冒泡阶段。

  3. addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

  4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。

  5. 有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave。

  6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

  阻止事件冒泡：

  标准写法：利用事件对象里面的stopPropagation()方法。

  例如：

  son儿子

  1·7·4 事件对象

  官方解释：event对象代表事件对象的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

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

  事件对象的使用语法：

  div.onclick = function(event) {

  /这个event就是事件对象，可自己命名

  }

  123

  事件对象属性： 

  例如：

  鼠标事件对象：

  

  例如：

  输出结果：

  

  键盘事件对象：

  

  例如：

  注意：

  • onkeydown和onkeyup，不区分字母大小写，onkeypress区分字母大小写；

  • 在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）；

  • keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值。

  事件委托（代理、委派）：

  事件委托也称事件代理，在jQuery里面称为事件委派。

  事件委托的原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

  例如：
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！
• 知否知否，点我应有弹框在手！

• 效果展示：

  

  四、案例

  =====

  1·1 tab栏切换图片

  ---
• 所
• 见
• 即
• 所
• 得
• 
• 所
• 见
• 即
• 所
• 得
•