在前端开发中，我们经常需要根据一些特殊的需求来选择特定的元素进行处理。其中，一个常见的需求是获取所有元素名以某个特定字符串开头的元素。
方法一: 使用 querySelectorAll() 方法
可以使用 querySelectorAll() 方法结合 CSS 选择器来选择所有满足条件的元素。针对以某个字符串开头的元素，可以使用属性选择器 [attribute^=value] 来选择指定属性值以某个字符串开头的元素。
例如，如果我们想选择所有 name 属性以 "foo" 开头的元素，可以使用下面的代码：
const elements = document.querySelectorAll('[name^="foo"]');该代码会选择所有具有 name 属性且值以 "foo" 开头的元素，并返回一个 NodeList 对象。如果没有匹配的元素，该对象将为空。
需要注意的是，这种方法只能基于元素的属性选择器来查找元素，并且需要浏览器支持 CSS3 选择器。
方法二: 遍历 DOM 树
另一种方法是通过遍历整个 DOM 树来查找符合要求的元素。可以使用递归函数来深度遍历每个节点，并判断其标签名称是否以指定字符串开头。
以下是使用递归函数遍历 DOM 树并查找所有标签名称以 "foo" 开头的元素的示例代码：
-- -------------------- ---- -------
-------- ------------------------------ ------- -
----- -------- - ---
-- ------------- -- ---------------------------------------------- -
--------------------
-
--- ---- - - -- - - --------------------- ---- -
----- ------------- - ------------------------------------------ --------
--------------------------------
-
------ ---------
-
----- -------- - --------------------------------------- -------该代码将从 document.body 开始遍历整个 DOM 树，并返回一个数组，包含所有标签名称以 "foo" 开头的元素。需要注意的是，这种方法可能会影响性能，并且容易因为 DOM 结构的复杂性而导致难以维护的代码。
总结
两种方法都可以用来获取以某个字符串开头的所有元素，但具体方法取决于场景和需求。如果只需要选取部分元素，则建议使用第一种方法；如果要对整个 DOM 树进行深度遍历，则建议使用第二种方法。
希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27690