Web APIs 学习归纳1---Web API概述&简单的元素获取

       JS基础中我们学习了JS的基本语句，这些是后续学习中的基础。

        有了上述JS的基础以后，我们就可以开始学习交互效果的实现方法。这里很多时候直接调用JS封装好的API即可。

一、Web APIs 和 JS 基础关联性

        这里有一张图很好的解释了这个问题：

         我们前期学习的是JS的基础语法，现在学习的是基于JS语法的API的使用。

二、API 和 Web API

2.1 API

        API这个词大家可能在学习的过程中也听过，但是可能不是很清除，这里对API加以解释。

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

2.2 Web API

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

        可以参考      https://developer.mozilla.org/zh-CN/docs/Web/API

三、DOM

3.1 什么是DOM

        文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

3.2 DOM

       我们自上而下分析这个图：

        文档：一个页面就是一个文档（整个 .html 文件），DOM 中使用 document 表示

        元素：页面中的所有标签都是元素，DOM 中使用 element 表示。后续我们需要学会获取。

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

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

3.3 获取元素---根据 ID 获取（返回一个对象）

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

document.getElementById('id');

        举例，选取有id的标签对象：

    2024-4-23
    
        var Timer = document.getElementById('time');
        console.log(Timer); //选出id的标签
    

3.4 获取元素---根据标签名获取（返回带有指定标签名的对象的集合）

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

document.getElementsByTagName('标签名');

        这里同样使用一个例子，抓取所有 

        //这里得到的是文档下所有的 

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

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

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