什么是 web API？ DOM和BOM

一、API和Web APIAPI（Application Programming Interface ，应用程序API）:是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或者硬件得以访问一组例程的能力，二又无需访问源码，或理解内部工作机制的细节。是给程序员提供的一种工具，以便能够更轻松的实现想要完成的功能。Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DO

欢乐多~

958人浏览 · 2022-05-08 10:12:24

欢乐多~ · 2022-05-08 10:12:24 发布

一、API和Web API

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

是给程序员提供的一种工具，以便能够更轻松的实现想要完成的功能。

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

主要针对浏览器提供的借口，主要针对浏览器做交互效果。

二、什么是DOM

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准程序接口。

在前端开发时，添加元素、删除元素的操作就是通过DOM来实现的。

在DOM学习中，每一个元素节点都看成一个“对象”。由于元素节点也是一个对象，因此他们有自身的属性和方法。

1.DOM树

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示

2.获取页面元素

2.1 如何获取页面元素

获取元素可以通过以下几种方法获取

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

getElementById()；

在JavaScript中，如果想通过id来选中元素，我们可以使用document对象的getElementById()方法。getElementById()方法类似于CSS中的id选择器。

getElementsByClassName() ；根据类名来获取元素

querySelector() 返回指定选择器的第一个元素对象切记里面的选择器需要加符号 .box #nav

querySelectorAll() 返回指定选择器的所有元素对象集合

<script>

//1.获取body 标签

var bodyElem = document.body;

console.log(bodyElem);

//2.获取HTML 标签

var htmlElem = document.documentElement;

console.log(htmlElem);

</script>

3.事件基础

事件三要素：

①事件源(时间被触发的对象谁)

②事件类型(如何触发什么事件(鼠标点击，键盘按下))

③事件处理程序(通过函数赋值的方式完成)

<body>
    <button id="btn">唐伯虎</button>
    <script>
        //点击按钮，弹出对话框
        //1.事件三要素：①事件源(时间被触发的对象 谁)
        //②事件类型(如何触发 什么事件(鼠标点击，键盘按下))  
        //③事件处理程序(通过函数赋值的方式完成)
        var btn = document.getElementById('btn');
        btn.onclick=function(){
            alert('点秋香！！！');
        }
    </script>
</body>

常见的鼠标点击事件：

4.操作元素

改变元素内容,innerHTML,innerText

<button>显示当前系统的时间</button>
    <div>某个时间</div>
    <p>某个时间</p>
    <script>
        //当我们点击了按钮，div里面的文字会发生变化
        //1.获取元素
        var click=document.querySelector('button');
        var div=document.querySelector('div');
        //2.注册事件
        click.onclick=function(){
            
            div.innerHTML=getData();
        }
        function getData(){
            var data=new Date();
            var year=data.getFullYear();
            var month=data.getMonth()+1;
            var dates=data.getDate();
            var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day=data.getDay();
          return '今天是：'+year+'年'+month+'月'+dates+'日'+'\t'+arr[day];
        }

        var p=document.querySelector('p');
        p.innerHTML=getData();
    </script>