前端入门系列--webAPI(1)

最新推荐文章于 2024-08-05 15:44:16 发布

黄家琛

最新推荐文章于 2024-08-05 15:44:16 发布

阅读量233

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44427572/article/details/105122277

版权

前端专栏收录该内容

40 篇文章 1 订阅

订阅专栏

在学习web API之前先了解什么是API：
API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可；

然后引入web API的概念：
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )，详细可以看MDN;
即Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果；

1、DOM介绍

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

其中dom树的结构如下：
在这里插入图片描述

文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

在dom中把以上内容都看作对象；

2、元素获取

我们要对页面给以交互效果，则首先需要获取到相应的元素再对其进行操作；

2.1通过id获取元素

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象或 null

如下案例所示：

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法（相比log，dir针对对象）
        console.dir(timer);
    </script>
</body>

2.2根据标签名获取元素

语法：document.getElementsByTagName(‘标签名’) 或者 element.getElementsByTagName(‘标签名’)
element.相比起document更进一步
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

如下案例所示：

<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 这个获得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注意这种根据标签名获取元素的方法在有很多个该标签时得到的伪数组，如果想要其中的内容则需对其进行遍历等等…

2.3H5中新增的获取元素方法

1、根据类名进行选择：在这里插入图片描述
2、根据指定选择器返回第一个对象：

3、根据指定选择器返回所有对象：

注意：2、3两个在使用时必须写明选择器的类型，如：.(id名) #(类名) 或者直接标签名

此外，嵌套的取法也需注意，如：querySelector.(‘.类名’).querySelectorAll(‘标签名’)

2.4获取特殊元素

1、获取body元素：
在这里插入图片描述

2、获取html元素：
在这里插入图片描述

3、事件相关

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作；

3.1事件三要素

事件源（谁）：触发事件的元素；
事件类型（什么事件）：例如 click 点击事件；
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数；

点击事件案例如下所示：

<body>
    <button id="btn">这是按钮</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点下了按钮');
        }
    </script>
</body>

3.2执行事件的三步骤

在这里插入图片描述
如以下案例说明不止是按钮可以点击，任何一个元素都可绑定点击效果的：

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

3.3常见的鼠标事件

除了上面的点击事件外，外有以下的鼠标事件：
在这里插入图片描述

通过这些事件可以实现网页中一些常见的效果，如：鼠标移动到上面出现下拉列表、广告的关闭等等…

4、操作元素

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

4.1改变元素内容

1、从起始位置到终止位置的内容，但它去除html标签，同时换行和空格也会去掉：
在这里插入图片描述
2、从起始位置到终止位置的内容，包括html标签，但保留空格和换行

相关案例如下：

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>1123</p>
    <script>
        // 当我们点击了按钮，  div里面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件，注册按钮的点击事件，在其中调用getData函数值给div的innerText
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }
        //getData函数中用了前面讲过的内置对象来获取日期，将日期返回
        function getDate() {
            var date = new Date();
            // 我们写一个 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
    </script>
</body>

4.2常用元素的属性操作

除了上面所说的innerHTML、innerText外还有以下这些：
在这里插入图片描述
以语句：元素对象.属性名 = 值使用，页面内的元素也会随之改变；

4.3表单元素的属性操作

表单元素属性主要有如下这些：
在这里插入图片描述
如下案例，在按下按钮后更改了按钮的value属性以及disabled属性：

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

4.4样式属性操作

在这里插入图片描述
如下案例，当点击时更改了div中的颜色以及宽度：

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

此外，也可直接更改或div的类名达到修改样式的效果：

<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>