前端操作DOM元素：获取、操作、属性

在网页开发中，动态操作文档对象模型 (DOM) 至关重要，它允许我们控制网页的内容和行为。在 JavaScript 中，我们可以通过各种方法来获取、操作和修改 DOM 元素，从而实现交互式、动态的 веб-страницы.

获取元素

第一步是获取 DOM 元素。有几种方法可以做到这一点：

• getElementById(id) ：使用元素的 ID 获取元素。
• getElementsByClassName(className) ：根据类名获取元素的集合。
• getElementsByTagName(tagName) ：根据标签名获取元素的集合。
• querySelector(selector) ：使用 CSS 选择器获取第一个匹配元素。
• querySelectorAll(selector) ：使用 CSS 选择器获取所有匹配元素。

操作元素

一旦获取元素，我们就可以操作它们：

• textContent ：获取或设置元素的文本内容。
• innerHTML ：获取或设置元素的 HTML 内容。
• appendChild(element) ：将元素添加到另一个元素的末尾。
• insertBefore(newElement, existingElement) ：将新元素插入到现有元素之前。
• removeChild(element) ：从父元素中删除元素。

修改元素属性

我们还可以修改元素的属性：

• getAttribute(attributeName) ：获取元素的属性值。
• setAttribute(attributeName, value) ：设置元素的属性值。
• removeAttribute(attributeName) ：删除元素的属性。
• style ：获取或设置元素的样式属性。

案例

以下代码示例演示了如何使用这些方法：

// 获取元素
const paragraph = document.getElementById('paragraph');
const button = document.querySelector('button');

// 设置文本内容
paragraph.textContent = 'Hello, world!';

// 添加样式
paragraph.style.color = 'red';

// 添加事件监听器
button.addEventListener('click', () => {
  // 创建新元素
  const newParagraph = document.createElement('p');
  newParagraph.textContent = 'New paragraph';

  // 将新元素添加到父元素
  paragraph.appendChild(newParagraph);
});

---