Web API (一)介绍

最新推荐文章于 2024-04-25 13:31:59 发布

爱对恨错

最新推荐文章于 2024-04-25 13:31:59 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_43182390/article/details/115213348

版权

Web API (一)介绍

一、Web API介绍

1.API介绍

（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，只需直接调用使用即可。

2、Web API的概念

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

MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API

3、API 和 Web API 总结

API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
学习 Web API 可以结合前面学习内置对象方法的思路学习

4、JS组成

ECMAscript 指定的标准语法
DOM(文档对象模型) 网页
BOM(浏览器对象模型) 浏览器

二、DOM数

1、定义

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

2、组成

DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

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

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

三、获取元素

1、根据元素的id名称

getElementById('id名称')不需要加#号

2、根据元素的标签名

getElementsByTagName('标签名')

3、根据元素的类名

getElementsByClassName('类名') //不需要加.

4、★根据 css 选择器字符串来获取符合条件的第一个元素

querySelector('css选择器')// # . ul>li ul li

返回的是单个元素

伪类选择器 :checked :disabled

querySelector(':checked')//checked,disabled,selected

5、根据 css 选择器字符串来获取符合条件的所有元素

querySelectorAll('css选择器') //# . ul>li ul li

返回的结果是元素对象集合，伪数组

注意: api名称中带有 elements, children, all 返回的都是伪数组

6、获取特殊元素（body，html）

documents.body//返回body元素对象
documents.documentElement//返回html元素对象

7、所有操作元素的方法都必须是单个元素对象

四、事件基础

1、事件概述

触发— 响应机制。

2、事件三要素

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

事件源.事件类型 = 事件处理函数

3、执行事件的步骤

获取事件源
绑定事件
添加事件处理程序（采取函数值形式）

注意: 事件不触发, 事件处理函数不执行

事件处理函数中的this：指向事件源，事件的绑定者

4、常见的鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QT3LYUr0-1616663112375)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第一天\images\1550734506084.png)]

五、操作元素

1、改变元素内容（获取或设置）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kkIQ9mqQ-1616663112378)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第一天\images\1550735016756.png)]

区别:

innerHTML 保留空格和换行, 并支持 html 字符串标签;
反之, innerText 只能修改纯文字; 他们都是可读写属性

2、常见元素的属性操作

src、href、tilte、alt

表单元素的属性：

value、type

都只能设置为布尔值（true false）：checked、disabled、selected

六、操作元素样式

1、修改元素的内联样式

元素对象.style.样式属性 = 值;

属性名必须要遵守驼峰命名：font-size ==> fontSize

值一定是字符串, 带上单位’300px’

2、修改元素的类名

ele.className = 值

多类名的情况,要加空格

 <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border: 1px solid;
        }
        
        .big {
            height: 200px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <pre>
    操作元素样式的两种方法：
    1. element.style.属性名: 修改元素的样式属性 (内联样式)
    2. element.className: 修改类名的方式
  </pre>
    <hr>
    <div class="box">点击盒子</div>
    <script>
        var box = document.querySelector('.box');
        box.onclick = function() {
            // console.log(1);
            this.className = 'box big'; //修改类名
        }
        console.log(box.className);
    </script>
</body>

爱对恨错

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web API (一)介绍

Web API (一)介绍一、Web API介绍1.API介绍（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，只需直接调用使用即可。2、Web API的概念Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API3、API 和 Web API 总结API 是为我们
复制链接

扫一扫