当前位置：首页 > article >正文

webAPI -DOM 相关知识点总结（非常细）

article 2025/1/31 1:19:43

title: WebAPI语法
date: 2025-01-28 12:00:00
tags:
  - 前端
categories:
  - 前端

WEB API

了解DOM的结构并掌握其基本的操作，体验 DOM 在开发中的作用

API简介

就是使用js来操作html和浏览器

什么是DOM?

就是一个文档对象模型，是用来呈现预计于任意html交互的API.

一句话：是浏览器提供的一套专门来操作网页内容的功能。

DOM :开发网页内容特效和实现用户交互。

DOM树

将html文档以树状结构直观的呈现出来，我们称之为文档树,DOm树

描述网页内容关系的名词。

作用：文档树直观的体现了标签与标签的关系

DOM对象（重要）

对象：浏览器根据html标签生成的Js对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上。

核心思想：把网页内容当作对象来处理。

Document :是DOM里面提供的一个对象

所以他提供的属性和方法都是用来访问和操作网页内容的
网页内容都在document里面

获取一个DOM 元素我们使用谁？能直接操作修改吗？

一般我们用的谁querySelector() 可以直接操作修改

获取多个DOM 元素我们使用querySelctorAll(),不可以直接进行修改，只能通过遍历的方式一次给里面的元素做修改。

根据CSS选择器来获取DOM元素（重点）

document.querySelctorAll('css选择器')

得到的是一个伪数组

有长度有索引号的数组
但是没有pop(),push()等数组的方法

想要得到里面的每一个对象，则需要遍历(for)来实现。

那么我应该怎么做呢？

//获取元素
const lis = document,querySelectorAll('.nav li')
//console.log(lis)
for(let i = 0;i<lis.length;i++)
{
  console.log(lis[i]); //每一个小li对象
}

小括号里面的参数必须是字符串，也就是必须加引号。

其他获取DOM元素的方法

document.getElementById('nav')
//根据id获取一个元素

操作元素内容

目标：能够修改元素的文本更换内容

DOM对象就是根据标签生成的，所以操作标签，本质上就是操作DOM对象

就是操作对象使用的点语法

如果想要修改标签元素的里面的内容，那么可以使用如下的几种方式

对象.innerText属性

那么具体上是怎么要的呢

<div class="box">我是文字的内容</div>
<script>
//获取元素
const box = document.querySelector('.box')
//修改文字内容。对象.innerText 属性
console.log(box.innerText)  //获取文字内容
box.innerText = '我是一个盒子'
</script>

innerText 属性显示纯文本，不解析标签

可以将文本内容添加/更新到任意标签位置

对象.innerHTML属性

<div class="box">我是文字的内容</div>
<script>
//获取元素
const box = document.querySelector('.box')
//修改文字内容。对象.innerText 属性
console.log(box.innerText)  //获取文字内容
box.innerHTML = '<strong>我要更换</strong>'
</script>

一个具体例子

<script>
//线声明一下数组
const personArr = ['周杰伦'，'sw','qd','wdw']
//随机数数组下标
const random = Math.floor(Math.random() * personArr.length)
//获取one 元素
const one = doucument.querySelctor('#one')
</script>

操作元素属性

对象.属性 = 值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./images/1.webp" alt="">
    <script>
        // 1. 获取图片元素
        const img = document.querySelector('img');
        
        // 2. 修改图片对象的属性
        img.src = './images/2.webp';
        img.title = 'pink老师的艺术照';
    </script>
</body>
</html>

然后再写一个生成随机照片的程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机图片</title>
</head>
<body>
    <img src="./images/1.webp" alt="">
    <script>
        // 获取 N ~ M 的随机整数
        function getRandom(N, M) {
            return Math.floor(Math.random() * (M - N + 1)) + N;
        }

        // 1. 获取图片对象
        const img = document.querySelector('img');

        // 2. 随机得到序号
        const random = getRandom(1, 6);

        // 3. 更换路径
        img.src = `./images/${random}.webp`;
    </script>
</body>
</html>

这个得记住，当模版来记忆

操作对象的样式属性

