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

WebAPIs基本认知，DOM基础介绍

news 2025/7/16 15:19:03

Web APIs

基本认知

变量声明

变量声明有三个var let 和const
建议：优先使用const，原因是const语义化更好，且在react框架中基本都是const
有了变量先给const，如果发现后续它会被修改，再改为let
且对数组,对象也可以使用

<script>const arr = ['red','pink']arr.push('blue')console.log(arr)</script>

但是不能这样写

<script>const arr=['red','pink']arr=[1,2,3]console.log(arr)</script>

作用和分类

作用：就是使用Js去操作HTML和浏览器
分类：DOM（文档对象模型），BOM（浏览器对象模型）

什么是DOM:前端开发的基础

DOM（Document Object Model，文档对象模型）是一种用于表示HTML或XML文档的编程接口。它将网页文档解析为树形结构，其中每个节点都是一个对象，开发者可以通过JavaScript等编程语言对这些对象进行操作，从而实现动态修改网页内容、结构和样式。

DOM的核心特点

树形结构：DOM将文档表示为节点树，每个节点可以有父节点、子节点和兄弟节点。
平台和语言无关：DOM是一种标准接口，可被多种编程语言使用，如JavaScript、Python等。
动态交互：通过DOM操作，网页可以在不刷新的情况下更新内容，实现丰富的交互效果。
DOM对象是DOM（文档对象模型）中的基本组成单元，代表了HTML或XML文档中的各个部分（如元素、文本、属性等）。每个DOM对象都是一个独立的实体，具有属性、方法和事件，可通过JavaScript进行操作。

DOM对象的类型

DOM对象主要分为以下几种类型：

文档节点（Document）
表示整个HTML或XML文档，是DOM树的根节点。
示例：

document.body; // 获取<body>元素
document.querySelector('h1'); // 选择第一个<h1>元素

元素节点（Element）
表示HTML标签（如<div>, <p>, <a>等）。
示例：

const div = document.createElement('div'); // 创建div元素
div.id = 'container'; // 设置id属性

文本节点（Text）
表示元素内的文本内容。
示例：

const textNode = document.createTextNode('Hello World');
div.appendChild(textNode); // 将文本添加到div中

属性节点（Attr）
表示元素的属性（如id, class, src等）。
示例：

const img = document.querySelector('img');
const src = img.getAttribute('src'); // 获取src属性

注释节点（Comment）
表示HTML中的注释（如）。

通用属性：

parentNode：获取父节点
childNodes：获取所有子节点（包括文本节点）
children：获取所有子元素（仅元素节点）
nextSibling/previousSibling：获取相邻节点
nextElementSibling/previousElementSibling：获取相邻元素

常用方法：

querySelector(selector)：返回匹配选择器的第一个元素
querySelectorAll(selector)：返回所有匹配的元素
appendChild(node)：添加子节点
removeChild(node)：移除子节点
setAttribute(name, value)：设置属性
addEventListener(event, callback)：添加事件监听

操作DOM对象

<!DOCTYPE html>
<html>
<body><div id="app"><h1>DOM操作示例</h1><p>点击按钮添加元素</p><button id="addBtn">添加</button><ul id="list"></ul></div><script>// 获取元素const app = document.getElementById('app');const addBtn = document.getElementById('addBtn');const list = document.getElementById('list');//一般使用querySelector()与querySelectorAll()// 修改样式app.style.padding = '20px';// 添加事件监听addBtn.addEventListener('click', () => {// 创建新元素const li = document.createElement('li');li.textContent = `项目 ${list.children.length + 1}`;// 添加到列表list.appendChild(li);// 为新元素添加点击事件li.addEventListener('click', () => {li.style.textDecoration = 'line-through';});});</script>
</body>
</html>

通过ID获取DOM对象
修改元素样式
添加事件监听器
创建新元素并添加到DOM树
为动态创建的元素绑定事件

常见的DOM操作

// 获取元素
const element = document.getElementById('myId'); // 通过ID获取
const elements = document.querySelectorAll('p'); // 获取所有<p>元素// 修改内容
element.textContent = '新文本内容';// 修改样式
element.style.color = 'red';// 修改属性
element.setAttribute('href', 'https://example.com');// 添加事件监听
element.addEventListener('click', () => {alert('元素被点击了！');
});// 创建和添加新元素
const newElement = document.createElement('div');
newElement.textContent = '新创建的元素';
document.body.appendChild(newElement);