DOM 元素

在 Web 开发中，DOM（文档对象模型）是一个非常重要的概念。DOM 元素是构成网页结构的基本单位，通过操作 DOM 元素，我们可以实现对网页内容的动态修改和交互。

获取 DOM 元素

要操作一个 DOM 元素，首先需要获取到它。在 JavaScript 中，可以使用 document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName() 等方法来获取 DOM 元素。下面是一个简单的示例：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>DOM 元素示例</title>
</head>
<body>
    <div id="container">
        <p class="content">Hello, World!</p>
    </div>

    <script>
        // 通过 id 获取元素
        var container = document.getElementById('container');
        console.log(container);

        // 通过 class 获取元素
        var content = document.getElementsByClassName('content');
        console.log(content);

        // 通过标签名获取元素
        var paragraphs = document.getElementsByTagName('p');
        console.log(paragraphs);
    </script>
</body>
</html>

操作 DOM 元素

一旦获取到了 DOM 元素，就可以对它进行各种操作，比如修改元素的属性、样式、内容等。下面是一些常见的操作：

修改元素内容

var container = document.getElementById('container');
container.innerHTML = 'Hello, JavaScript!';

修改元素样式

var content = document.getElementsByClassName('content')[0];
content.style.color = 'red';
content.style.fontSize = '20px';

添加子元素

var newElement = document.createElement('p');
newElement.innerHTML = 'This is a new paragraph.';
container.appendChild(newElement);

删除元素

var paragraphs = document.getElementsByTagName('p');
container.removeChild(paragraphs[0]);

通过以上操作，我们可以实现对 DOM 元素的增删改查，从而实现丰富的网页交互效果。DOM 元素的操作是前端开发中的基础，掌握好这些操作方法将有助于提高网页开发的效率和灵活性。