在 JavaScript 中编辑 DOM

DOM（文档对象模型）代表 HTML 文档的结构。通过 JavaScript，可以访问和操作 HTML 文档中的所有元素。

编辑 DOM 可以通过以下几个步骤完成。

1. 获取 DOM 元素

要编辑 DOM 元素，首先需要获取它。可以使用以下方法获取 DOM 元素：

通过标签名获取元素

使用 getElementsByTagName() 方法可以获取指定标签名的所有元素。

// 获取所有 p 元素
const paragraphs = document.getElementsByTagName('p');

通过 ID 获取元素

使用 getElementById() 方法可以获取指定 ID 的元素。

// 获取 ID 为 "my-heading" 的元素
const heading = document.getElementById('my-heading');

通过选择器获取元素

使用 querySelector() 或 querySelectorAll() 方法可以获取匹配指定 CSS 选择器的元素。

// 获取所有 class 为 "my-class" 的元素
const elements = document.querySelectorAll('.my-class');

2. 编辑 DOM 元素

一旦获取 DOM 元素，就可以对其进行编辑。以下是常见的编辑操作：

获取和设置元素属性

使用 getAttribute() 和 setAttribute() 方法获取和设置元素的属性。

// 获取 ID 为 "my-image" 的图片元素的 src 属性
const src = document.getElementById('my-image').getAttribute('src');

// 设置 ID 为 "my-link" 的链接元素的 href 属性
document.getElementById('my-link').setAttribute('href', 'https://www.example.com');

获取和设置元素内容

使用 innerHTML 和 textContent 属性获取和设置元素的内容。

// 获取 ID 为 "my-paragraph" 的段落元素的文本内容
const text = document.getElementById('my-paragraph').textContent;

// 设置 ID 为 "my-heading" 的标题元素的 HTML 内容
document.getElementById('my-heading').innerHTML = '<strong>My Heading</strong>';

添加和移除类名

使用 className 属性添加和移除元素的类名。

// 向 ID 为 "my-element" 的元素添加类名 "my-class"
document.getElementById('my-element').className += ' my-class';

// 从 ID 为 "my-element" 的元素移除类名 "my-class"
document.getElementById('my-element').classList.remove('my-class');

3. 监听 DOM 事件

DOM 事件是文档或元素中的发生事件，如点击、滚动或表单提交。可以使用 addEventListener() 方法在元素上添加事件监听器。

// 在 ID 为 "my-button" 的按钮上添加点击事件监听器
document.getElementById('my-button').addEventListener('click', function() {
  alert('Button clicked!');
});

以上是在 JavaScript 中编辑 DOM 的基本步骤。通过这些操作，可以实现各种复杂的交互和动态效果。