DOM操作的概念和作用-编程入门课：Javascript从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：Javascript从入门到实战

DOM（Document Object Model）是一种表示HTML或XML文档的标准编程接口，它将文档解析为由节点和对象（例如元素、文本、属性）组成的树形结构，使得开发人员可以使用JavaScript等脚本语言动态地修改文档的内容、结构和样式。

JavaScript中的DOM操作主要包括以下内容：

获取元素：使用document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()等方法获取HTML页面中的元素。
```
const element1 = document.getElementById('my-element');
const elements2 = document.getElementsByTagName('input');
const elements3 = document.getElementsByClassName('my-class');
```
修改元素的内容和属性：使用element.innerHTML、element.textContent、element.setAttribute()、element.style等属性和方法修改元素的内容和属性。
```
const element = document.getElementById('my-element');
element.innerHTML = '<strong>Hello World!</strong>';
element.setAttribute('data-value', '123');
element.style.color = 'red';
```
添加和删除元素：使用element.appendChild()、element.insertBefore()、element.removeChild()等方法添加和删除元素。
```
const parent = document.getElementById('parent-element');
const child = document.createElement('div');
child.textContent = 'New Element';
parent.appendChild(child);
parent.removeChild(child);
```
监听事件：使用element.addEventListener()方法监听HTML页面中的事件，例如click、input、submit等事件。
```
const element = document.getElementById('my-element');
element.addEventListener('click', function() {
  console.log('Clicked!');
});
```
代码示例

让我们看一下如何在JavaScript中使用DOM操作来修改HTML页面。下面是一个示例代码：

```
<!DOCTYPE html>
<html>
<head>
  <title>DOM Example</title>
  <style>
    #my-element {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>DOM Example</h1>
  <div id="my-element">Hello World!</div>
  <button id="my-button">Click me!</button>
  <script>
    // 获取元素
    const element = document.getElementById('my-element');
    const button = document.getElementById('my-button');

// 修改元素的内容和属性
    element.innerHTML = '<strong>Hello World!</strong>';
    element.setAttribute('data-value', '123');
    element.style.color = 'red';

// 添加和删除元素
    const parent = document.body;
    const child = document.createElement('div');
    child.textContent = 'New Element';
    parent.appendChild(child);
    parent.removeChild(child);

// 监听事件
    button.addEventListener('click', function() {
      console.log('Clicked!');
    });
  </script>
</body>
</html>
```
在这个示例中，我们首先获取了HTML页面中的元素，然后使用DOM操作来修改它们的内容、属性和样式。我们还添加了一个新的元素，并在点击按钮时输出一条消息。通过这些操作，我们可以很方便地使用JavaScript来动态地修改HTML页面的内容和样式，从而实现更加丰富和交互的Web应用程序。