web APIs 01

最新推荐文章于 2024-11-08 16:09:18 发布

笨小孩@pvd

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量58

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46652559/article/details/117285596

版权

本文深入讲解Web APIs，涵盖API概念、BOM和DOM详解、DOM树应用、script位置、元素获取方法、样式操作、事件处理、innerText vs innerHTML、焦点事件、CSS选择器、自定义属性和布尔属性，以及现代前端技术如Vue、React和Angular的API应用。

摘要由CSDN通过智能技术生成

web APIs是什么

API是什么？

Application Programming Interface（应用程序接口）

简单来说就是某个软件提供好的一些函数或方法，我们只要调用就可以实现对应的功能

假设我要写一个关闭系统（关机）的功能，你不用去懂操作系统的原理，也不用懂操作系统到底内部怎么实现，你只要调用系统给你提供的对应的函数就可以了，那么像这种函数就叫API。系统API
web APIS是什么？

专门实现web功能的函数、对象和方法

BOM和DOM

BOM

Browser Object Model （浏览器对象模型）

用来操作浏览器的功能，只不过是把浏览器也当做一个对象来操作

例：window对象（就是浏览器对象）， window.close(关闭浏览器) 调用它的方法就可以实现对应的浏览器功能
DOM

Document（文档对象模型）

Object （对象（html任何一个标签在js范围内都是对象)）

Model （模型）

用来操作页面内容的，只不过把页面内容当做一个对象来操作

我们学的内容无非就是学一些对象和方法

核心处理思路：把网页上的任何内容都当做一个对象来处理

DOM树

描述网页内容关系的一个专有名词

为什么叫DOM树？

网页所有内容都在document里面，网页内容以树状形式排列，所以称之为DOM树
元素节点：所有的标签
属性节点：所有的属性
文本节点：所有的文本
注释节点：所有的注释

DOm树的作用：

获取页面上的标签
操作标签的属性
操作标签的内容
操作标签的css样式
动态的创建标签
动态的添加标签
动态的删除标签

为什么script标签要写在</body>结尾的位置

是规范
如果写在上面，默认情况下可能找不到元素
哪怕你把script写在最后，浏览器也会把它提到/body的位置，所以还不如我们自己就写在那个位置

获取元素的方法

根据id获取元素

document.getElementById('id') // 要传入的是字符串 直接写id名不用加#

获取的结果是对象类型的，但是如果直接用console.log打印标签对象，会得到标签，要想看这个对象有什么属性，就用 console.dir
如果这个id找不到元素，会得到null
只能通过 document 来调用，因为id是唯一的，整个网页也只有一份

根据标签名获取元素列表

document.getElementsByTagName('标签名') // 要传入的是字符串

得到的一定是一个伪数组，哪怕只找到一个，也是长度为1的伪数组，如果一个都找不到，那就是长度为0的伪数组可以读取length 可以遍历
可以把前面的document 替换成某个父元素，那就代表只找这个 父元素 里对应的某个子标签
例：

ul2.getElementsByTagName('li') // 只找ul2里的所有li

根据类名获取元素列表

document.getElementsByClassName('类名') // 直接写类名不用加.

特点跟根据标签名获取元素列表一样都是返回一个伪数组

根据name获取元素(常用于表单元素)

<form action="">
      <lable>用户名：<input type="text" name="uname" id="" /></lable><br />
      <lable>密码：<input type="password" name="upass" id="" /></lable><br />
      <lable>性别：</lable><br />
      <input type="radio" name="usex" id="" />男
      <input type="radio" name="usex" id="" />女
    </form>

document.getElementByName(name属性值)

let oUname = document.getElementsByName("uname");

name是通用的属性,虽然每个标签上都可以设置name属性，但是name属性绝大多数情况是给表单元素用

H5新增的css选择器获取元素方法

IE9以前不支持
document.querySelector
document.querySelectorAll
相同点：
- 都是传入css的选择器
不同点：
- querySelector（不带all的方法），返回的永远是对象或者null，如果选择器能找到多个，它也只找到第一个
  （ css选择器）
- querySelectorAll （带all的方法），返回的永远是伪数组，如果选择器匹配1个，也是伪数组，0个也是伪数组，总而言之找到几个就返回长度为几的伪数组
  （ css选择器）

获取特殊元素

document.body ：找到body
document.head：找到head
document.documentElement：找到html

操作属性

就是 点语法( .语法)
标准属性对象 . 属性名
只要是html标签它本身有的属性，都可以通过点语法来设置
当然不用点语法，也可以用['属性名']
html中的一个标签在js层面就对应着一个对象。html上的有属性，那么这个对象上就也有这个属性

class属性

className

classList

classList.add()

classList.remove()

classList.toggle()

