JS学习笔记之DOM 4.22

1 API 和 Web API

 

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

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API

2 DOM 简介

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

文档：一个页面就是一个文档，DOM 中使用 document 表示

元素：页面中的所有标签都是元素，DOM 中使用 element 表示

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM 把以上内容都看做是对象

3 获取元素

获取页面中的元素可以使用以下几种方式:

1.根据 ID 获取：

使用 getElementById() 方法可以获取带有 ID 的元素对象。

 document.getElementById('id');

2.根据标签名获取：

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历

得到元素对象是动态的

如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

还可以获取某个元素(父元素)内部所有指定标签名的子元素.

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

3.通过 HTML5 新增的方法获取：

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
document.querySelector('选择器');        // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器');     // 根据指定选择器返回

注意：

querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');

4.特殊元素获取

获取body元素

doucumnet.body  // 返回body元素对象

获取html元素

document.documentElement  // 返回html元素对象

4 事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发--- 响应机制。

事件三要素：

1. 事件源 

2. 事件类型 

3. 事件处理程序 

案例：点击按钮弹出警示框

页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框。

①获取事件源（按钮）

②注册事件（绑定事件），使用 onclick

③编写事件处理程序，写一个函数弹出 alert 警示框

var btn = document.getElementById('btn');
btn.onclick = function() {
  alert('你好吗');  
};

执行事件的步骤:

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采取函数赋值形式)

常见的鼠标事件：

5 操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性