如何使用JavaScript修改DOM元素：综合指南
#javascript #教程 #browser

入门

在我们潜入使用JavaScript操纵文档对象模型（DOM）之前，让我们确保我们拥有正确的设置。您将需要一个现代的Web浏览器，例如Google Chrome，Mozilla Firefox或Safari，以及文本编辑器，例如Sublime Text，Visual Studio Code或Atom。如果您安装了这些工具，则全部设置为开始。

JavaScript是一种解释的语言，这意味着它直接在浏览器中执行，您不需要任何特殊工具即可编译它。要将JavaScript添加到网页中，您只需要在HTML文档中的<script>标签之间插入它。

<!DOCTYPE html>
<html>
<head>
    <title>My first JavaScript web page</title>
</head>
<body>
    <script>
        alert("Hello, World!");
    </script>
</body>
</html>

在此示例中，我们使用了一个简单的JavaScript命令来显示一个带有消息“ Hello，World！”的警报框。现在，让我们进入核心主题：dom。

了解DOM元素

DOM代表文档对象模型。它是HTML和XML文档的编程接口，以树状格式表示文档的结构。该树状结构中的每个节点是代表文档元素，属性或文本的一部分的对象。 DOM允许诸如JavaScript之类的语言动态交互和操纵页面。

DOM树中的每个节点与其他节点都有关系。节点可以带有父节点，子节点和兄弟姐妹节点，形成一个节点的家谱。通过了解此层次结构，您可以从一个节点到另一个节点，并针对要操纵的特定元素。

使用JavaScript访问DOM元素

JavaScript提供了一组访问DOM元素的方法。这是最常用的：

  • getElementById(id)：此方法通过其唯一ID检索对元素的引用。
  • getElementsByClassName(name)：此方法检索一个包含指定类名称的所有元素的节点。
  • getElementsByTagName(name)：此方法检索一个包含指定标签名称的所有元素的节点。
  • querySelector(selector)：此方法检索与指定CSS选择器匹配的第一个元素。
  • querySelectorAll(selector)：此方法检索与指定CSS选择器匹配的所有元素。

这是通过ID访问元素的示例：

let element = document.getElementById("myElement");

document对象表示您的网页。如果要使用JavaScript访问DOM元素，则将使用document对象。

用JavaScript操纵DOM元素

访问元素后，您可以操纵它。这是一些基本的操作：

  • 使用innerText或textContent属性更改元素的文本。
  • 使用innerHTML属性更改元素的HTML内容。
  • 使用setAttribute()或removeAttribute()方法添加或删除属性。

示例：

let element = document.getElementById("myElement");
element.innerText = "New text for my element";
element.setAttribute("class", "myClass");

在此示例中，我们选择了一个带有“ myelement”的元素，更改了文本并添加了类属性。

使用样式和课程

JavaScript还可以操纵HTML元素的样式和类别。您可以做到这一点：

  • 使用style属性来操纵元素的内联样式。例如：element.style.color = "red";
  • 使用classList来操纵元素的类。 classList对象具有add()，remove()和toggle()之类的方法。

示例：

let element = document.getElementById("myElement");
element.style.color = "red";
element.classList.add("highlight");

在此示例中，我们将“ myelement”的文本颜色更改为红色，并在其中添加了“突出显示”类。

高级DOM操纵技术

文档范围

DocumentFragment是没有父母的最小文档对象。它被用作Document的轻量级版本，并通过最大程度地减少网页回流（重新计算文档中元素位置的过程）来提高性能。它使我们能够在内存中撰写文档的一部分，然后根据需要将其附加到文档中。

let fragment = document.createDocumentFragment();

let li;
for (let i = 0; i < 10; i++) {
    li = document.createElement("li");
    li.innerText = `Item ${i}`;
    fragment.appendChild(li);
}

document.getElementById("myList").appendChild(fragment);

在此示例中，我们使用DocumentFragment添加了10个列表项目。

穿越DOM树

有几种允许穿越DOM树的属性：

  • parentNode：选择当前元素的父。
  • children：返回元素的子元素的集合。
  • firstElementChild和lastElementChild：选择当前元素的第一个和最后一个孩子。
  • nextElementSibling和previousElementSibling：选择当前元素的下一个或上一个兄弟姐妹。 
let parent = document.getElementById("myElement").parentNode;
let children = document.getElementById("myElement").children;

在此示例中，我们已经访问了“骨髓”的父母和孩子。

常见的错误和最佳实践

在您使用JavaScript进行DOM操纵的过程中，必须注意开发人员经常犯的一些常见错误，并遵循编写干净，高效且无错误的代码的最佳实践。

常见错误

1。不检查DOM RESTINSISS ：JavaScript遇到时会立即运行。如果您的JavaScript代码试图操纵尚未加载的DOM元素，则可能导致错误。在运行JavaScript代码之前，请务必确保您的DOM已满载。这可以使用DOMContentLoaded事件来实现，也可以在关闭</body>标签之前放置您的脚本标签。

2。过度使用innerHTML ：innerHTML属性非常方便获取或替换HTML内容。但是，过度使用它会导致性能问题和潜在的跨站点脚本（XS）攻击。使用textContent或innerText来更改元素的文本更有效，createElement，appendChild和removeChild用于更改结构。

