[爬虫]2.1.2 JavaScript如何影响网页内容

JavaScript可以直接操作网页的内容，改变网页的行为，或者与用户进行交互。它通过操作Document Object Model（DOM），也就是网页的结构化表示，来实现这些功能。下面我们将详细介绍这些内容。

访问和修改元素

我们可以使用document.querySelector函数来获取页面元素，然后通过获取的元素对象，我们可以读取或修改它的属性。

例如，我们可以获取一个<h1>元素，并修改它的文本内容：

let h1 = document.querySelector('h1');
h1.textContent = 'Hello, JavaScript!';

添加和删除元素

我们也可以通过JavaScript来添加或删除DOM元素。

例如，我们可以创建一个新的<p>元素，然后将它添加到body元素的末尾：

let p = document.createElement('p');
p.textContent = 'This is a new paragraph.';
document.body.appendChild(p);

我们也可以使用remove方法来删除一个元素：

p.remove();

事件处理

JavaScript可以响应用户的各种操作，如点击按钮，输入文本等。这是通过事件监听器来实现的。

事件监听器是一个函数，它会在某个事件发生时被调用。我们可以使用addEventListener方法来添加事件监听器。

例如，我们可以添加一个点击事件监听器到一个按钮上，当用户点击该按钮时，会弹出一个对话框：

let button = document.querySelector('button');
button.addEventListener('click', function() {
    alert('Button is clicked!');
});

示例：一个简单的计数器

下面我们来看一个更复杂的例子。我们将创建一个简单的计数器，它包含一个显示计数的文本和一个按钮。每当用户点击按钮时，计数就会增加。

首先，我们创建HTML元素：

<p id="counter">0</p>
<button id="button">Increase</button>

然后，我们使用JavaScript来添加事件处理函数：

let counter = document.querySelector('#counter');
let button = document.querySelector('#button');

button.addEventListener('click', function() {
    let count = Number(counter.textContent);
    counter.textContent = count + 1;
});

以上就是JavaScript如何影响网页内容的基本方法。通过操作DOM和处理事件，JavaScript可以创建动态的、交互式的网页，并提供丰富的用户体验。
推荐阅读：

https://mp.weixin.qq.com/s/dV2JzXfgjDdCmWRmE0glDA

https://mp.weixin.qq.com/s/an83QZOWXHqll3SGPYTL5g