第5章 文档对象模型 (DOM)
第5章 文档对象模型 (DOM)
1.1 基本概念
DOM是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。 它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(增删改查)。
浏览器会根据DOM模型，将结构化文档(比如HTML和XML)解析成一系列的节点， 再由这些节点组成一个树状结构(DOM Tree)。 所有的节点和最终的树状结构，都有规范的对外接口。
JavaScript是一门编程语言，而DOM是浏览器对HTML文档结构化后的一个模型;
严格地说，DOM不属于JavaScript，但是我们最常用的就是使用JavaScript操作DOM;
1.2 节点的概念
DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树)，就是由各种不同类型的节点组成。
每个节点都可以看作是文档树的一片叶子。
最顶层的节点就是document节点，它代表了整个文档；是文档的根节点。
每张网页都有自己的document节点，window.document属性就指向这个节点的。
只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。
每一个HTML标签元素，在DOM树上都会转化成一个Element节点对象;
文档里面最高一层一般是HTML标签，其他HTML标签节点都是它的下级。
除了根节点以外，其他节点对于周围的节点都存在三种关系:
父节点关系(parentNode):直接的那个上级节点
子节点关系(childNodes):直接的下级节点
同级节点关系(sibling):拥有同一个父节点的节点
常用dom操作：
查找页面的标签元素
标签增加、修改、删除等操作
标签的属性相关操作
给标签元素绑定事件（设置当什么什么时候，做什么什么事情）
1.3 查找节点
上一节我们知道，整个文档的节点就是document节点，那么想要具体找到某个节点， 我们可以使用document提供的一系列方法：
1111111111
22222222221111111111
22222222221111111111
22222222223333333333
getElementsByTagName() 返回所有指定HTML标签的元素，返回值是一个类似数组的HTMLCollection对象；匹配失败，返回[] 参数是想要获取节点的具体节点名称，就是 标签名；
var p = document.getElementsByTagName('p');
//标签节点.style.样式名 = '样式值' 可以给标签节点设置css样式
p[3].style.background = 'red';
getElementsByClassName() 返回所有class名字符合指定条件的元素,返回值是一个类似数组的HTMLCollection对象；匹配失败，返回[] 参数为 标签的class属性的值
var p = document.getElementsByClassName('p');
p[1].style.background = 'yellow';
getElementsByName() 选择拥有name属性的HTML元素，返回值是一个类似数组的HTMLCollection对象；匹配失败，返回[] 参数为 标签的name属性的值; 注意，使用时，最好选择原生具有name属性的元素；
var p = document.getElementsByName('p');
p[0].style.background = 'yellow';
getElementById() 返回匹配指定id属性的元素节点;没有发现匹配的节点，则返回null 参数为 标签的id属性的值,参数大小写敏感;
var p = document.getElementById('p');
p.style.background = 'yellow';
querySelector()、querySelectorAll() document.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点； 如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null；
document.querySelectorAll方法与querySelector用法类似， 区别是返回一个类似数组的HTMLCollection对象，包含所有匹配给定选择器的节点。
var p = document.querySelector('.p');
p.style.background = 'yellow';
var p = document.querySelectorAll('.p');
p[1].style.background = 'yellow';
多个参数值，使用,（英文逗号）隔开，而querySelector()返回第一个选中的节点；
var p = document.querySelectorAll('i,.p');
for(var i=0;i这两个方法都支持复杂的CSS选择器。
//选中 id 属性值为p1的元素
// var p = document.querySelectorAll('[id="p1"]');
//选中div元素的class属相值为p的元素
// var p = document.querySelectorAll('div.p');
//选中所有的p标签，但是class值为p的除外
var p = document.querySelectorAll('p:not(.p)');for(var i=0;i但是，它们不支持CSS伪元素的选择器（比如:first-line和:first-letter） 和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。
事件
2.1 什么是事件
一种 触发—响应 的机制；
用户的行为 + 浏览器感知（捕获）到用户的行为 + 事件处理程序
事件三要素：
- 事件源:(被)触发事件的元素
- 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
- 事件处理程序:事件触发后要执行的代码(函数形式)
2.2 事件绑定
- 行内方式绑定(元素属性)
onclick 其实就是html元素的一个属性，而属性的值需要是 一段可执行的JS代码
- 动态绑定 (节点对象属性)
获取节点对象，然后 修改 节点对象 的 属性 onclick 的值，值是一个 匿名函数 即可；
以上两种事件绑定方式，需要在事件名称前加 on ;
- 事件监听(节点对象方法)
每一个节点对象都提供了 addEventListener 方法，这个方法可以给选中的节点添加指定类型的事件及事件处理程序；
- 移除事件监听
注意: removeEventListener方法移除的监听函数， 必须与对应的addEventListener方法的参数完全一致， 而且必须在同一个元素节点，否则无效。
2.3 三种事件绑定比较
this关键字 在JavaScript中，每一个函数的内部都存在一个this关键字，其随着运行环境的不同，其指向也是不同的。
ttttt
将上述代码的动态绑定，改为行内绑定：
ttttt
由此可知： 行内绑定，其事件处理程序内部的this指向了全局的window对象。 动态绑定，其事件处理程序内部的this指向了当前正在操作的dom对象。
需求：同一个元素的同一个事件，绑定多个处理函数：
ttttt
ttttt
ttttt
总结： 第一种 "HTML标签的on-属性"，违反了HTML与JavaScript代码相分离的原则；处理函数中 this 指向的window对象； 第二种 "Element节点的事件属性" 的缺点是，同一元素同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次。但是处理函数中的 this 指向的选中的对象； 第三种：addEventListener方法可以针对同一个元素的同一个事件，添加多个监听处理函数。处理函数中的 this 指向的也是选中的元素；
2.4 事件类型
事件类型一览表：
https://developer.mozilla.org/zh-CN/docs/Web/Events
2.3.1 页面事件(资源事件)
| 事件名称 | 何时触发 |
|---|---|
| load | 一个资源及其相关资源已完成加载。 |
2.3.2 焦点事件
| 事件名称 | 何时触发 |
|---|---|
| focus | 元素获得焦点 |
| blur | 元素失去焦点 |
2.3.3 鼠标事件
| 事件名称 | 何时触发 |
|---|---|
| mouseenter | 指针移到有事件监听的元素内 |
| mouseover | 指针移到有事件监听的元素或者它的子元素内 |
| mousemove | 指针在元素内移动时持续触发 |
| mousedown | 在元素上按下任意鼠标按钮 |
| mouseup | 在元素上释放任意鼠标按键 |
| click | 在元素上按下并释放任意鼠标按键 |
| dblclick | 在元素上双击鼠标按钮 |
| contextmenu | 右键点击 (右键菜单显示前). |
| mouseleave | 指针移出元素范围外（不冒泡） |
| mouseout | 指针移出元素，或者移到它的子元素上 |
| select | 文本被选中（input标签、textarea标签） |
| copy | 元素内容被拷贝时 |
来啊
2.3.4 键盘事件
| 事件名称 | 何时触发 |
|---|---|
| keydown | 按下任意按键 |
| keypress | 除 Shift, Fn, CapsLock 外任意键被按住. (连续触发) |
| keyup | 释放任意按键 |
2.3.5 form表单事件
| Event Name | Fired When |
|---|---|
| reset | 点击重置按钮时 （ |
| submit | 点击提交按钮 |
2.3.6 内容变化事件
change： 当内容改变且失去焦点时触发 （存储事件） input ： 当内容改变时触发 （值变化事件）
2.4 事件的传播
三个包裹着的DIV，都绑定了点击事件，问： 当点击 div1 时，会发生什么现象？
当点击div1时，触发 事件1，但是，紧跟着，事件2和事件3也被触发了；
这种现象，我们称为 事件冒泡
在JS中当一个事件发生以后，它会在不同的DOM节点之间传播。 这种传播分成三个阶段： 第一阶段：从window对象传导到目标节点，称为 捕获阶段。 第二阶段：在目标节点上触发，称为 目标阶段。 第三阶段：从目标节点传导回window对象，称为 冒泡阶段。
事件传播的最上层对象是window； 事件的传播顺序，在捕获阶段依次为window、document、html、body、div； 在冒泡阶段依次为div、body、html、document、window。
注意： 三种事件绑定方式全部 默认 监听冒泡阶段事件；
2.5 改变事件触发的阶段
想让事件监听在捕获阶段，只能通过 addEventListener 方法的进行设置：
2.6 案例
为选中的的元素绑定事件
一次性事件案例(下载按钮点一次则失效)
点击每个图片弹出对话框
节点操作
页面元素节点的操作，都离不开DOM对象
3.1 节点操作-增删改
document.createElement() 用来生成网页元素节点，参数为元素的标签名；
document.createTextNode() 用来生成文本节点，参数为所要生成的文本节点的内容；
node.appendChild() 接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点；
node.hasChildNodes() 返回一个布尔值，表示当前节点是否有子节点
node.removeChild() 接受一个子节点作为参数，用于从当前节点移除该子节点
node.cloneNode() 用于克隆一个选中的节点。 它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。 注意: 不会克隆绑定到该元素上的事件；
node.innerHTML 返回该元素包含的 HTML 代码。该属性可读写，常用来设置某个节点的内容；（不属于W3C DOM规范）
node.innerText
返回该元素包含的内容。该属性可读写
111
案例：
点击按钮创建img节点，添加到body中
动态创建文本框
3.2 节点属性
3.2.1 原生属性
HTML元素节点的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性
3.2.2 属性操作的标准方法
node.getAttribute() 返回当前元素节点的指定属性。如果指定属性不存在，则返回null；
node.setAttribute() 为当前元素节点新增属性。如果同名属性已存在
node.hasAttribute() 返回一个布尔值，表示当前元素节点是否包含指定属性
node.removeAttribute() 从当前元素节点移除属性
//如果有id属性
if(d.hasAttribute('id')){//删除id属性d.removeAttribute('id');
}
3.3 节点操作-层级关系
node.nextElementSibling 返回紧跟在当前节点后面的第一个同级Element节点，如果当前节点后面没有同级节点，则返回null；
node.previousElementSibling 返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null；
node.parentElement 返回当前节点的父级Element节点；
node.childNodes 返回一个NodeList集合，成员包括当前节点的所有子节点(注意空格回车也算)。
node.firstChild
返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。
node.lastChild
返回该节点的最后一个子节点，如果该节点没有子节点则返回null。
11111
222
33333
4444
55555
66666
3.4 CSS样式操作
每个DOM对象都有style属性，我们可以直接操作，用来读写 行内CSS样式。 之前，我们已经简单的使用过JS控制元素的CSS样式； 在具体使用的时候还有一些需要重点注意的细节：
-
名字需要改写，将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写：
比如background-color写成backgroundColor
-
属性值都是字符串，设置时必须包括单位：
比如，div.style.width的值不能写为100，而要写为100px
以上代码中，我们获取的CSS样式，均是行内样式；
如果将 样式表写在 style 标签内，我们将无法获取和修改；
getComputedStyle() 接受一个节点对象，返回该节点对象最终样式信息的对象，所谓“最终样式信息”，指的是各种CSS规则叠加后的结果。
注意: getComputedStyle() 是window对象下的方法，不是DOM对象
点击变大小案例:
Document
其他方法和属性：
document.documentURI 返回文档的 URL。
node.replaceChild(newChild, oldChild) 用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
node.insertBefore() : parentElement.insertBefore(newElement,referenceElement)；
3.5 案例（节点属性）
网页开关灯效果实现（类名操作）
点击按钮显示一个图片
![美女]()
案例点击按钮修改p标签内容
这是一个p
点击按钮设置a标签的地址和热点文字
百度
点击按钮设置所有的p的内容
红烧榴莲
清蒸臭豆腐
油炸大蒜
爆炒助教
凉拌班主任
点击按钮修改图片的alt和title
点击按钮修改按钮的值
点击图片修改自身的宽和高
点击按钮修改所有的文本框的值
排他功能
点击按钮禁用文本框
鹦鹉学舌
全选和全不选
菜名 饭店 红烧肉 田老师 西红柿鸡蛋 田老师 油炸榴莲 田老师 清蒸助教 田老师
作业，实现反选
表格鼠标悬浮高亮(接上一个案例)
var t = document.getElementsByTagName('tbody')[0];
t.onmouseover = function(e){e.target.parentElement.style.background = '#F5F5F5';
}
t.onmouseout = function(e){e.target.parentElement.style.background = '#fff';
}
3.6 案例（样式操作）
节点方式隔行变色
- 雪花啤酒
- 金士百啤酒
- 青岛啤酒
- 燕京啤酒
- 百威啤酒
- 哈尔滨啤酒
- 乐宝啤酒
- 崂山啤酒
验证密码的长度改变背景颜色
div的高亮显示
鼠标点哪图片飞到哪里
思路：给整个dom绑定鼠标点击事件，获取点击位置后修改图片位置
跟着鼠标飞的天使
思路：点击图片后，给整个dom绑定鼠标移动事件，让图片跟随
实时获取鼠标在div内的坐标
3
点击按钮设置div的宽和高及背景颜色
title
点击按钮隐藏div
点击按钮改变列表的背景颜色
- 乔峰
- 卡卡西
- 佐助
- 自来也
- 纲手
- 雏田
- 露琪亚
点击按钮列表隔行变色
- 五菱宏光
- 路虎
- 兰博基尼
- 布加迪威龙
- 玛莎拉蒂
- 奥拓
- 拖拉机
- 桑塔纳
3.7 案例（节点操作）
动态可编辑表格
菜名 饭店 厨师
无刷新评论
name:
我是评论内容
昵称:
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！