Js基础1:基本概念

一、Web API 概述

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

Web API：浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)，此处的Web API特指浏览器提供的一组方法。如下是MDN中的列举的Web API：MDN文档

二、JavaScript组成

ECMAScript

ECMAScript 定义了JavaScript 的语法规范，是JavaScript的核心。它描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准，它与具体实现无关。

BOM

BOM（Browser Object Model）其实是一套操作浏览器功能的API，通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等 。

DOM

DOM（Document Object Model）其实是一套操作页面元素的API，JavaScript中的DOM把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

三、DOM的概念

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理 可扩展标记语言（html或xml文档） 的标准 编程接口。它是一种与平台和语言无关的 API，它可以动态操作HTML文档，如 对html标签作增删改查操作。DOM 是一种基于树的 API 文档，在处理html文档的过程中，DOM以对象的形式存储在内存中。

因为DOM是基于树结构存储在内存中的，所以DOM又称为文档树模型，DOM的树结构如下图

DOM中的几个常用概念

1、文档：一个网页可以称为文档

2、节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

3、元素：网页中的标签

4、属性：标签的属性

DOM经常进行的操作

1、获取元素

2、对元素进行操作(设置其属性或调用其方法)

3、动态创建元素

4、事件(什么时机做相应的操作)

四、获取元素几种的方式（掌握）

语法：

 document.getElementById('id')             //通过ID获取元素，唯一一个
 document.getElementsByTagName('标签名')    //通过标签名称获取元素，[]集合
 document.getElementsByClassName('类名')    //通过类名获取元素，[]集合。兼容性问题
 document.getElementsByName("name")        //通过name属性值获取元素(表单)
 
 // HTML5向Web API新引入了两个方法用来更方便地从DOM选取元素
 // 功能类似于jQuery的选择器。
 document.querySelector('selectors')    //获取一组元素中第一个满足条件的元素，高版本浏览器支持
 document.querySelectorAll('selectors') //获取所有满足条件的元素
 // 这个参数selectors需要是合法的CSS选择语法，可以包含多个CSS选择器，用逗号隔开