正文

轻松掌握JS操作DOM：从基础到实战，让你的网页动起来

/0 浏览量
0813

在Web开发的世界里，JavaScript（简称JS）是让网页动起来的魔法师。DOM（文档对象模型）则是JavaScript的舞台，通过操作DOM，我们可以实现页面元素的增删改查，让网页充满活力。本文将带你从基础到实战，轻松掌握JS操作DOM的技巧。

一、认识DOM

首先，让我们来认识一下DOM。DOM是HTML或XML文档的树形结构表示，它把文档中的每个元素都转换成了一个对象。通过JavaScript操作这些对象，就可以实现对页面的控制。

1.1 DOM树

DOM树由节点组成，节点分为元素节点、文本节点、属性节点等。以下是一个简单的HTML文档对应的DOM树结构：

<!DOCTYPE html>
<html>
<head>
    <title>DOM树示例</title>
</head>
<body>
    <div id="app">
        <h1>DOM树</h1>
        <p>这是一个文本节点。</p>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
        </ul>
    </div>
</body>
</html>

1.2 节点类型

  • 元素节点：代表HTML标签，如<div>、<p>等。
  • 文本节点：代表元素中的文本内容。
  • 属性节点：代表元素的属性，如id、class等。

二、获取DOM元素

在操作DOM之前，我们需要先获取到对应的DOM元素。以下是一些常用的获取DOM元素的方法：

2.1 通过ID获取

var app = document.getElementById('app');

2.2 通过类名获取

var listItems = document.getElementsByClassName('list-item');

2.3 通过标签名获取

var paras = document.getElementsByTagName('p');

2.4 通过querySelector获取

var h1 = document.querySelector('h1');

2.5 通过querySelectorAll获取

var lis = document.querySelectorAll('li');

三、操作DOM元素

获取到DOM元素后，我们可以对其进行各种操作，如修改内容、修改样式、添加子元素等。

3.1 修改内容

  • innerHTML：获取或设置元素的内容，包括HTML标签。
var h1 = document.querySelector('h1');
h1.innerHTML = '新的标题';
  • textContent：获取或设置元素的文本内容。
var p = document.querySelector('p');
p.textContent = '新的文本内容';

3.2 修改样式

  • style：直接修改元素的样式。
var app = document.getElementById('app');
app.style.color = 'red';

3.3 添加子元素

  • createElement：创建一个新的元素节点。
var li = document.createElement('li');
li.textContent = '列表项3';
var ul = document.querySelector('ul');
ul.appendChild(li);

3.4 删除子元素

  • removeChild：删除元素的子元素。
var ul = document.querySelector('ul');
ul.removeChild(li);

四、实战案例：制作一个简单的下拉菜单

以下是一个简单的下拉菜单制作案例，我们将使用DOM操作来实现：

<!DOCTYPE html>
<html>
<head>
    <title>下拉菜单</title>
</head>
<body>
    <select id="menu">
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
    </select>
    <script>
        var menu = document.getElementById('menu');
        menu.addEventListener('change', function() {
            alert('选中的选项：' + this.value);
        });
    </script>
</body>
</html>

在这个案例中，我们创建了一个下拉菜单，并为它添加了一个change事件监听器。当用户选择一个选项时，会弹出一个提示框显示选中的选项值。

五、总结

通过本文的学习，相信你已经对JS操作DOM有了初步的了解。在实际开发中，DOM操作是必不可少的技能。希望这篇文章能帮助你更好地掌握DOM操作，让你的网页更加生动有趣。

-- 展开阅读全文 --