JavaScript DOM基础操作实用案例

技术文摘

2025-01-01 21:25:41 小编

在网页开发中，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操作

万千站长工具

技术文摘

JavaScript DOM基础操作实用案例

欢迎使用万千站长工具！