使用 document.querySelectorAll 提取所有 href 元素 - JavaScript

在 JavaScript 中，可以使用 document.querySelectorAll 方法来选择 HTML 文档中的元素。该方法接受一个选择器字符串作为参数，并返回符合该选择器的所有元素。

如果我们想要提取 HTML 文档中所有包含 href 属性的元素，可以使用以下代码：

const hrefElements = document.querySelectorAll('[href]');

该代码使用属性选择器 [href] 来匹配所有具有 href 属性的元素，并将匹配的结果存储在 hrefElements 变量中。

接下来，我们可以通过遍历 hrefElements 变量来访问每个匹配的元素，并获取它们的 href 属性值：

const hrefValues = [];

hrefElements.forEach((element) => {
  const hrefValue = element.getAttribute('href');
  hrefValues.push(hrefValue);
});

该代码使用 forEach 方法遍历 hrefElements 变量中的每个元素，并获取它们的 href 属性值。然后，将这些值依次添加到 hrefValues 数组中。

最终，我们可以将这些 href 值用逗号分隔的字符串输出：

const hrefString = hrefValues.join(', ');
console.log(hrefString);

完整代码如下：

const hrefElements = document.querySelectorAll('[href]');

const hrefValues = [];

hrefElements.forEach((element) => {
  const hrefValue = element.getAttribute('href');
  hrefValues.push(hrefValue);
});

const hrefString = hrefValues.join(', ');
console.log(hrefString);

使用该代码片段，您可以轻松提取 HTML 文档中所有 href 元素，并对它们进行处理。