【WebAPI基础】_web api

---

前言

JavaScript组成

---

一、Web API 简介

1. 什么是API？

应用程序接口（API，Application Programming Interface）是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能。使复杂的代码变得抽象化，并提供一些简单的接口规则直接使用。

2. Web API

Web API 是 Web 的应用程序编程接口。

3. Web API 的作用和分类

• 作用：基于JavaScript语法去操作HTML和浏览器。
• 分类：DOM（文档对象模型）、BOM（浏览器对象模型。

---

二、DOM简介

• DOM（Document Object Model）是用来呈现以及与任意 HTML 或 XML文档交互的API。当网页被加载时，浏览器会创建页面的文档对象模型。
• 用于开发网页内容特效和实现用户交互。

1. DOM树

DOM树是描述网页内容关系的名词，将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树。

作用：直观的体现了标签与标签之间的关系。

2. DOM对象

• DOM对象：浏览器根据html标签生成的 JS对象，把网页内容当做对象来处理。
• 例： document 对象
  -网页所有内容都在document里面。
  -用来于访问和操作网页内容。

---

三、获取DOM对象

1. 根据CSS选择器来获取DOM元素

1.1 选择匹配的第一个元素

语法：

document.querySelector('css选择器')
1

返回选择器匹配的第一个元素，能直接对此方法进行操作修改。

1.2 选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')
1

返回的元素以伪数组的形式存在，即使只返回一个元素。不能直接进行修改，需通过遍历数组访问。

2. 其他获取DOM元素方法

2.1 id获取

  <div id="info">我是酷盖！</div>
    <script>
      // id法获取元素
       let info=document.getElementById('info')
    </script>
1
2
3
4
5

2.1 标签名获取

 // 获取页面所有这一类元素
 let title=document.getElementsByTagName('h3')
1
2

2.1 类名获取

  <div class="text">我是酷盖！</div>
    <script>
        // 获取页面中类名为text的元素
        let text=document.getElementsByClassName('text')
    </script>
1
2
3
4
5

---

四、设置/修改DOM元素内容

1. document.write()

• 能追加body标签结束之前的文本内容。
• 文档中包含的标签也会被解析。

document.write('<div> 我是酷盖 </div>')
//用反引号``包含内容可支持换行和变量添加。
let i=1
document.write(`
	<div> ${i}个酷盖 </div>
	<div> ${i+1}个酷盖 </div>
`)
1
2
3
4
5
6
7

2. 对象.innerText 属性

• 将文本内容添加/更新到任意标签位置。
• 文本中包含的标签不会被解析。

let info=document.querySelector('info')

// 对象.属性=值
info.innerText='我真的是一个酷盖！'

//不识别标签
info.innerText='<strong>我真的是一个酷盖！</strong>'
1
2
3
4
5
6
7

3. 对象.innerHTML 属性

• 将文本内容添加/更新到任意标签位置。
• 使用方法和对象.innerText一样，不同的是能识别HTML标签。

let info=document.querySelector('info')

// <strong>标签起作用
info.innerText='<strong>我真的是一个酷盖！</strong>'
1
2
3
4

---

五、设置/修改DOM元素属性

1. 设置/修改元素常用属性

语法：

对象.属性 = 值
1

例：

<img src="./images/1.jpg" alt="">
<script>
        // 1.获取元素
        let pic = document.querySelector('img')
        
        // 2.修改元素属性
        pic.src = `./images/2.jpg`
        pic.title = '谁还不是个酷盖了~'
    </script>
1
2
3
4
5
6
7
8
9

2. 设置/修改元素样式属性

2.1 通过style属性操作CSS

语法：

对象.style.样式属性 = 值
1

例:

 <div class="box"></div>
    <script>
        let box = document.querySelector('.box')

        // 语法 对象.style.样式属性=值
        box.style.height = '100px'
        box.style.border = '1px solid red'

        // 有连接符需转换为小驼峰命名法
        box.style.backgroundColor = 'green'
1
2
3
4
5
6
7
8
9
10

2.2 操作类名(className) 操作CSS

当修改的样式比较多的时候，借助类名进行修改比较方便。
语法：

元素.className = '类名'
1

例：

<div class="txt"></div>
    <script>
        // 获取元素
        let div = document.querySelector('.txt')

        // 修改元素类名 
        div.className = 'box'

        // 给元素添加类名 (保持原有类名)
        div.className = 'box ins'
    </script>
1
2
3
4
5
6
7
8
9
10
11

2.3 通过 classList 操作类控制CSS

此方法解决了className 容易覆盖以前类名的问题。
语法：

 // 添加类
 box.classList.add('类名')

 // 删除类
 box.classList.remove('类名')

 // 切换类
 box.classList.toggle('类名')
1
2
3
4
5
6
7
8

切换类就是在有类和无类之间来回切换，如果元素本身没有这种类，则给它加上，如果元素有这种类，则给它去除。例如可应用于下拉菜单，显示和隐藏切换。

3. 设置/修改表单属性

表单中有显示隐藏转换效果的属性,一律使用布尔值表示，如：disabled、checked、selected等。值为true；代表添加了该属性；如果值为false ，代表移除了该属性。

例：

 <input type="text" value="请输入">
 <button disabled>提交</button>
 <input type="checkbox" checked="checked" class="check">
  	 <script>
        let input = document.querySelector('input') 
        // 修改value属性值
        input.value = ' '
        input.value = '我是酷盖'

        // 隐藏文字
        input.style = 'password'
        
        // 添加表单效果
        let btn = document.querySelector('button')
        btn.disabled = false
        
        // 禁止启用复选框
        let checkbox = document.querySelector('.check')
        checkbox.checked = false
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

六、 定时器-间歇函数

1. 定时器函数介绍

• 功能体现： 在页面中每隔一段时间自动实现效果，无需手动触发。
• 例如：京东秒杀倒计时模块、网页轮播图模块。
• 定时器函数有两种，今天先学间歇函数。

2. 定时器函数基本使用

2.1 开启定时器

语法：

setInterval(函数，时间间隔)
1

例：

// 写法一
 let timer=setInterval(function print() {
      console.log('你不是酷盖，你是奶盖！')
 },1000)
 
//写法二
 function print() {
            console.log('你不是酷盖，你是奶盖！')
        }

        //  每隔1s调用一次print函数
        let num1 = setInterval(print, 1000)
1
2
3
4
5
6
7
8
9
10
11
12

注意：

• 函数名字不需要加括号。
• 定时器返回的是一个数字，定时器的序列号。

例：

 function print() {
            console.log('你不是酷盖，你是奶盖！')
        }

        let num1 = setInterval(print, 1000)
        let num2 = setInterval(print, 1000)
        let num3 = setInterval(print, 1000)

        console.log(num1)
        console.log(num2)
        console.log(num3)
1
2
3
4
5
6
7
8
9
10
11

返回值显示：

2.2 关闭定时器

语法:

let 变量名 = setInterval(函数, 间隔时间)
// 清除间歇函数
clearInterval(变量名)
1
2
3

注意：
函数刚创建时不会使用，当满足某些条件时，再添加该代码，防止函数功能不生效。