img.src = ./images/${random}.webp; 这里是重点，也是精髓所在

小驼峰命名法（Camel Case）是一种命名约定，通常用于编程中变量、函数、对象等的命名。

特点：

1. 首字母小写：小驼峰命名法的第一个单词以小写字母开头。

2. 后续单词首字母大写：从第二个单词开始，每个单词的首字母大写，其余字母小写。

3.  **不使用分隔符**：单词之间不使用下划线、连字符等，仅通过字母大小写区分单词边界。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改样式</title>
</head>
<body>
    <div class="box"></div>
    <script>
        // 1. 获取元素
        const box = document.querySelector('.box');

        // 2. 修改样式属性 对象.style.样式属性 = '值' 别忘了跟单位
        box.style.width = '300px';
        box.style.backgroundColor = 'hotpink';
        box.style.border = '2px solid blue';
        box.style.borderTop = '2px solid red';
    </script>
</body>
</html>

注意这个格式

小驼峰形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过类名修改样式</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-color: hotpink;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 1. 获取元素
        const div = document.querySelector('div');
        
        // 2. 添加类名 class 是个关键字 我们用 className
        div.className = 'box';
    </script>
</body>
</html>

如果你想更换的是nav 的话，可以在添加类名也就是第2步鞋

Div.className = 'nav box'

操作元素样式属性

通过classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList 方式追加和删除类名

