Javascript DOM 选择元素详解

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • 一、原生JavaScript方法
  • • • 1. `document.getElementById(id)`
      • 2. `document.getElementsByTagName(name)`
      • 3. `document.getElementsByClassName(className)`
      • 4. `document.querySelector(selector)`
      • 5. `document.querySelectorAll(selector)`
      • 二、jQuery选择元素
      • • • 1. `$(`selector`)`
          • 三、注意事项

            ---

            在JavaScript中，选择DOM元素是进行网页动态操作的基础。以下是几种常用的元素选择方法，包括原生JavaScript方法和jQuery库（作为一种广泛应用的库）的使用方式。

            一、原生JavaScript方法

            1. document.getElementById(id)

            根据元素ID选择一个元素。

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

            2. document.getElementsByTagName(name)

            根据标签名选择所有匹配的元素。

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

            3. document.getElementsByClassName(className)

            根据类名选择所有匹配的元素。

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

            4. document.querySelector(selector)

            返回文档中匹配指定CSS选择器的第一个元素。

            var element = document.querySelector(".myClass #specificId");

            5. document.querySelectorAll(selector)

            返回文档中匹配指定CSS选择器的所有元素，返回的是NodeList对象。

            var elements = document.querySelectorAll("p.myClass");

            二、jQuery选择元素

            jQuery提供了更简洁的API来选择DOM元素，前提是你已经在项目中引入了jQuery库。

            1. $(selector)

            使用CSS选择器来选择元素。

            var $element = $("#myElementId");var $elements = $(".myClass");

            三、注意事项

            • 性能：尽可能使用ID选择，因为它是最快的。类名和标签名选择会遍历更多的元素，而CSS选择器查询（querySelector系列）在复杂选择器上可能有性能损耗。
            • 兼容性：虽然大多数现代浏览器都支持上述原生方法，但旧版浏览器（如IE6-8）可能不完全支持getElementsByClassName和querySelector系列方法。使用时需考虑兼容性问题。
            • 返回类型：原生方法中，getElementById返回单个元素，getElementsByTagName和getElementsByClassName返回HTMLCollection集合，而querySelector返回第一个匹配的元素，querySelectorAll返回NodeList集合。jQuery方法总是返回jQuery对象，即使只匹配到一个元素。
            • 链式操作：jQuery允许链式调用，使得代码更简洁，而原生JavaScript需要逐行操作。

              选择元素是进行DOM操作的第一步，正确且高效地选择元素对于提高网页应用的性能和用户体验至关重要。