用正则表达式的querySelectorAll by id - Javascript

在Javascript中，我们经常需要用到DOM操作来获取网页元素并进行操作。querySelectorAll方法是其中一个常用的方法，它可以用CSS选择器语法来查询DOM元素，并返回一个NodeList对象，一般用于获取多个匹配的元素。

然而，querySelectorAll方法只支持使用选择器来查询元素，而不支持使用ID来查询。为此，可以使用正则表达式来达到目的。

首先，我们需要先获取所有的DOM元素，然后使用正则表达式来匹配其ID属性值。具体实现代码如下：

function querySelectorAllById(id) {
  var elements = document.getElementsByTagName('*');
  var regex = new RegExp('(^|\\s)' + id + '(\\s|$)');
  var matches = [];
 
  for (var i = 0; i < elements.length; i++) {
    if (regex.test(elements[i].id)) {
      matches.push(elements[i]);
    }
  }
 
  return matches;
}

在这里，我们首先使用document.getElementsByTagName方法获取了所有的DOM元素。然后，我们使用正则表达式来匹配ID属性值，其中：

• (^|\s)：代表ID属性值应该是字符串的开头或包含一个空格；
• id：代表我们要查找的ID值；
• (\s|$)：代表ID属性值应该是字符串的结尾或包含一个空格。

这样就可以筛选出所有匹配的元素并存储在一个数组中返回。

下面是一个例子，我们想获取ID为"example"的元素并改变它的innerHTML：

var matches = querySelectorAllById('example');

for (var i = 0; i < matches.length; i++) {
  matches[i].innerHTML = 'Hello, world!';
}

这将会获取所有ID为"example"的元素并改变它们的innerHTML为"Hello, world!"。

总结：

• querySelectorAll方法只能使用CSS选择器语法来查询元素；
• 如果要使用ID来查询，可以使用正则表达式来实现；
• 使用正则表达式需要注意ID值的前后空格，以保证精确匹配；
• 使用querySelectAllById方法可以快速地筛选出匹配ID的DOM元素。