JS 获取 DOM
约 571 字大约 2 分钟
2025-01-21
在JavaScript中，有多种方式可以获取DOM元素。以下是一些常用的方法：
getElementById(id): 该方法返回具有指定ID的元素。
var element = document.getElementById("myElementId");getElementsByClassName(className): 该方法返回一个包含具有指定类名的所有元素的NodeList。
var elements = document.getElementsByClassName("myClassName");getElementsByTagName(tagName): 该方法返回一个包含所有指定HTML标签的元素的NodeList。
var elements = document.getElementsByTagName("p");querySelector(selector): 该方法返回文档中匹配指定CSS选择器的第一个Element元素。
var element = document.querySelector(".myClassName");querySelector相对于其他方式的优势主要在于以下几个方面：
查询灵活性：querySelector遵循CSS选择器规范，开发者可以利用自己熟悉的CSS语法快速定位到目标元素。这种灵活性使得在复杂的DOM结构中查找元素变得更容易。 查询效率：querySelector返回的是第一个匹配的节点，避免了多次遍历文档树，提高了查询效率。特别是在处理大型DOM树时，这种优势更加明显。 简洁性：querySelector的语法相对简洁，只需要一个函数调用就能完成对DOM元素的查找，而不需要像getElementById或getElementsByClassName那样需要额外的条件语句。 然而，需要注意的是，querySelector也有一些局限性。例如，它只能返回第一个匹配的元素，而无法处理多个匹配的元素。此外，它返回的是一个静态的DOM节点，如果后续的DOM变更导致该元素不存在或改变了位置，需要重新查询。因此，在某些情况下，使用其他方法如getElementById或getElementsByClassName可能更合适。
querySelectorAll(selector): 该方法返回文档中匹配指定CSS选择器的所有Element元素的NodeList。
var elements = document.querySelectorAll(".myClassName");以上方法都可以通过 document 对象来调用。此外，还有很多其他的方法和技术可用于获取和操作DOM元素，例如使用DOM遍历和查找方法，或者通过事件处理程序访问事件目标。