【JavaScript】2.4 JavaScript和浏览器

文章目录

- DOM 操作
- - 选择元素
  - 修改元素
  - 创建和删除元素
- 事件处理
- - 监听事件
  - 阻止默认行为
- 异步编程
- - 回调函数
  - Promise
  - async/await
- 总结

JavaScript最初是为了在浏览器中使用而创建的，它是Web开发的重要组成部分。在这一章节中，我们将学习如何使用JavaScript与浏览器进行交互。

DOM 操作

DOM（Document Object Model）是一个编程接口，它允许JavaScript操作HTML文档的内容和结构。HTML文档被解析成一个DOM树，我们可以通过JavaScript来操作DOM树的节点。

选择元素

我们可以使用各种方法来选择DOM元素。

var elementById = document.getElementById('myId'); // 通过ID选择元素
var elementsByClassName = document.getElementsByClassName('myClass'); // 通过类名选择元素
var elementsByTagName = document.getElementsByTagName('div'); // 通过标签名选择元素
var elementBySelector = document.querySelector('.myClass'); // 通过CSS选择器选择元素
var elementsBySelectorAll = document.querySelectorAll('.myClass'); // 通过CSS选择器选择所有匹配的元素

修改元素

我们可以修改DOM元素的属性和内容。

var element = document.getElementById('myId');
element.className = 'newClass'; // 修改类名
element.style.color = 'red'; // 修改样式
element.innerHTML = '<strong>Hello, world!</strong>'; // 修改HTML内容

创建和删除元素

我们可以创建新的DOM元素，并添加到DOM树中。我们也可以删除已有的DOM元素。

var newElement = document.createElement('div'); // 创建新元素
newElement.innerHTML = 'Hello, world!';
document.body.appendChild(newElement); // 添加新元素到bodyvar oldElement = document.getElementById('myId');
document.body.removeChild(oldElement); // 从body删除元素

事件处理

浏览器中的事件是JavaScript与用户交互的主要方式。我们可以使用JavaScript来监听和处理事件。

监听事件

我们可以使用addEventListener方法来监听事件。

var button = document.getElementById('myButton');
button.addEventListener('click', function() {console.log('Button clicked!');
});

在这个例子中，我们监听了按钮的点击事件。当用户点击按钮时，控制台会输出一条消息。

阻止默认行为

在某些情况下，我们可能想要阻止事件的默认行为。我们可以使用preventDefault方法来实现。

var link = document.getElementById('myLink');
link.addEventListener('click', function(event) {event.preventDefault(); // 阻止链接的默认点击行为，即阻止页面跳转console.log('Link clicked!');
});

在这个例子中，我们监听了链接的点击事件。当用户点击链接时，我们阻止了页面跳转，然后在控制台输出一条消息。

异步编程

JavaScript中的异步编程是处理耗时操作的一种方式。我们可以使用回调函数、Promise和async/await来处理异步操作。

回调函数

回调函数是一种函数，它作为参数传递给另一个函数，并在适当的时候被调用。

setTimeout(function() {console.log('Hello, world!');
}, 1000);

在这个例子中，我们使用setTimeout函数来延迟执行一个操作。我们把一个函数（回调函数）和一个延迟时间（1000毫秒）传递给setTimeout。一秒后，回调函数被调用，控制台输出一条消息。

Promise

Promise是处理异步操作的一种方式。Promise有三种状态：pending（等待）、fulfilled（成功）和rejected（失败）。

var promise = new Promise(function(resolve, reject) {setTimeout(function() {resolve('Hello, world!');}, 1000);
});promise.then(function(value) {console.log(value); // 输出：Hello, world!
}).catch(function(error) {console.error(error);
});

在这个例子中，我们创建了一个新的Promise。这个Promise会在1秒后成功，值为’Hello, world!'。然后我们使用then方法来处理成功的结果。

async/await

async/await是处理异步操作的一种方式。它使得异步代码看起来像同步代码。

async function helloWorld() {return new Promise(resolve => {setTimeout(() => {resolve('Hello, world!');}, 1000);});
}async function main() {var value = await helloWorld();console.log(value); // 输出：Hello, world!
}main();