通过classList修改样式

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>classList.add 示例</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: lightgray;
    }
    .active {
      background-color: lightblue;
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <div class="box">文字</div>
  <script>
  //获取元素
    const box = document.querySelector('.box')
    // 添加类名 active
    box.classList.add('active')
    //删除一个类
    box.claaList.remove('active')
    //切换一个类
    box.classList.togglē('active')
  </script>
</body>
</html>

轮播图

首先随机数

随机数（记住）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机内容更新</title>
  <style>
    .slider-wrapper img {
      width: 300px;
      height: 200px;
    }
    .slider-footer {
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="slider-wrapper">
    <img src="placeholder.jpg" alt="随机图片" />
  </div>
  <div class="slider-footer">
    <p>占位文字</p>
  </div>

  <script>
    const sliderData = [
      { url: 'image1.jpg', title: '图片一标题', color: '#ffcccc' },
      { url: 'image2.jpg', title: '图片二标题', color: '#ccffcc' },
      { url: 'image3.jpg', title: '图片三标题', color: '#ccccff' }
    ]

    const random = parseInt(Math.random() * sliderData.length)

    const img = document.querySelector('.slider-wrapper img')
    img.src = sliderData[random].url

    const p = document.querySelector('.slider-footer p')
    p.innerHTML = sliderData[random].title

    const footer = document.querySelector('.slider-footer')
    footer.style.backgroundColor = sliderData[random].color
  </script>
</body>
</html>

加小点

的具体实现

<div class="slider-wrapper">
  <img src="placeholder.jpg" alt="图片">
  <ul class="slider-indicator">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

.slider-wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.slider-wrapper img {
  width: 100%;
  height: 100%;
}

.slider-indicator {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.slider-indicator li {
  width: 10px;
  height: 10px;
  background-color: lightgray;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.slider-indicator li.active {
  background-color: blue; /* 当前选中小圆点的颜色 */
}

const sliderData = [
  { url: 'image1.jpg', title: '图片一标题', color: '#ffcccc' },
  { url: 'image2.jpg', title: '图片二标题', color: '#ccffcc' },
  { url: 'image3.jpg', title: '图片三标题', color: '#ccccff' }
];

// 随机选择一个图片和对应的小圆点
const random = parseInt(Math.random() * sliderData.length);

// 更新图片
const img = document.querySelector('.slider-wrapper img');
img.src = sliderData[random].url;

// 更新标题
const p = document.querySelector('.slider-footer p');
p.innerHTML = sliderData[random].title;

// 更新背景颜色
const footer = document.querySelector('.slider-footer');
footer.style.backgroundColor = sliderData[random].color;

// 选中小圆点并添加 active 类
const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`);
li.classList.add('active');

操作表单元素属性

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单值操作</title>
</head>
<body>
  <input type="text" value="电脑" id="uname">

  <script>
    // 1. 获取元素
    const uname = document.querySelector('input');

    // 2. 获取值
    // 获取表单里当前的值，用 uname.value
    console.log(uname.value); // 输出：电脑

    // innerHTML 无法获取表单值
    console.log(uname.innerHTML); // 输出：undefined 或空字符串

    // 3. 设置表单的值
    uname.value = '我要买电脑';
    console.log(uname.value); // 输出：我要买电脑

    // 4. 获取和设置表单类型
    console.log(uname.type); // 输出：text
    uname.type = 'password'; // 将表单类型改为密码输入框
  </script>
</body>
</html>

操作表属性（实现勾选）

自定义属性

这样就会出现5个<div>

自定义属性。在html5中推出来了专门的data-自定义属性

在标签上一律是以data-开头

在DOM对象上一律是以dataset对象方式获取

<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
const one = document.querySelector('div');
console.log(one.dataset.id);  // 输出：1
console.log(one.dataset.spm); // 输出：不知道

定时器

间歇函数

<body>
  <script>
    第一种方法
    setInterval(fuction(){
                console.log('1111')
                },1000)
     第二种方法
     setInterval(fn,3000)
    关闭定时器
    fuction fn(){
      console.log('1111')
    }
    let n = setInterval(fn,1000)
    
    console.log(n)
    
    clearInterval(n)
  </script>
</body>

实现用户倒计时效果

let i = 1
setInterval(fuction (){
i++
document.write(i)
},200)

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒计时启用按钮</title>
  <style>
    .btn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: not-allowed;
    }
    .btn:enabled {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="btn" disabled>我已经阅读用户协议(5)</button>

  <script>
    // 1. 获取元素
    const btn = document.querySelector('.btn');
    // console.log(btn.innerHTML); // 按钮的初始内容

    // 2. 倒计时
    let i = 5; // 倒计时初始值
    // 2.1 开启定时器
    let n = setInterval(function () {
      i--; // 倒计时减少
      // 更新按钮文字
      btn.innerHTML = `我已经阅读用户协议(${i})`;
      // 判断倒计时是否结束
      if (i === 0) {
        clearInterval(n); // 关闭定时器
        // 定时器停止后，按钮可用，文字更新为“同意”
        btn.disabled = false;
        btn.innerHTML = '同意';
      }
    }, 1000); // 每秒执行一次
  </script>
</body>
</html>

轮播图定时器版本

论比

事件监听

程序检测是否有事件发生。

关闭广告

日期对象

const date = new

const date =  new Date()
console.log(data)
console.log(date.getFullYear());
const date1 = new Date('')
console.log(date1)

时间戳

在 JavaScript 中，时间戳（Timestamp） 是指从 1970 年 1 月 1 日 00:00:00 UTC 开始的毫秒数，用于表示一个具体的时间点。以下是关于时间戳的相关知识和常用方法。

这是获得时间的三种方式

查找DOM节点

在前端开发中，DOM（Document Object Model）节点是 HTML 文档的基础组成部分。DOM 是一种用于表示和操作 HTML 和 XML 文档的编程接口。

什么是 DOM 节点？

• 节点（Node） 是 DOM 树中的基本单元。

• 每个节点代表 HTML 文档中的一部分，比如标签、属性、文本等。

• 整个 HTML 文档被解析后，会被表示为一个由节点组成的树状结构，称为 DOM 树。元素节点 表示 HTML 标签，比如

查找节点

通过 ID 查找

const node = document.getElementById("myID");

通过类名查找：

const nodes = document.getElementsByClassName("myClass");

通过标签名查找：

const nodes = document.getElementsByTagName("div");

使用 querySelector：

const node = document.querySelector(".myClass"); // 选择第一个符合条件的节点
const nodes = document.querySelectorAll(".myClass"); // 选择所有符合条件的节点

父子节点

增加节点

创造节点

const newDiv = document.createElement("div");

添加子节点：

const parent = document.getElementById("parent");
const child = document.createElement("div");
parent.appendChild(child);

在指定位置插入节点

const parent = document.getElementById("parent");
const newNode = document.createElement("p");
const referenceNode = document.getElementById("child");
parent.insertBefore(newNode, referenceNode);

删除节点：

const parent = document.getElementById("parent");
const child = document.getElementById("child");
parent.removeChild(child);

修改节点内容

const node = document.getElementById("myID");
node.textContent = "New Content";

修改节点属性

const node = document.getElementById("myID");
node.setAttribute("class", "newClass");

DOM 节点关系

在 DOM 树中，节点之间存在层级关系：

• 父节点（Parent Node）： 使用 parentNode 属性访问。

const parent = childNode.parentNode;

• 子节点（Child Nodes）： 使用 childNodes 属性访问（包括文本节点）。

const children = parentNode.childNodes;

• 第一个子节点/最后一个子节点：

const firstChild = parentNode.firstChild;
const lastChild = parentNode.lastChild;

• 兄弟节点（Sibling Nodes）：

const nextSibling = currentNode.nextSibling; // 下一个节点
const previousSibling = currentNode.previousSibling; // 上一个节点

M端事件

swipper插件

在swipper插件这里

BOM

在前端开发中，BOM（Browser Object Model，浏览器对象模型）是一个用于操作浏览器窗口和浏览器相关功能的接口。BOM 提供了 JavaScript 与浏览器交互的能力，比如控制窗口、导航、获取浏览器信息等。

console.log(window.innerWidth);  // 浏览器窗口的宽度
console.log(window.innerHeight); // 浏览器窗口的高度
window.alert("这是一个弹窗!");  // 显示警告框
window.open("https://www.example.com"); // 打开新窗口

2. navigator 对象

• 提供浏览器和用户设备的信息，比如浏览器的名称、版本、操作系统等。

console.log(navigator.userAgent);      // 用户代理字符串，包含浏览器信息
console.log(navigator.platform);      // 操作系统类型
console.log(navigator.language);      // 当前使用的语言
console.log(navigator.onLine);        // 检测是否联网

3. location 对象

• 提供当前页面的 URL 信息，并可以通过它操作浏览器跳转。

console.log(location.href);           // 当前页面的完整 URL
console.log(location.hostname);       // 主机名
console.log(location.pathname);       // 路径部分
console.log(location.search);         // 查询字符串部分
location.assign("https://www.example.com"); // 跳转到指定 URL
location.reload();                    // 重新加载当前页面

4. history 对象

• 提供对浏览器历史记录的操作能力。

history.back();  // 返回上一页
history.forward(); // 前进到下一页
history.go(-2);   // 跳转到历史记录中的指定位置，负数表示后退

5. screen 对象

• 提供与用户屏幕相关的信息，比如分辨率。

console.log(screen.width);    // 屏幕宽度
console.log(screen.height);   // 屏幕高度
console.log(screen.availWidth);  // 可用宽度（减去任务栏等）
console.log(screen.availHeight); // 可用高度

定时器

JS执行机制

本地存储

在前端开发中，本地存储（Local Storage） 是 HTML5 提供的一种持久化存储方式，用于在浏览器中以键值对的形式保存数据。这些数据保存在用户的浏览器中，即使刷新页面或关闭浏览器后数据仍然存在。

1. 本地存储的特点

• 容量大：一般为 5MB，比传统的 cookie 容量大。

• 持久性：数据会一直保存在浏览器中，直到手动清除。

• 键值对存储：以字符串形式存储键值对。

• 仅在同一域名下共享：同一域名下的页面可以访问相同的本地存储。

(1) 保存数据

使用 localStorage.setItem(key, value) 方法。

localStorage.setItem('username', 'Alice');

• 参数说明：

• key：键名（字符串）。

• value：键值（必须是字符串）。

(2) 读取数据

使用 localStorage.getItem(key) 方法。

const username = localStorage.getItem('username');
console.log(username); // 输出：Alice

(3) 删除某个键值对

使用 localStorage.removeItem(key) 方法。

localStorage.removeItem('username');

(4) 清除所有数据

使用 localStorage.clear() 方法。

localStorage.clear();

(5) 获取所有键

使用 localStorage.key(index) 方法获取指定索引的键名。

for (let i = 0; i < localStorage.length; i++) {
  console.log(localStorage.key(i)); // 遍历所有键名
}

只能存储字符串

存储复杂数据类型

1. 存储对象

存储方法

将对象通过 JSON.stringify() 转换为字符串后存储：

const user = { name: 'Alice', age: 25, hobbies: ['reading', 'coding'] };
localStorage.setItem('user', JSON.stringify(user)); // 转为字符串存储

读取方法

从本地存储中获取字符串后，用 JSON.parse() 转换回对象：

const userStr = localStorage.getItem('user'); // 获取字符串
if (userStr) {
  const user = JSON.parse(userStr); // 转为对象
  console.log(user.name); // 输出：Alice
  console.log(user.hobbies); // 输出：['reading', 'coding']
}

Map

map也称之为映射

join 把数组转换为字符串

正则表达式

正则表达式（Regular Expression）是用来匹配字符串中字符模式的工具，广泛应用于文本处理，比如验证输入格式、查找替换字符串、数据提取等。

1. 正则表达式的基础

正则表达式由普通字符和元字符（特殊字符）组成，具有灵活且强大的匹配能力。

正则表达式中的一些特殊字符需要通过反斜杠 \ 转义才能匹配本身：

• . 匹配 .，* 匹配 *。

• 如果要匹配反斜杠本身，写成 \。

常见正则表达式作用

表单验证
过滤敏感词
字符串中提取我们想要的部分

三组词语

匹配，替换，提取

const regex = /abc/;

const regex = /hello/i;
console.log(regex.test("Hello")); // true

定义-检测是否匹配

元字符（Metacharacters） 是正则表达式中具有特殊含义的字符，用于定义匹配规则，而不是直接匹配它们的字面值。元字符赋予了正则表达式强大的功能，使其可以灵活处理字符串模式匹配。

const regex = /a.b/;
console.log(regex.test("acb")); // true
console.log(regex.test("a_b")); // true
console.log(regex.test("ab"));  // false

const regex1 = /^hello/; // 必须以 "hello" 开头
console.log(regex1.test("hello world")); // true
console.log(regex1.test("world hello")); // false

const regex2 = /world$/; // 必须以 "world" 结尾
console.log(regex2.test("hello world")); // true
console.log(regex2.test("world hello")); // false

边界符

const regex1 = /^hello/; // 必须以 "hello" 开头
console.log(regex1.test("hello world")); // true
console.log(regex1.test("world hello")); // false

const regex2 = /world$/; // 必须以 "world" 结尾
console.log(regex2.test("hello world")); // true
console.log(regex2.test("world hello")); // false

(4) {}（量词）

• {n}：匹配前面的字符恰好 n 次。

• {n,}：匹配前面的字符至少 n 次。

• {n,m}：匹配前面的字符 n 到 m 次。

const regex1 = /a{2}/; // 匹配两个连续的 "a"
console.log(regex1.test("aa")); // true
console.log(regex1.test("a"));  // false

const regex2 = /a{2,}/; // 匹配至少两个连续的 "a"
console.log(regex2.test("aaa")); // true
console.log(regex2.test("a"));   // false

const regex3 = /a{2,4}/; // 匹配 2 到 4 个连续的 "a"
console.log(regex3.test("aaa"));  // true
console.log(regex3.test("aaaaa"));// true（只匹配前 4 个 "a"）

const regex1 = /a{2}/; // 匹配两个连续的 "a"
console.log(regex1.test("aa")); // true
console.log(regex1.test("a"));  // false

const regex2 = /a{2,}/; // 匹配至少两个连续的 "a"
console.log(regex2.test("aaa")); // true
console.log(regex2.test("a"));   // false

const regex3 = /a{2,4}/; // 匹配 2 到 4 个连续的 "a"
console.log(regex3.test("aaa"));  // true
console.log(regex3.test("aaaaa"));// true（只匹配前 4 个 "a"）

3. 特殊的字符类

正则表达式还提供了一些预定义的字符类，可以快速匹配特定类型的字符：