DOM操作与事件高级

Web API之DOM

Web-API

API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力而又无需访问源码，或了解内部工作机制的细节；
简单了解：API是给程序员提供的一种工具，以便能更轻松实现想要完成的功能；

• Web API是游览器提供的一套操作游览器功能和页面元素API（DOM 和 BOM）
• 主要是针对游览器提供的接口，应用于游览器做交互效果
• Web API 一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）
  好的，以上是关于API的初步了解，API（DOM和BOM）今天我们重点讲DOM

什么是DOM

• DOM全拼为Document Object Model（文档对象模型）
• 文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口
• W3C 已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式
• 我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型

DOM树

• 文档： 一个页面就是一个文档，DOM中使用document表示
• 元素： 页面中的所有标签都是元素，DOM 中使用element表示
• 节点： 网页中的所有内容（包括注释）都是节点，DOM中使用node表示
  DOM 把以上内容都看做对象

获取元素

我们要怎么样获取到页面中的元素？（获取页面元素有以下的几种方法）

01. 根据ID获取页面元素

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

02. 根据标签名获取页面元素

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

03. 通过HTML5新增的方法获取页面元素

• document.getElementsByClassName(‘类名’)； 根据类名返回元素的集合
• document.querySelector(‘选择器’); 根据指定选择器返回第一个元素对象(选择器需要加符号，代表是什么选择器)
• document.querySelectorAll(‘选择器’)； 返回指定选择器的所有元素对象集合

03. 特殊元素获取（body / html）

• 获取body元素document.body;
• 获取html元素document.documentElement;

操作元素

JavaScript 的 DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等
DOM操作元素有以下几种方式

01. 改变页面元素内容

• element.innertext
  从起始位置到终止位置的内容，但它去除html标签，同时空格和换行一会去掉（不识别HTML标签&#x