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

34、web前端开发之JavaScript(三)

news 2025/7/9 14:58:53

十. DOM操作详解

1、DOM简介

文档对象模型（DOM，Document Object Model）是JavaScript与网页内容交互的接口。它将HTML文档表示为一种树状结构（DOM树），其中每个节点代表文档的一部分（例如元素、文本、注释等）。通过DOM，JavaScript可以动态地访问和操作网页的内容、样式和结构。

DOM的作用：

动态修改网页内容（文本、图片等）。
更改元素的样式（颜色、布局等）。
添加或删除页面元素。
响应用户事件（点击、悬停、输入等）。

DOM结构示例：

<html>  
<head>  
    <title>DOM示例</title>  
</head>  
<body>  
    <h1>标题</h1>  
    <p>这是一个段落。</p>  
</body>  
</html>

DOM树结构如下：

- html  
  - head  
    - title  
  - body  
    - h1  
    - p

2、 DOM节点

在DOM中，所有内容都被表示为节点。常见的节点类型包括：

元素节点：

对应HTML标签，如<div>、<p>等。

例如：

const div = document.querySelector('div'); // 获取一个<div>元素节点

文本节点：
- 元素中的文本内容。
- 例如：
```
<p>这是一个段落。</p>  
```
  上述段落的文本节点是“这是一个段落。”。
属性节点：
- 元素的属性，如id、class、href等。
- 例如：
```
<a href="https://www.example.com">链接</a>  
```
  href是元素的属性节点。
注释节点：
- HTML注释内容。
- 例如：
```
  
```

文档节点：

整个文档的根节点。

例如：

const documentNode = document; // 获取文档节点

3、 DOM操作方法

DOM提供了多种方法来操作节点和元素。以下是一些常用的操作方法：

1. 选择元素

document.getElementById(id)：
通过元素的id属性获取单个元素。

<div id="container">内容</div>

const container = document.getElementById('container');

document.querySelector(selector)：
根据CSS选择器获取第一个匹配的元素。

<div class="box">内容</div>

const box = document.querySelector('.box'); // 选择class为"box"的元素

document.querySelectorAll(selector)：
根据CSS选择器获取所有匹配的元素，返回一个NodeList集合。

const boxes = document.querySelectorAll('.box');  
boxes.forEach(box => {  
    console.log(box);  
});

2. 创建和添加元素

document.createElement(tagName)：
创建一个新的HTML元素。

const newDiv = document.createElement('div');  
newDiv.textContent = '这是一个新创建的div元素';

element.appendChild(child)：
将一个节点添加到指定元素的末尾。

const container = document.getElementById('container');  
container.appendChild(newDiv);

element.insertBefore(newNode, referenceNode)：
在指定的子节点前插入新的节点。

const referenceNode = document.getElementById('reference');  
container.insertBefore(newDiv, referenceNode);

3. 删除元素

element.removeChild(child)：
删除指定元素的子节点。

const container = document.getElementById('container');  
container.removeChild(container.firstChild);

element.remove()：
删除元素本身及其所有子节点。

const elementToRemove = document.getElementById('remove');  
elementToRemove.remove();

4. 修改内容

element.textContent：
获取或设置元素的纯文本内容，不包含HTML标签。

const paragraph = document.querySelector('p');  
paragraph.textContent = '这是新的段落内容';

element.innerHTML：
获取或设置元素的HTML内容，包括标签。

const container = document.getElementById('container');  
container.innerHTML = '<strong>这是<strong>新的<strong>内容</strong></strong>';

5. 修改样式

element.style.property：
修改元素的内联样式属性。

const box = document.querySelector('.box');  
box.style.backgroundColor = 'blue';  
box.style.width = '200px';

element.classList：
添加、移除或切换类名。

const box = document.querySelector('.box');  
box.classList.add('active'); // 添加类  
box.classList.remove('box'); // 移除类  
box.classList.toggle('visible'); // 切换类

