JavaScript HTML DOM – 改变 HTML

天天向上

发布： 2025-02-27 23:44:18

原创

144 人浏览过

通过 JavaScript 操作 HTML DOM，我们可以动态地改变网页的结构和内容。这意味着我们可以在浏览器中实时修改网页的 HTML 元素，如添加、删除或修改元素的内容和属性。

1. 改变元素的内容

可以通过 innerHTML 或 innerText 来改变 HTML 元素的内容。

innerHTML：可以修改元素的 HTML 内容，包括子元素和标签。
innerText：只能修改元素的文本内容，不会影响 HTML 标签。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change HTML Content</title>
</head>
<body>
  <div id="content">
    <h1>Old Heading</h1>
    <p>This is the old paragraph.</p>
  </div>

  <script>
    // 使用 innerHTML 修改元素的 HTML 内容
    document.getElementById('content').innerHTML = '<h1>New Heading</h1><p>This is the new paragraph.</p>';

    // 使用 innerText 修改元素的文本内容
    // document.getElementById('content').innerText = 'Only text content now!';
  </script>
</body>
</html>

2. 修改元素的属性

可以使用 setAttribute() 来修改元素的属性，如 id, class, src 等。

setAttribute(attributeName, value)：设置指定元素的属性。
getAttribute(attributeName)：获取指定元素的属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change HTML Attributes</title>
</head>
<body>
  <img id="image" src="old-image.jpg" alt="Old Image">

  <script>
    // 修改 img 元素的 src 属性
    const img = document.getElementById('image');
    img.setAttribute('src', 'new-image.jpg');

    // 获取属性值
    console.log(img.getAttribute('src'));  // 输出: new-image.jpg
  </script>
</body>
</html>

3. 添加和删除元素

可以通过 JavaScript 动态地创建新的 HTML 元素，并将其添加到页面中，也可以删除已有的元素。

createElement(tagName)：创建一个新的 HTML 元素。
appendChild(child)：将子元素添加到父元素的末尾。
removeChild(child)：从父元素中删除指定的子元素。
remove()：删除当前元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add and Remove Elements</title>
</head>
<body>
  <div id="container">
    <p>Existing content</p>
  </div>

  <script>
    // 创建新的元素
    const newDiv = document.createElement('div');
    newDiv.innerText = 'This is a new div element.';

    // 将新的元素添加到容器中
    const container = document.getElementById('container');
    container.appendChild(newDiv);

    // 删除第一个子元素
    const firstChild = container.querySelector('p');
    container.removeChild(firstChild);  // 删除<p>Existing content</p>
  </script>
</body>
</html>

4. 修改元素的样式

通过 style 属性，我们可以修改 HTML 元素的行内样式，如颜色、字体大小、背景等。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change Element Styles</title>
</head>
<body>
  <h1 id="heading">Change My Style</h1>

  <script>
    // 修改元素的样式
    const heading = document.getElementById('heading');
    heading.style.color = 'red';  // 修改文本颜色
    heading.style.fontSize = '30px';  // 修改字体大小
    heading.style.backgroundColor = 'yellow';  // 修改背景颜色
  </script>
</body>
</html>

5. 在页面中插入 HTML

有时需要将 HTML 插入到现有的 DOM 元素之前、之后或内部。例如，我们可以使用 insertAdjacentHTML() 插入新的 HTML 代码。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Insert HTML</title>
</head>
<body>
  <div id="container">
    <p>Old Paragraph</p>
  </div>

  <script>
    // 插入新的 HTML 元素到 div 中
    const container = document.getElementById('container');
    container.insertAdjacentHTML('beforeend', '<p>New Paragraph Added</p>');  // 在容器的末尾添加
  </script>
</body>
</html>

6. 替换元素的内容

通过 replaceChild() 方法，你可以将一个元素替换为另一个元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Replace Element</title>
</head>
<body>
  <div id="container">
    <p id="oldPara">This is the old paragraph.</p>
  </div>

  <script>
    // 创建新的元素
    const newPara = document.createElement('p');
    newPara.innerText = 'This is the new paragraph.';

    // 替换旧的元素
    const container = document.getElementById('container');
    const oldPara = document.getElementById('oldPara');
    container.replaceChild(newPara, oldPara);
  </script>
</body>
</html>

总结

JavaScript DOM 提供了对网页内容的动态操作能力，允许你修改 HTML 元素的内容、样式、属性以及结构。
通过 innerHTML, innerText, setAttribute(), createElement(), appendChild(), removeChild() 等方法，我们可以灵活地改变网页内容。
通过这些方法，可以使网页内容响应用户的交互，提升用户体验。

更多详细内容请关注其他相关文章。