JavaScript HTML DOM导航「总结分享」-猿码集

1. 前言

在前端开发中，JavaScript 是我们必须掌握的语言之一，而 JavaScript 中的 DOM 操作更是开发过程中不可或缺的技能。本文将介绍 JavaScript 中的 HTML DOM 导航相关知识，包括如何寻找节点、如何获取节点属性、如何创建节点等。

2. 如何寻找节点

2.1 getElementById

getElementById 方法用来根据 id 属性获取指定的元素。例如，假设页面中有一个 id 为 myElement 的元素，我们可以使用以下代码获取该元素：

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

上述代码将返回一个表示 myElement 元素的对象，我们可以通过这个对象进一步操作该元素。

需要注意的是：getElementById 方法只能获取具有唯一 id 属性的元素，如果页面中有多个元素使用相同的 id，那么该方法只会返回其中的一个。

2.2 getElementsByTagName

getElementsByTagName 方法用来根据标签名获取元素，例如：

var elements = document.getElementsByTagName("div");

以上代码将返回一个 NodeList 对象，表示页面中 name 为 div 的所有元素。我们可以通过遍历 NodeList 来操作选择到的所有元素。

需要注意的是：getElementsByTagName 方法返回的是 NodeList 对象，该对象类似于数组，但并不是真正的数组，因此不能使用数组的方法对其进行操作。如果我们需要使用数组的方法，可以通过将 NodeList 转换为数组来实现。

2.3 getElementsByClassName

getElementsByClassName 方法用来根据 class 名称选择元素，例如：

var elements = document.getElementsByClassName("myClass");

以上代码将返回一个 NodeList 对象，表示所有 class 名称为 myClass 的元素。我们可以通过遍历 NodeList 来操作选择到的所有元素。

需要注意的是：与 getElementsByTagName 方法类似，getElementsByClassName 方法返回的也是 NodeList 对象。

2.4 querySelector

querySelector 方法用来根据选择器选择元素，例如：

var element = document.querySelector("#myElement");

以上代码中，选择器 #myElement 表示选择 id 属性为 myElement 的元素，函数将返回该元素对象。需要注意的是，querySelector 方法返回的仅仅是选择器匹配的第一个元素对象，如果需要选择所有匹配的元素对象，应该使用 querySelectorAll 方法。

3. 如何获取节点属性

在 HTML 中，元素节点拥有一系列属性，例如 id、class、style 等，我们可以使用 JavaScript 代码获取这些属性值。

3.1 获取属性值

我们可以使用 DOM 元素的 getAttribute 方法获取元素的指定属性值，例如：

var element = document.getElementById("myElement");
var value = element.getAttribute("class");

上述代码将获取 myElement 元素的 class 属性值，并将其存储在变量 value 中。

3.2 设置属性值

我们可以使用 DOM 元素的 setAttribute 方法来设置元素的指定属性值，例如：

var element = document.getElementById("myElement");
element.setAttribute("class", "newClass");

上述代码将把 myElement 元素的 class 属性值设置为 newClass。

4. 如何创建节点

在开发过程中，我们经常需要使用 JavaScript 动态创建 HTML 元素节点。可以使用以下两种方式来创建节点：

4.1 document.createElement

我们可以使用 document.createElement 方法创建新元素，例如：

var element = document.createElement("div");
element.setAttribute("id", "newElement");

上述代码将创建一个新的 div 元素，并将其 id 属性设置为 newElement。

4.2 element.appendChild

我们可以使用元素节点的 appendChild 方法把一个节点作为子元素添加到另一个元素中，例如：

var parentElement = document.getElementById("parentElement");
parentElement.appendChild(element);

上述代码将把创建的 element 元素作为 parentElement 元素的子元素添加到 parentElement 元素中。

5. 总结

本文介绍了 JavaScript 中的 HTML DOM 导航相关知识，包括如何寻找节点、如何获取节点属性、如何创建节点等。掌握这些知识对于开发 Web 应用程序来说至关重要，希望读者通过本文的介绍，能够更好地理解和掌握相关技术。

JavaScript HTML DOM导航「总结分享」