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

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

news 2025/11/5 14:53:24

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 是个关键字 我们用 classNamediv.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')// 添加类名 activebox.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.valueconsole.log(uname.value); // 输出：电脑
// innerHTML 无法获取表单值console.log(uname.innerHTML); // 输出：undefined 或空字符串
// 3. 设置表单的值uname.value = '我要买电脑';console.log(uname.value); // 输出：我要买电脑
// 4. 获取和设置表单类型console.log(uname.type); // 输出：textuname.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); // 输出：Aliceconsole.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. 特殊的字符类

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