JS模糊效果函数仅作用于最高层级blockquote/div，如何适配所有元素？

这问题我太熟了！核心原因其实很直白——你代码里用的document.querySelector()只会抓取页面中第一个匹配到的元素，所以只有最靠前的那个blockquote生效，其他嵌套或后续的元素都被直接忽略了。

解决步骤 #

要让效果作用于所有目标元素，只需要两步调整：

1. 替换元素获取方式：把querySelector换成querySelectorAll，它会返回页面中所有符合选择器的元素集合（NodeList）。
2. 遍历处理每个元素：用循环遍历这个集合，对每个元素单独执行模糊效果的逻辑。

修复后的完整代码 #

我补全了你没写完的部分（假设你是要把文字拆分成单个字符并添加模糊过渡效果），你可以参考：

function splitWords() {
  // 获取页面中所有blockquote下的q元素（如果是所有blockquote，就改成"blockquote"）
  const targetElements = document.querySelectorAll("blockquote q");
  
  // 遍历每个元素，逐个处理
  targetElements.forEach(element => {
    // 第一步：清理文本中的HTML标签（你的原逻辑）
    const cleanText = element.innerText.replace(/(<([^>]+)>)/ig, "");
    
    // 第二步：拆分文字并添加模糊样式（这里是示例逻辑，你可以根据需求调整）
    const blurredContent = cleanText.split("").map(char => {
      // 给每个字符包裹带模糊效果的span，加上过渡动画更自然
      return `<span style="filter: blur(2px); transition: filter 0.3s ease;">${char}</span>`;
    }).join("");
    
    // 第三步：把处理后的内容放回元素
    element.innerHTML = blurredContent;
  });
}

// 页面加载完成后执行函数
window.addEventListener("load", splitWords);

额外说明 #

• 如果你的目标元素是所有div或者其他选择器，只需要修改querySelectorAll里的参数即可，比如document.querySelectorAll("div.your-class")（指定类的div）。
• 如果你原本的模糊逻辑不是拆分字符，只需要把blurredContent的生成部分换成你自己的代码就行，核心是要在forEach循环里处理每个元素。

内容的提问来源于stack exchange，提问作者sawnic rawcer