Day1：DOM——文档对象模型（1）

DOM 的概念

• 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

DOM 树

• DOM 又称为文档树模型
• - 文档：一个网页可以称为文档
• - 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
• - 元素：网页中的标签
• - 属性：标签的属性

DOM 经常进行的操作

• 获取元素
• 对元素进行操作(设置其属性或调用其方法)
• 动态创建元素
• 事件(什么时机做相应的操作）

DOM 获取页面元素

获取页面元素

• 为什么要获取页面元素？
• 例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作。

根据 id 获取元素

• 方法：调用 document 对象的 getElementById 方法。
• 参数：字符串类型的 id 的属性值。
• 返回值：对应 id 名的元素对象。
• 注意1：由于 id 名具有唯一性，部分浏览器支持直接使用 id 名访问元素，但不是标准方式，不推荐使用。
• 注意2：代码执行顺序，如果 js 在 html 结构之前，会导致结构未加载，不能获取对应id的元素。
• 注意3：id名具有唯一性，同时书写两个相同的id名，只会执行第一个。

根据标签名获取元素

• 方法：调用 document 对象的 getElementsByTagName 方法。
• 参数：字符串类型的标签名。
• 返回值：同名的元素对象组成的数组。
• 注意1：操作数据时需要按照操作数组的方法进行。
• 注意2：getElementsByTagName 方法内部获取的元素是动态增加的。

元素对象内部获取标签元素

• 获取的元素对象内部，本身也可以调用根据标签获取元素方法，例如 div 元素对象也可以调用 getElementsByTagName 方法。
• 目的：缩小选择元素的范围，类似 css 中的后代选择器

根据 name 获取元素

• 方法：调用 document 对象的 getElementsByName 方法。
• 参数：字符串类型的 name 属性值。
• 返回值：name 属性值相同的元素对象组成的数组。
• 不建议使用：在 IE 和 Opera 中有兼容问题，会多选中 id 属性值相同的元素。

Nodelist ：节点（标签、属性、文本、注释等） 列表集合，类数组
方法选中的元素也是动态变化的

根据类名获取元素

• 方法：调用 document 对象的 getElementsByClassName 方法。
• 参数：字符串类型的 class 属性值。
• 返回值：class 属性值相同的元素对象组成的数组。
• 浏览器兼容问题：不支持 IE8 及以下的浏览器

方法选中的元素也是动态变化的

根据选择器获取元素

• 方法1：调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个符合条件的标签元素。
• 方法2：调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选取所有符合条件的标签元素。
• 参数：字符串类型的 css 中的选择器。
• 浏览器兼容问题：不支持 IE8 以下的浏览

必须在结构加载完成后书写，不能写在前面。

总结

掌握，没有兼容问题
• getElementById()
• getElementsByTagName()
了解
• getElementsByName()
• getElementsByClassName()
• querySelector()
• querySelectorAll(）

DOM 事件基本应用

事件

• 事件：在什么时候做什么事
• 执行机制：触发–响应机制
• 绑定事件(注册事件)三要素：
1、事件源：给谁绑定事件
2、事件类型：绑定什么类型的事件 click 单击
3、事件函数：事件发生后执行什么内容，写在函数内部

事件监听

• JavaScript 解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只要触发对应的绑定事件，会立刻执行事件函数。

常用事件监听方法

• 方法1：绑定 HTML 元素属性。
• 方法2：绑定 DOM 对象属性

常用的鼠标事件类型

• onclick 鼠标左键单击触发
• ondbclick 鼠标左键双击触发
• onmousedown 鼠标按键按下触发
• onmouseup 鼠标按键放开时触发
• onmousemove 鼠标在元素上移动触发
• onmouseover 鼠标移动到元素上触发
• onmouseout 鼠标移出元素边界触发

案例：
• 点击按钮弹出提示框

DOM 元素属性操作

非表单元素的属性

• 例如：href、title、id、src 等。
• 调用方式：元素对象打点调用属性名，例如 obj.href。
• 注意：部分的属性名跟关键字和保留字冲突，会更换写法。

• class → className
• for → htmlFor
• rowspan → rowSpan

• 属性赋值：给元素属性赋值,等号右侧的赋值都是字符串格式。

案例

•点击按钮切换图片

• 点击按钮显示隐藏 div

• 美女相册