在 web 前端开发中，我们经常需要操作页面上的 DOM 元素，以实现各种功能。而要选择特定的 DOM 元素，我们可以使用 querySelector() 方法。这个方法可以帮助我们通过 CSS 选择器来快速定位到我们需要的元素。
querySelector() 方法的基本语法
--- ------- - ---------------------------------
selector是一个字符串，表示要选择的元素的 CSS 选择器。
querySelector() 方法的用法
选择单个元素
使用 querySelector() 方法可以选择页面上匹配指定 CSS 选择器的第一个元素。如果没有找到匹配的元素，则返回 null。
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
---------------------- ----------
-------
------
---- ---------------
-- ------------------- ----------
------
--------
--- ------- - --------------------------------
------------------------------- -- --------- ------
---------
-------
-------在上面的示例中，我们使用 querySelector() 方法选择了 class 为 "text" 的元素，并输出了其文本内容。
选择多个元素
如果我们需要选择多个匹配的元素，可以使用 querySelectorAll() 方法。
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------------------- ----------
-------
------
----
--------------
---------------
---------------
-----
--------
--- -------- - --------------------------------
---------------------------------- -
-------------------------------
---
---------
-------
-------在上面的示例中，我们使用 querySelectorAll() 方法选择了所有的 <li> 元素，并输出了它们的文本内容。
总结
通过 querySelector() 方法，我们可以方便地选择页面上的 DOM 元素，从而实现各种功能。在实际开发中，熟练掌握这个方法可以提高我们的开发效率。希望本文对你有所帮助！