JavaScript中DOM简介、获取元素及事件基础

Web API简介

与JavaScript的关系

API

API（Application Programming Interface应用编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。

Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和 DOM）。
针对于浏览器提供的接口，主要针对于浏览器做交互效果。在JavaScript中被封装成了对象，通过调用对象的属性和方法就可以使用Web API，例如document对象、console对象等。
Web API很多都是方法（函数）。

DOM简介

什么是DOM

文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。
W3C定义了一系列的DOM接口，通过DOM可以完成对HTML文档中所有元素的获取、访问、标签属性和样式的设置等操作。

DOM树

DOM中将HTML文档视为树结构，被称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

• 文档（document）：可以把一个页面当成一个文档
• 元素（element）：页面中的所有标签都是元素
• 节点（node）：网页中的所有内容，在文档树中都是节点（如元素节点、属性节点、文本节点、注释节点等），在DOM中会把所有节点看作是对象，这些对象拥有自己的属性和方法

DOM的最顶端是----document，BOM的最顶端是----window

获取元素

DOM在我们实际开发中主要用来操作元素。

根据id获取元素

该方法是由document对象提供的用于查找元素的方法。

document.getElementById('id号')

• 该方法返回的是拥有指定id的元素
• 如果没有找到指定的id的元素返回null
• 如果存在多个指定id的元素返回undefined

根据标签名获取

document.getElementsByTagName('标签名')

• 返回的是带有指定标签名的对象的集合，这个集合是一个伪数组，可以通过索引访问，但不能使用push( )等方法
• 得到的元素对象是动态的
• 若获取不到元素，返回空的伪数组

根据name获取元素

一般用于获取表单元素，name属性的值不要求唯一。

document.getElementsByName('name属性值')

HTML5新增的获取方式（根据选择器获取）

1. 根据类名获取元素

document.getElementsByClassName('class属性值')

2. 根据指定选择器返回第一个元素

document.querySelector('选择器')

• 选择器需要加符号

3. 根据指定选择器获取（返回的是元素集合）

document.querySelectorAll('选择器')

• 选择器需要加符号

document对象的属性（获取特殊元素）

document对象提供了一些属性，可以获取文档中的元素。
常用属性：

方法	作用
document.body	返回文档中的body元素
document.title	返回文档的title元素
document.documentElemnet	返回文档中的html元素
document.forms	返回对文档中所有form对象引用
document.images	返回文档中所有image对象引用

事件基础

事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
是一种 触发-响应 机制，是实现页面交互的方式。

事件三要素

1. 事件源：触发事件的元素（谁）
2. 事件类型：（触发了什么事件）
3. 事件处理程序：事件被触发后所执行的代码（函数形式），也称事件处理函数（做啥）

对象名.事件名 = functio(参数) { }

执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采用函数赋值形式）

常见的鼠标事件