DOM（Document Object Model）是一种用于访问和操作HTML和XML文档的编程接口。JavaScript通过DOM提供的方法和属性可以对网页的元素进行各种操作，比如修改元素的内容、样式、属性等。
下面是一些常见的对DOM元素的操作以及相应的代码示例：
- 获取元素 使用
document.querySelector()或document.querySelectorAll()方法来获取元素。querySelector()返回匹配指定CSS选择器的第一个元素，querySelectorAll()返回匹配指定CSS选择器的所有元素。
const element = document.querySelector('.className'); // 通过类名获取元素
const elements = document.querySelectorAll('p'); // 获取所有的 p 元素
- 修改元素内容 使用元素的
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; // 获取元素的纯文本内容
- 修改元素样式 使用元素的
style属性可以修改元素的CSS样式。
const element = document.querySelector('.className');
element.style.color = 'red'; // 修改元素字体颜色
element.style.fontSize = '20px'; // 修改元素字体大小
- 修改元素属性 使用元素的
setAttribute()和getAttribute()方法可以设置和获取元素的属性。
const element = document.querySelector('.className');
element.setAttribute('href', 'https://www.example.com'); // 设置元素的href属性const link = element.getAttribute('href'); // 获取元素的href属性
- 添加或删除元素 使用
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操作是进行网页开发的重要基础。
)
)
)
