在这个练习中，我们将通过一些简单的DOM操作来增强你的JavaScript技能。以下是一些基本任务，帮助你熟悉DOM元素的选择和操作。
任务列表
- 查找元素 - 使用
getElementById和getElementsByClassName方法找到特定的DOM元素。 - 修改内容 - 更改元素的文本内容和样式。
- 添加元素 - 创建新的DOM元素，并将其插入到页面中。
- 删除元素 - 删除不需要的DOM元素。
图片示例
代码示例
以下是一个简单的HTML页面，你可以在这个页面上进行DOM操作：
<!DOCTYPE html>
<html>
<head>
<title>DOM Exercise 4</title>
</head>
<body>
<h1>欢迎来到DOM练习</h1>
<p id="welcome-message">请修改我</p>
<button onclick="changeText()">点击我</button>
<script>
function changeText() {
var message = document.getElementById('welcome-message');
message.innerHTML = '你点击了按钮！';
message.style.color = 'red';
}
</script>
</body>
</html>
扩展阅读
想要了解更多关于DOM操作的知识，可以阅读我们的DOM操作指南。
---
# DOM Exercise 4: Practice Your DOM Skills
In this exercise, we will enhance your JavaScript skills through some simple DOM manipulations. Below are some basic tasks to help you familiarize yourself with DOM element selection and manipulation.
## Task List
1. **Find Elements** - Use `getElementById` and `getElementsByClassName` methods to find specific DOM elements.
2. **Modify Content** - Change the text content and styles of elements.
3. **Add Elements** - Create new DOM elements and insert them into the page.
4. **Remove Elements** - Delete unnecessary DOM elements.
## Image Example
<center><img src="https://cloud-image.ullrai.com/q/DOM_element_handling/" alt="DOM element handling"/></center>
## Code Example
Here is a simple HTML page where you can perform DOM operations:
```html
<!DOCTYPE html>
<html>
<head>
<title>DOM Exercise 4</title>
</head>
<body>
<h1>Welcome to the DOM Exercise</h1>
<p id="welcome-message">Please modify me</p>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
var message = document.getElementById('welcome-message');
message.innerHTML = 'You clicked the button!';
message.style.color = 'red';
}
</script>
</body>
</html>
Extended Reading
For more information on DOM manipulation, check out our DOM Manipulation Guide.