3。操纵DOM内部循环：如果您在循环中操纵DOM，则每次迭代的更改可能会导致浏览器重新计算布局并重新粉刷屏幕，这可能是性能密集的。相反，请尝试从DOM上进行所有更改（例如，通过创建文档范围），然后将结果附加到循环后一次。

最佳实践

1。最小化直接操作：每次操纵DOM时，浏览器可能需要重新计算布局并重新粉刷屏幕。这些操作可能是昂贵的，因此最好最大程度地减少您的DOM操纵。与其进行一些小的更改，不如做一个重大改变。文档范围是一个很好的工具。

2。在var上使用const和let ：JavaScript中的var关键字具有令人困惑的范围规则，并且可能导致意外的错误。在现代JavaScript中，最好将const用于不会重新分配的变量，而let则用于变量。

3。将事件委托使用动态元素：如果添加并从域中添加并删除元素，并且您想处理这些元素上的事件，则每次元素更改时，都无法添加和删除事件听众。取而代之的是，将事件侦听器添加到稳定的父元素中，并使用事件对象的target属性来确定与哪个子元素进行交互的。

使用这些技巧和警告说明，您可以避免常见的陷阱，并编写有效，清洁且易于维护的JavaScript代码。永远记住要继续探索新技术和最佳实践，因为网络开发的领域总是在不断发展。

实际例子

现在我们了解了用JavaScript操纵DOM的理论，让我们以一些实际的例子来看看它。

建立动态导航菜单

导航菜单是许多网站上的常见功能。这是您可以使用JavaScript动态构建一个的方法：

<!DOCTYPE html>
<html>
<body>

<ul id="nav"></ul>

<script>
let menuItems = ["Home", "About", "Services", "Contact"];
let nav = document.getElementById("nav");

menuItems.forEach(function(item) {
    let li = document.createElement("li");
    li.textContent = item;
    nav.appendChild(li);
});
</script>

</body>
</html>

在此示例中，我们正在创建一个菜单项的无序列表（<ul>）。我们有一系列菜单项，我们使用forEach迭代此数组。对于每个项目，我们创建一个列表项目（<li>），设置其文本，然后将其附加到<ul>。

创建图像旋转木马

图像轮播是可以手动或自动循环循环的图像的幻灯片。这是如何创建一个的简化版本：

<!DOCTYPE html>
<html>
<body>

<div id="carousel">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
</div>

<script>
let images = Array.from(document.getElementById("carousel").children);
let currentImageIndex = 0;

function rotateImages() {
    images[currentImageIndex].classList.remove("active");
    currentImageIndex = (currentImageIndex + 1) % images.length;
    images[currentImageIndex].classList.add("active");
}

setInterval(rotateImages, 3000);
</script>

</body>
</html>

在此示例中，我们有一个<div>，其中包含多个<img>元素。每3秒钟，我们通过从当前图像中删除“活动”类并将其添加到下一个图像来旋转图像。

通过现场验证制作表格

表单验证是任何形式处理的关键部分。让我们看看如何使用JavaScript实现实时表单验证：

<!DOCTYPE html>
<html>
<body>

<form id="myForm">
    <input type="text" id="username" placeholder="Username">
    <small></small>
    <input type="submit">
</form>

<script>
let form = document.getElementById("myForm");
let username = document.getElementById("username");

username.addEventListener("input", function() {
    if (username.value.length < 5) {
        username.nextElementSibling.textContent = "Username must be at least 5 characters long";
    } else {
        username.nextElementSibling.textContent = "";
    }
});

form.addEventListener("submit", function(event) {
    if (username.value.length < 5) {
        event.preventDefault();
        username.nextElementSibling.textContent = "Username must be at least 5 characters long";
    }
});
</script>

</body>
</html>

在此示例中，我们的表单具有单个输入的用户名。我们使用input事件来聆听输入的任何更改。如果用户名小于5个字符，我们会显示一个错误消息。如果用户名无效，我们还可以防止表单提交。

这些示例显示了JavaScript在操纵DOM以构建动态交互功能时的功能和灵活性。通过实践和进一步的学习，您将能够构建更复杂的功能。愉快的编码！

结论

JavaScript是Web开发的重要语言，在为网站增加交互和动态方面发挥了关键作用。它操纵文档对象模型（DOM）的能力是其最强大的功能之一，使开发人员能够使网站更具吸引力和对用户操作的响应。

在本指南中，我们探讨了DOM的基础知识以及如何使用JavaScript进行交互。我们介绍了从访问和操纵DOM元素到使用样式和课程的各种主题，甚至深入研究了高级技术。此外，我们还强调了一些常见的错误以及遵循的最佳实践。我们通过实用示例进一步增强了我们的理解，例如构建动态导航菜单，创建图像旋转木马并通过实时验证实现表单。

当您继续使用JavaScript旅行时，请记住，掌握DOM操纵需要练习。尝试不同的方法和任务，建立小型项目并继续学习。您编写的每一行代码将使您更近一步，可以精通使用JavaScript来操纵DOM。

通过利用DOM的功能，您将有能力创建丰富，引人入胜的Web应用程序，以提供出色的用户体验。继续探索，继续编码，最重要的是享受旅程！