element.style.cssText：
一次性修改多个样式属性。

const box = document.querySelector('.box');  
box.style.cssText = 'background-color: blue; width: 200px; height: 100px;';

6. 属性操作

element.getAttribute(attributeName)：
获取元素的某个属性值。

const link = document.querySelector('a');  
const href = link.getAttribute('href');  
console.log(href); // 输出链接地址

element.setAttribute(attributeName, value)：
设置元素的某个属性值。

const link = document.querySelector('a');  
link.setAttribute('href', 'https://www.example.com');

element.hasAttribute(attributeName)：
检查元素是否具有某个属性。

const link = document.querySelector('a');  
if (link.hasAttribute('href')) {  
    console.log('该链接具有href属性');  
}

element.removeAttribute(attributeName)：
删除元素的某个属性。

const link = document.querySelector('a');  
link.removeAttribute('href');

7. 遍历节点

element.childNodes：
返回元素的所有子节点（包括元素节点、文本节点和注释节点）。

const container = document.getElementById('container');  
const childNodes = container.childNodes;  
childNodes.forEach(node => {  
    console.log(node);  
});

element.children：
返回元素的所有子元素节点（只包括元素节点）。

const container = document.getElementById('container');  
const children = container.children;  
children.forEach(child => {  
    console.log(child);  
});

element.firstChild 和 element.lastChild：
获取元素的第一个子节点或最后一个子节点。

const container = document.getElementById('container');  
const firstChild = container.firstChild;  
const lastChild = container.lastChild;

element.nextElementSibling 和 element.previousElementSibling：
获取元素的下一个兄弟元素节点或上一个兄弟元素节点。

const element = document.querySelector('div');  
const nextSibling = element.nextElementSibling;  
const previousSibling = element.previousElementSibling;

element.parentElement：
获取元素的父元素节点。

onst element = document.querySelector('div');  
const parent = element.parentElement;

4、 DOM事件

1. 添加事件监听器

element.addEventListener(eventType, callback)：
添加事件监听器，监听特定事件类型。

const button = document.querySelector('button');  
button.addEventListener('click', function() {  
    console.log('按钮被点击了！');  
});

element.on[eventType]：
通过on属性添加事件监听器。

const button = document.querySelector('button');  
button.onclick = function() {  
    console.log('按钮被点击了！');  
};

2. 事件类型

常见的事件类型包括：

鼠标事件：
- click：鼠标点击。
- dblclick：鼠标双击。
- mousedown：鼠标按下。
- mouseup：鼠标释放。
- mousemove：鼠标移动。
- mouseover：鼠标悬停。
- mouseout：鼠标移出。
键盘事件：
- keydown：键盘按下。
- keyup：键盘释放。
- keypress：键盘按下并释放（已废弃）。
表单事件：
- submit：表单提交。
- reset：表单重置。
- change：表单元素值改变。
- input：输入字段内容变化。
文档和窗口事件：
- load：页面加载完成。
- unload：页面卸载。
- resize：窗口大小调整。
- scroll：页面滚动。

3. 事件对象

当事件发生时，事件监听器会接收到一个事件对象（event object），该对象包含事件相关的信息。

event.type：事件的类型。
event.target：触发事件的目标元素。
event.currentTarget：事件的当前目标（考虑事件代理）。
event.preventDefault()：阻止事件的默认行为。
event.stopPropagation()：停止事件的冒泡传播。

const link = document.querySelector('a');  
link.addEventListener('click', function(event) {  
    event.preventDefault(); // 阻止链接跳转  
    console.log('点击了链接:', event.target.getAttribute('href'));  
});

5、添加和删除元素

1. 创建元素

// 创建一个新的<div>元素  
const newDiv = document.createElement('div');  
newDiv.textContent = '这是一个新创建的div元素';  
newDiv.style.backgroundColor = 'lightblue';  
newDiv.style.padding = '10px';

2. 添加元素

