JavaScript DOM 对元素进行的操作

DOM（Document Object Model）是一种用于访问和操作HTML和XML文档的编程接口。JavaScript通过DOM提供的方法和属性可以对网页的元素进行各种操作，比如修改元素的内容、样式、属性等。

下面是一些常见的对DOM元素的操作以及相应的代码示例：

1. 获取元素 使用document.querySelector()或document.querySelectorAll()方法来获取元素。querySelector()返回匹配指定CSS选择器的第一个元素，querySelectorAll()返回匹配指定CSS选择器的所有元素。

const element = document.querySelector('.className'); // 通过类名获取元素
const elements = document.querySelectorAll('p'); // 获取所有的 p 元素

1. 修改元素内容 使用元素的innerHTML属性可以获取或设置元素的HTML内容，使用innerText或textContent属性可以获取或设置元素的纯文本内容。

const element = document.querySelector('.className');
element.innerHTML = '<strong>新的内容</strong>'; // 设置元素的HTML内容
const content = element.innerHTML; // 获取元素的HTML内容

const element2 = document.querySelector('.className');
element2.innerText = '新的纯文本内容'; // 设置元素的纯文本内容
const textContent = element2.textContent; // 获取元素的纯文本内容

1. 修改元素样式 使用元素的style属性可以修改元素的CSS样式。

const element = document.querySelector('.className');
element.style.color = 'red'; // 修改元素字体颜色
element.style.fontSize = '20px'; // 修改元素字体大小

1. 修改元素属性 使用元素的setAttribute()和getAttribute()方法可以设置和获取元素的属性。

const element = document.querySelector('.className');
element.setAttribute('href', 'https://www.example.com'); // 设置元素的href属性

const link = element.getAttribute('href'); // 获取元素的href属性

1. 添加或删除元素 使用document.createElement()方法创建新的元素，使用element.appendChild()方法将新元素添加到指定元素的子节点的末尾。

const parentElement = document.querySelector('.parent');
const newElement = document.createElement('div');
newElement.innerHTML = '新的元素';
parentElement.appendChild(newElement); // 将新元素添加到指定父元素的子节点的末尾

使用element.remove()方法可以删除元素。

const element = document.querySelector('.className');
element.remove(); // 删除元素

以上是对DOM元素进行常见操作的简要介绍和示例代码。通过DOM操作，我们可以实现对网页元素的动态修改和交互。了解和熟练掌握DOM操作是进行网页开发的重要基础。