原生JS与jQuery获取DOM元素的方法对比

本文深入解析原生JavaScript与jQuery在获取页面元素方面的具体差异，通过详细的代码示例进行说明，旨在为开发者提供具有参考价值的学习资料。

对于初学jQuery的开发者而言，容易混淆原生JS与jQuery获取元素的操作方式，进而导致后续获取属性或执行方法时出现错误。本文对两者的获取元素代码进行了整理与对比。

原生JavaScript获取元素的方法

一、原生JavaScript获取元素的方法。

1. 常用的三种方式用于获取元素对象，即将指定的HTML元素封装为DOM对象：

（1）通过元素的ID属性获取：使用document.getElementById()方法，具体示例如下：

在浏览器控制台中输出结果，如下图所示：

从输出结果可以看出，我们成功获取了ID为div1的元素代码。

（2）通过元素的标签名获取：使用document.getElementsByTagName()方法，该方法以数组形式返回匹配的元素，具体示例如下：

控制台输出结果如下：

结果显示我们获取到了两个ul标签下的所有li元素，并以数组形式呈现。如果希望仅获取指定位置的li，例如只获取第一个ul下的li，该如何操作？

这需要结合前述通过ID获取元素的方法来实现，具体实例如下：

控制台输出结果如下：

通过上述方式，我们成功获取了第一个ul下的li元素，且未包含第二个ul中的li。

（3）通过元素的类名获取：使用document.getElementByClassName()方法；该方法同样返回一个数组，示例如下：

控制台输出结果：

通过上述方式，我们成功获取了类名为sp的元素。

jQuery获取元素的方法

二、jQuery获取元素的方法。

1. jQuery获取元素的代码语法比原生JavaScript更加简洁。在前述原生JS获取元素的代码中，我们发现代码相对较长；

jQuery提供了一个工厂函数：$()；通过“$(参数)”的形式，我们可以创建jQuery的实例对象（即jQuery对象）；

jQuery提供了多种选择器供我们获取元素，此处列举常见的三种选择器：

（1）ID选择器（返回单个元素）

查看控制台输出结果：

可以看到，div1元素被封装成了一个jQuery对象。

（2）类选择器（返回元素集合），根据类名匹配元素；

（3）元素选择器（返回元素集合），根据元素标签名匹配元素；

关于JS和jQuery获取元素的区别，分享到此结束。

如果文中存在错误之处，欢迎大家指正！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。