自定义属性

data-xxx = xxx

dataset.xxx

布尔类型

需要为布尔类型属性设置布尔值

自定义属性的操作

自定义属性需要在标签上使用data-xxx=' ' 设置在js中输出的时候使用dataset.xxx

修改样式

就是

对象.style.样式名 = 样式值  // 注意：样式值是给字符串
// 例
box.style.width = '200px' // 设置box的宽为200px

// 如果遇到带—的样式名，要把-去掉，然后—后面的首字母大写(驼峰命名)
box.style.backgroundColor = 'red' // 设置背景颜色为红色

如果遇到带 - 的样式名，要把 - 去掉，然后 - 后面的首字母大写(驼峰)

布尔类型属性

在html标签上有一类属性，这类属性仅有属性名没有属性值

这样属性要么存在在标签上要么不存在在标签上根据出现与不出现标签就会有不同的效果

这类属性的名字就叫做布尔类型属性

 <button id="btn">启用/禁用</button>
    <hr />
    <input type="text" name="uname" />
  </body>
  <script>
    // 第1步：为button注册事件
    let oBtn = document.getElementById("btn");
    // 3.1 定义一个变量
    let flag = true;
    oBtn.onclick = function () {
      // 第2步：实现 启用/禁用
      let oTxt = document.getElementsByName("uname")[0];
      // 方案1：根据 当前状态进行判断
      // if(oTxt.disabled === true){
      //     oTxt.disabled = false;
      // }else{
      //     oTxt.disabled = true;
      // }

      // 方案2：取反
      // oTxt.disabled = !oTxt.disabled;

      // 方案3：利用标识位
      if (flag === true) {
        oTxt.disabled = true;
      } else {
        oTxt.disabled = false;
      }
      flag = !flag;
      console.log(flag);
    };
  </script>

隔行变色

先找到所有的li
再遍历每个li，判断下标是否为偶数，若是给一个颜色，若不是给另外一个颜色

事件注册

指的就是网页跟用户交互
说白了，就是用户在网页上做了什么操作，然后网页再给什么反应
事件的三要素：
- 事件源：谁（被用户交互的元素）
- 事件类型（事件名）：被怎么了（用户的操作是什么）
- 响应程序：用什么反应
- 例：有个按钮被点就消失
  - 事件源：按钮
  - 事件类型：点击
  - 响应程序：执行一段代码
事件类型：click 、dbclick 、onfocus、 onblur、onmouseover、onmouseout ...

这个是点击触发的事件

  <button>点我啊</button>
  <script>
    // 找到按钮
    let btn = document.querySelector('button')
    // 加一个点击事件
    btn.onclick = function () {

      alert('点我干啥？')
      alert('点一次200')
    }
  </script>

事件源：btn这个按钮
事件类型：click
响应程序：右边的函数

innerText和innerHTML

取值
- innerText只会取到文本内容
- innerHTML取到所有内容（包括标签）
赋值
- 相同点：都会替换原本的内容，重新赋值
- 不同点：
  - innerText赋值时，如果有标签，会把标签当纯文本
  - innerHTML赋值时，如果有标签，解析成html元素
- 如果不涉及到标签，两个都一样
注意：获取双标签的内容

焦点事件

对于表单元素内容的读取使用 .value 可以读取，也可设置
defaultValue 获取原始内容
可以理解为光标
获取焦点事件
- 事件名：focus
- 可以理解为获取光标
失去焦点事件
- 事件名：blur
- 可以理解为失去光标
这两个事件主要是用在输入框和textarea里

通过className修改样式

className 本质上是修改类名的（也就是修改行内的class属性）
class在js中是一个保留字，所以不能起名叫class，所以JS就改成了className
在通过className对属性进行设置时，会覆盖所有的class 所以需要使用 +=
搞类名主要是为了来改样式要修改class的属性时，使用className来进行操作

    function setCls() {
        // 获取
        let oDiv = document.getElementById("box");

        // oDiv.className = 'clsA clsC clsB';
        // 先将原有的读取现为，再拼接上新的类名
        // console.log(oDiv.className);
        let str = (oDiv.className += " clsB");
        oDiv.className = str;
      }

通过classList操作属性

className 仅适用1个class值的操作
classList 常用于对class属性的操作
classList 读取class属性值，是以伪数组的形式返回
classList.add() 添加class
classList.remove() 移除class

classList.toggle() 切换class

let oBox = document.querySelector("#box");
        console.log(oBox.classList);  查看

let oBox = document.querySelector("#box");
        oBox.classList.add("clsB");  添加

let oBox = document.querySelector("#box");
        oBox.classList.remove("clsB"); 删除

let oBox = document.querySelector("#box");
        oBox.classList.toggle("clsB");  替换