DOM 简介
1. DOM 概念
文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。
它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和 www 文档的风格(目前,HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。
DOM 是一 种基于树的 API 文档,它要求在处理过程中整个文档都表示在存储器中。
总结:W3C 已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构、样式。
2. DOM 树
DOM 又称为文档树模型
(1)文档:一个网页可以称为文档,DOM中使用 document 表示
(2)节点:网页中的所有内容都是节点 (标签、属性、文本、注释等),DOM中用 node 表示
(3)元素:网页中的标签,DOM中使用 element 表示
(4)属性:标签的属性
注:DOM 把文档、节点、元素都看作是对象
3. DOM 经常进行的操作
(1)获取元素
(2)对元素进行操作(设置其属性或调用其方法)
(3)动态创建元素
(4)事件(什么时机做相应的操作)
DOM 获取页面元素
1. 获取页面元素
我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作。
2. 根据 id 获取元素
(1)方法:调用 document 对象的 getElementById 方法。
(2)参数:字符串类型的 id 的属性值。
(3)返回值:对应 id 名的元素对象。
(4)注意1:由于 id 名具有唯一性,部分浏览器支持直接使用 id 名访问元素,但不是标准方式, 不推荐使用。
(5)注意2:代码执行顺序,如果 js 在 html 结构之前,会导致结构未加载,不能获取对应id的元素
3. 根据标签名获取元素
(1)方法:调用 document 对象的 getElementsByTagName 方法。(普通元素对象也可调用获取内部的元素)
(2)参数:字符串类型的标签名。
(3)返回值:同名的元素对象组成的集合(以伪数组的形式存储)。
(4)注意1:操作数据时需要按照操作数组的方法进行。
(5)注意2:getElementsByTagName 方法内部获取的元素是动态增加的
4. 元素对象内部获取标签元素
(1)获取的元素对象内部,本身也可以调用根据标签获取元素方法,例如 div 元素对象也可以调用 getElementsByTagName 方法。
(2)目的:缩小选择元素的范围,类似 css 中的后代选择器
(3)父元素必须是单个对象(必须指明是哪一个元素对象),获取时不包括父元素自己。
DOM 事件基本应用
JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为,网页中的每个元素都可以产生某些可以触发 JavaScript 的事件。
1. 事件
(1)事件:在什么时候做什么事
(2)执行机制:触发–响应机制 (例:轮播图、下拉菜单)
(3)绑定事件(注册事件)三要素:
事件源:给谁绑定事件
事件类型:绑定什么类型的事件 (例:click 单击 )
事件函数:事件发生后执行什么内容,写在函数内部(采用函数赋值形式)