// 获取容器元素  
const container = document.getElementById('container');  
// 将新创建的div元素添加到容器中  
container.appendChild(newDiv);

3. 删除元素

// 获取要删除的元素  
const elementToRemove = document.getElementById('remove');  
// 删除该元素  
elementToRemove.remove();

6、样式操作

1. 修改内联样式

const box = document.querySelector('.box');  
box.style.width = '300px';  
box.style.height = '200px';  
box.style.backgroundColor = 'lightblue';

2. 切换类名

const box = document.querySelector('.box');  
box.classList.add('active'); // 添加类  
box.classList.remove('box'); // 移除类  
box.classList.toggle('visible'); // 切换类

3. 动态修改样式表

const styleSheet = document.createElement('style');  
styleSheet.textContent = `  
    .box {  
        background-color: yellow;  
    }  
    .box.active {  
        background-color: green;  
    }  
`;  
document.head.appendChild(styleSheet);

7、示例：动态更新网页内容

以下是一个综合示例，展示了如何通过DOM操作动态修改网页内容。

<!DOCTYPE html>  
<html>  
<head>  
    <title>DOM操作示例</title>  
    <style>  
        .container {  
            width: 80%;  
            margin: 0 auto;  
            padding: 20px;  
        }  
        .box {  
            border: 1px solid #ccc;  
            padding: 10px;  
            margin: 10px 0;  
        }  
        .box.active {  
            background-color: lightblue;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <h1 id="title">DOM操作示例</h1>  
        <button onclick="addNewBox()">添加新框</button>  
        <div id="content"></div>  
    </div>  

    <script>  
        function addNewBox() {  
            // 创建一个新的<div>元素  
            const newBox = document.createElement('div');  
            newBox.className = 'box';  
            newBox.textContent = `这是第${getBoxCount()}个新增的框`;  
            
            // 获取容器元素  
            const container = document.getElementById('content');  
            // 将新元素添加到容器中  
            container.appendChild(newBox);  
            
            // 更新标题  
            const title = document.getElementById('title');  
            title.textContent = `DOM操作示例（共${getBoxCount()}个框）`;  
            
            // 为新添加的框添加点击事件  
            newBox.addEventListener('click', function() {  
                this.classList.toggle('active');  
                console.log('点击了第', this.textContent, '个框');  
            });  
        }  

        function getBoxCount() {  
            const container = document.getElementById('content');  
            return container.children.length;  
        }  
    </script>  
</body>  
</html>

示例功能：

点击“添加新框”按钮时，会动态创建一个新的<div>元素，并添加到页面中。
新增的<div>元素会显示其序号（例如：“这是第1个新增的框”）。
点击每个<div>框时，会切换其“active”类名，改变背景颜色。
标题会动态更新，显示当前页面中新增的框的数量。

8、总结

DOM操作是JavaScript与网页内容交互的核心。通过DOM，我们可以动态地添加、删除和修改页面元素、样式和内容，同时可以响应用户事件。掌握DOM操作方法（如选择元素、创建节点、修改样式和属性等）是前端开发的基础技能。随着对DOM的深入理解和实践，开发者可以创建更动态、交互性更强的Web页面。

十一、JavaScript事件处理详解

JavaScript的事件处理是前端开发的核心部分之一。事件是用户与网页交互的方式，例如点击按钮、输入文本、滚动页面等。通过事件处理，我们可以响应这些交互，并执行相应的操作。本节将详细讲解JavaScript事件处理的各个方面。

1. 事件的基本概念

1.1 什么是事件？

事件是指用户与网页之间发生的某种互动行为，例如：

鼠标事件：点击（click）、双击（dblclick）、悬停（mouseover）等。
键盘事件：按下键（keydown）、释放键（keyup）等。
表单事件：提交表单（submit）、改变内容（change）等。
文档事件：加载完成（load）、卸载（unload）等。

1.2 事件驱动模型

JavaScript是事件驱动的语言。事件驱动模型的核心思想是：当某个事件发生时，执行特定的代码。

示例：

<button onclick="alert('按钮被点击了！')">点击我</button>

1.3 事件的三个阶段

事件在传播过程中会经历三个阶段：

捕获阶段（Capturing Phase）：事件从document开始，向目标元素的祖先节点传播。
目标阶段（Target Phase）：事件到达目标元素。
冒泡阶段（Bubbling Phase）：事件从目标元素向上传播，回到document。

2. 事件处理方法

2.1 内联事件处理

通过HTML标签的on-属性直接定义事件处理函数。

示例：

<button onclick="alert('按钮被点击了！')">点击我</button>

缺点：

嵌入HTML中，代码不易维护。
只能绑定一个事件处理函数。

2.2 传统事件绑定方法

通过JavaScript方法绑定事件处理函数。

语法：

element.addEventListener(eventType, callback[, useCapture])

eventType：事件类型（如'click'）。
callback：事件处理函数。
useCapture：布尔值，表示是否在捕获阶段触发事件（默认为false，即冒泡阶段）。

示例：

const button = document.querySelector('button');  
button.addEventListener('click', function() {  
    console.log('按钮被点击了！');  
});

2.3 事件处理的不同写法

DOM Level 0（传统方式）：

button.onclick = function() {  
    console.log('按钮被点击了！');  
};

DOM Level 2（推荐方式）：

button.addEventListener('click', function() {  
    console.log('按钮被点击了！');  
}, false);

箭头函数：

button.addEventListener('click', () => {  
    console.log('按钮被点击了！');  
});

3. 常见的事件类型

3.1 鼠标事件

事件类型	描述	示例
`click`	鼠标点击元素	`<button onclick="alert('点击了！')">`
`dblclick`	鼠标双击元素
`mousedown`	鼠标按下
`mouseup`	鼠标释放
`mousemove`	鼠标移动
`mouseover`	鼠标悬停在元素上
`mouseout`	鼠标离开元素

3.2 键盘事件

事件类型	描述	示例
`keydown`	键盘按下
`keyup`	键盘释放
`keypress`	键盘按下并释放（已废弃）

3.3 表单事件

事件类型	描述	示例
`submit`	表单提交	`<form onsubmit="alert('表单提交！')">`
`reset`	表单重置
`change`	表单元素值改变
`input`	输入字段内容变化

3.4 文档和窗口事件

事件类型	描述	示例
`load`	页面加载完成	`<body onload="alert('页面加载完成！')">`
`unload`	页面卸载
`resize`	窗口大小调整
`scroll`	页面滚动

3.5 其他事件

事件类型	描述	示例
`focus`	元素获取焦点
`blur`	元素失去焦点
`contextmenu`	右键点击

4. 事件对象

当事件发生时，事件处理函数会接收到一个event对象，该对象包含了事件相关的信息。

4.1 常见的事件对象属性和方法

属性/方法	描述	示例用法
`type`	事件类型	`console.log(event.type);`
`target`	事件的目标元素	`console.log(event.target);`
`currentTarget`	事件的当前目标元素	`console.log(event.currentTarget);`
`preventDefault()`	阻止事件的默认行为	`event.preventDefault();`
`stopPropagation()`	停止事件的进一步传播	`event.stopPropagation();`
`stopImmediatePropagation()`	立即停止事件的传播	`event.stopImmediatePropagation();`

示例：

document.querySelector('a').addEventListener('click', function(event) {  
    event.preventDefault(); // 阻止链接跳转  
    console.log('点击了链接:', event.target.getAttribute('href'));  
});

5. 事件流（Event Propagation）

5.1 事件流的三个阶段

捕获阶段（Capturing Phase）：
- 事件从document开始，向目标元素的祖先节点传播。
目标阶段（Target Phase）：
- 事件到达目标元素。
冒泡阶段（Bubbling Phase）：
- 事件从目标元素向上传播，回到document。

5.2 控制事件传播

event.stopPropagation()：防止事件在DOM树中继续传播。
event.stopImmediatePropagation()：立即停止事件的传播，并阻止其他事件处理函数执行。

示例：

<div id="container">  
    <button>点击我</button>  
</div>  
<script>
const container = document.getElementById('container');  
const button = document.querySelector('button');  

button.addEventListener('click', function(event) {  
    console.log('按钮的click事件触发');  
    event.stopPropagation(); // 防止事件冒泡到container  
});  

container.addEventListener('click', function(event) {  
    console.log('container的click事件触发');  
}); 
</script>

6. 事件委托（Event Delegation）

6.1 什么是事件委托？

事件委托是一种通过将事件监听器绑定到父元素，而不是每个子元素来提高效率的技术。其核心思想是利用事件冒泡的特性。

6.2 事件委托的好处

减少事件监听器的数量：只绑定一次事件监听器，即可处理多个子元素的事件。
提升性能：减少内存的占用，尤其是在处理大量动态元素时。
方便管理：便于动态添加或删除子元素，无需频繁添加或移除事件监听器。

6.3 示例：通过事件委托实现动态添加的子元素也能响应事件

<ul id="list">  
    <li>Item 1</li>  
    <li>Item 2</li>  
    <li>Item 3</li>  
</ul>  
<script>
const list = document.getElementById('list');  

list.addEventListener('click', function(event) {  
    if (event.target.tagName === 'LI') {  
        console.log('点击了列表项:', event.target.textContent);  
        // 可以执行其他操作，例如删除该列表项  
        event.target.remove();  
    }  
});  

// 动态添加新列表项  
const newItem = document.createElement('li');  
newItem.textContent = 'Item 4';  
list.appendChild(newItem);  
</script>

7. 自定义事件（Custom Events）

7.1 什么是自定义事件？

自定义事件是开发者创建的、不属于原生事件的事件类型。通过自定义事件，可以实现更复杂的应用逻辑。

7.2 创建和触发自定义事件

new CustomEvent(type[, options])：
- type：事件类型（字符串）。
- options：可选参数，包括detail属性，可以附带自定义数据。
dispatchEvent(event)：
- 触发自定义事件。

示例：

// 创建自定义事件  
const customEvent = new CustomEvent('userLogin', {  
    detail: {  
        username: 'Alice',  
        loginTime: new Date()  
    }  
});  

// 绑定事件监听器  
document.addEventListener('userLogin', function(event) {  
    console.log('用户登录事件触发:', event.detail);  
});  

// 触发自定义事件  
document.dispatchEvent(customEvent);

8. 跨浏览器兼容性问题

8.1 事件绑定方法

IE8及以下版本：使用attachEvent()方法。
现代浏览器：使用addEventListener()方法。

示例：

function addEvent(element, eventType, callback) {  
    if (element.addEventListener) {  
        element.addEventListener(eventType, callback, false);  
    } else {  
        element.attachEvent('on' + eventType, callback);  
    }  
}

8.2 事件对象的差异

现代浏览器：事件目标是event.target。
IE8及以下版本：事件目标是event.srcElement。

示例：

function getEventTarget(event) {  
    return event.target || event.srcElement;  
}

9. 实际应用场景

9.1 表单验证

const form = document.getElementById('myForm');  
const usernameInput = document.getElementById('username');  

usernameInput.addEventListener('input', function(event) {  
    const value = this.value;  
    if (value.length < 6) {  
        console.log('用户名长度必须至少为6个字符！');  
        this.style.backgroundColor = 'pink';  
    } else {  
        this.style.backgroundColor = 'white';  
    }  
});  

form.addEventListener('submit', function(event) {  
    event.preventDefault();  
    const username = usernameInput.value.trim();  
    if (username === '') {  
        alert('请输入用户名！');  
        return;  
    }  
    // 提交表单  
    console.log('表单提交:', username);  
});

9.2 无限加载（Infinite Scroll）

const container = document.getElementById('container');  
const threshold = 100; // 距离底部的阈值（像素）  

window.addEventListener('scroll', function(event) {  
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
    const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;  
    const contentHeight = container.offsetHeight;  

    if (contentHeight - (scrollTop + windowHeight) < threshold) {  
        // 加载更多内容  
        console.log('加载更多内容...');  
        // Simulate loading data  
        setTimeout(function() {  
            const newItem = document.createElement('div');  
            newItem.textContent = `加载项${Math.random()}`;  
            container.appendChild(newItem);  
        }, 1000);  
    }  
});

10. 总结

JavaScript事件处理是实现交互式Web页面的核心技术。通过事件处理，我们可以响应用户的行为，动态更新页面内容，并实现复杂的交互逻辑。掌握事件的基础知识（如事件类型、事件对象、事件流、事件委托等）是前端开发的基础技能。在实际开发中，结合事件处理和DOM操作，可以创建出更动态、更用户友好的Web应用程序。

十二. 异步编程与Promise详解

JavaScript中的异步编程是处理I/O操作（如网络请求、定时器等）的一种方式，避免了阻塞主线程，提升用户体验。本节将详细介绍回调函数、Promise、async/await以及AJAX与Fetch API的使用。

1、回调函数（Callback Functions）

回调函数是一种将函数作为参数传递给另一个函数，并在某些操作完成后由另一个函数调用（“回调”）的技术。它是JavaScript中最早用于处理异步操作的方式。

1.1 回调函数的基本用法

setTimeout(function() {  
    console.log('3秒后执行');  
}, 3000);

setTimeout是接受一个回调函数和时间参数的函数。
当设定的时间过去后，JavaScript引擎会执行回调函数。

1.2 回调函数的缺点

嵌套地狱：多个异步操作需要嵌套使用多个回调函数，导致代码难以阅读和维护。

setTimeout(function() {  
    console.log('3秒后执行');  
    setTimeout(function() {  
        console.log('再3秒后执行');  
        setTimeout(function() {  
            console.log('再再3秒后执行');  
        }, 3000);  
    }, 3000);  
}, 3000);

错误处理困难：在嵌套多层回调时，处理错误和异常变得复杂，容易导致memory leak或其他问题。

2、 Promise

Promise是ES6引入的用于处理异步操作的新方式。它通过封装异步操作的结果，使得代码更易于编写和维护。

2.1 Promise的基本概念

Promise代表一个未来才会知道结果的值。它有三种状态：

Pending（等待）：初始状态，既没有成功也没有失败。
Fulfilled（已完成）：操作成功，resolve函数被调用。
Rejected（已失败）：操作失败，reject函数被调用。

2.2 创建和使用Promise

创建Promise：

const promise = new Promise(function(resolve, reject) {  
    // 异步操作  
    if (/* 判断是否成功 */ ) {  
        resolve(/* 成功的结果 */);  
    } else {  
        reject(/* 失败的原因 */);  
    }  
});

使用Promise：

promise.then(function(result) {  
    console.log('成功处理:', result);  
}).catch(function(error) {  
    console.error('处理失败:', error);  
});

2.3 Promise的链式操作

Promise允许使用.then()和.catch()进行链式调用，简化异步流程的处理。

fetch('https://api.example.com/data')  
    .then(response => response.json())  
    .then(data => console.log('获取的数据:', data))  
    .catch(error => console.error('获取数据失败:', error));

2.4 Promise.all() 和 Promise.race()

Promise.all(iterable)：
等待所有Promise都完成，返回一个新的Promise。

const promises = [  
    new Promise(resolve => setTimeout(resolve, 2000, '任务1完成')),  
    new Promise(resolve => setTimeout(resolve, 3000, '任务2完成'))  
];  

Promise.all(promises).then(results => {  
    console.log('所有任务完成:', results);  
});

Promise.race(iterable)：
等待第一个完成的Promise，返回其结果。

const promises = [  
    new Promise(resolve => setTimeout(resolve, 2000, '任务1完成')),  
    new Promise(resolve => setTimeout(resolve, 3000, '任务2完成'))  
];  

Promise.race(promises).then(result => {  
    console.log('第一个完成的任务:', result);  
});

3、 Async/await

async/await是ES2017引入的语法糖，用于简化Promise的使用。它通过将异步代码写法转换为类似同步代码的方式，提升代码的可读性。

3.1 async函数的基本用法

async function DelayedLog() {  
    try {  
        const result = await new Promise(resolve => setTimeout(resolve, 2000, '完成'));  
        console.log(result);  
    } catch (error) {  
        console.error('发生错误:', error);  
    }  
}  
DelayedLog();

async关键字：用于声明一个异步函数。
await关键字：用于等待Promise的完成，并暂停函数的执行，直到Promise返回结果。
try…catch块：用于处理异步操作中的错误。

3.2 在Promise链中使用async/await

async function processData() {  
    try {  
        const response = await fetch('https://api.example.com/data');  
        const data = await response.json();  
        console.log('处理的数据:', data);  
    } catch (error) {  
        console.error('处理数据失败:', error);  
    }  
}  
processData();

3.3 处理多个异步操作

顺序执行：

async function sequentialTasks() {  
    const task1 = await new Promise(resolve => setTimeout(resolve, 2000, '任务1完成'));  
    const task2 = await new Promise(resolve => setTimeout(resolve, 3000, '任务2完成'));  
    console.log('所有任务完成:', [task1, task2]);  
}  
sequentialTasks();

并行执行：

async function parallelTasks() {  
    const promises = [  
        new Promise(resolve => setTimeout(resolve, 2000, '任务1完成')),  
        new Promise(resolve => setTimeout(resolve, 3000, '任务2完成'))  
    ];  
    const results = await Promise.all(promises);  
    console.log('所有任务完成:', results);  
}  
parallelTasks();

4、 AJAX与Fetch API

AJAX（Asynchronous JavaScript and XML）是一种在网页加载后，向服务器请求数据并更新网页内容的技术。Fetch API是现代浏览器中用于发送HTTP请求的标准API。

4.1 Fetch API的基本用法

fetch('https://api.example.com/data')  
    .then(response => {  
        console.log('响应对象:', response);  
        return response.json(); // 解析响应为JSON格式  
    })  
    .then(data => {  
        console.log('获取的数据:', data);  
    })  
    .catch(error => {  
        console.error('获取数据失败:', error);  
    });

4.2 使用async/await调用Fetch API

async function fetchData() {  
    try {  
        const response = await fetch('https://api.example.com/data');  
        if (!response.ok) {  
            throw new Error('HTTP错误，状态码：' + response.status);  
        }  
        const data = await response.json();  
        console.log('获取的数据:', data);  
    } catch (error) {  
        console.error('获取数据失败:', error);  
    }  
}  
fetchData();

4.3 发送POST请求

async function sendData(data) {  
    try {  
        const response = await fetch('https://api.example.com/submit', {  
            method: 'POST',  
            headers: {  
                'Content-Type': 'application/json',  
            },  
            body: JSON.stringify(data)  
        });  
        const result = await response.json();  
        console.log('提交数据结果:', result);  
    } catch (error) {  
        console.error('提交数据失败:', error);  
    }  
}  
sendData({ name: 'Alice', age: 30 });

5、总结

JavaScript中的异步编程通过回调函数、Promise、async/await以及Fetch API等技术，实现了高效的非阻塞I/O操作处理。Promise和async/await进一步简化了异步代码的编写，提升了代码的可读性和维护性。在实际应用中，掌握这些技术可以帮助开发者更高效地处理复杂的异步逻辑，提升Web应用的响应速度和用户体验。

查看全文

http://www.dtcms.com/a/108880.html

将图表和表格导出为PDF的功能

ThreadLocalMap的作用和特点

cobbler自动最小化安装centos，并配置地址

springboot+easyexcel实现下载excels模板下拉选择

Spring Boot 的配置文件

网络空间安全（50）JavaScript基础语法

C#：重构（refactoring）

【Spring Cloud Alibaba】：Nacos 使用全详解

CExercise04_1位运算符_1 用位运算符判断某个整数是否为奇数

购物车(V2装饰器)

算法：优选（1）

RK3568驱动 SPI主/从配置

基于微信小程序的医院挂号预约系统设计与实现

Apache Doris 2025 Roadmap：构建 GenAI 时代实时高效统一的数据底座

WRF-Chem 中出现real.exe错误（psfc 计算问题）- MOZART

Apache BookKeeper Ledger 的底层存储机制解析

配置单区域OSPF

ARM—LED，看门狗关闭，按钮，时钟，PWM定时器，蜂鸣器

【前端扫盲】postman介绍及使用

走向多模态AI之路（三）：多模态 AI 的挑战与未来

【家政平台开发(12)】家政平台数据库设计：从MySQL到MyBatis-Plus实战

多个参考文献插入、如何同时插入多个参考文献：如[1,2]、[1-3]格式

搬砖--贪心+排序的背包

请谈谈分治算法，如何应用分治算法解决大规模问题？

Pico4 Pro VR 和HTC Vivi 哪个好些

ngx_getpid() ngx_parent = ngx_getppid()

[C语言笔记]09、指针

代码随想录Day31

作用域与上下文：JavaScript魔法森林探秘

Python每日一题(14)

十. DOM操作详解

1、DOM简介

2、 DOM节点

3、 DOM操作方法

1. 选择元素

2. 创建和添加元素

3. 删除元素

4. 修改内容

5. 修改样式

6. 属性操作

7. 遍历节点

4、 DOM事件

1. 添加事件监听器

2. 事件类型

3. 事件对象

5、添加和删除元素

1. 创建元素

2. 添加元素

3. 删除元素

6、样式操作

1. 修改内联样式

2. 切换类名

3. 动态修改样式表

7、 示例：动态更新网页内容

示例功能：

8、总结

十一、JavaScript事件处理详解

1. 事件的基本概念

1.1 什么是事件？

1.2 事件驱动模型

1.3 事件的三个阶段

2. 事件处理方法

2.1 内联事件处理

2.2 传统事件绑定方法

2.3 事件处理的不同写法

3. 常见的事件类型

3.1 鼠标事件

3.2 键盘事件

3.3 表单事件

3.4 文档和窗口事件

3.5 其他事件

4. 事件对象

4.1 常见的事件对象属性和方法

5. 事件流（Event Propagation）

5.1 事件流的三个阶段

5.2 控制事件传播

6. 事件委托（Event Delegation）

6.1 什么是事件委托？

6.2 事件委托的好处

6.3 示例：通过事件委托实现动态添加的子元素也能响应事件

7. 自定义事件（Custom Events）

7.1 什么是自定义事件？

7.2 创建和触发自定义事件

8. 跨浏览器兼容性问题

8.1 事件绑定方法

8.2 事件对象的差异

9. 实际应用场景

9.1 表单验证

9.2 无限加载（Infinite Scroll）

10. 总结

十二. 异步编程与Promise详解

1、回调函数（Callback Functions）

1.1 回调函数的基本用法

1.2 回调函数的缺点

2、 Promise

2.1 Promise的基本概念

2.2 创建和使用Promise

2.3 Promise的链式操作

2.4 Promise.all() 和 Promise.race()

3、 Async/await

3.1 async函数的基本用法

3.2 在Promise链中使用async/await

3.3 处理多个异步操作

4、 AJAX与Fetch API

4.1 Fetch API的基本用法

4.2 使用async/await调用Fetch API

4.3 发送POST请求

5、 总结

相关文章：

7、示例：动态更新网页内容

5、总结