技术文摘
JavaScript DOM基础操作实用案例
JavaScript DOM基础操作实用案例
在网页开发中，JavaScript的DOM（文档对象模型）操作至关重要。它允许开发者通过JavaScript与HTML文档进行交互，实现动态网页效果。下面通过几个实用案例来介绍JavaScript DOM的基础操作。
案例一：修改元素内容
假设我们有一个HTML页面，其中包含一个<p>标签，其id为demo，初始内容为“Hello World”。我们可以使用JavaScript来修改这个元素的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="demo">Hello World</p>
<script>
const element = document.getElementById('demo');
element.textContent = 'New Content';
</script>
</body>
</html>
在上述代码中，我们首先通过getElementById方法获取到指定的元素，然后修改其textContent属性。
案例二：添加元素
如果我们想要在页面中动态添加一个新的元素，比如一个新的<li>标签到一个<ul>列表中，可以这样做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul id="myList">
<li>Item 1</li>
</ul>
<script>
const list = document.getElementById('myList');
const newItem = document.createElement('li');
newItem.textContent = 'Item 2';
list.appendChild(newItem);
</script>
</body>
</html>
这里我们先创建一个新的<li>元素，设置其内容，然后通过appendChild方法将其添加到列表中。
案例三：修改元素样式
我们还可以通过JavaScript来修改元素的样式。例如，改变一个元素的背景颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="myDiv">This is a div</div>
<script>
const div = document.getElementById('myDiv');
div.style.backgroundColor = 'blue';
</script>
</body>
</html>
通过操作DOM，我们可以轻松实现各种动态网页效果，提升用户体验。掌握这些基础操作，是进一步深入学习JavaScript网页开发的重要基础。
TAGS: JavaScript 实用案例 基础操作 DOM操作