Greasemonkey脚本如何向上遍历嵌套DOM链隐藏指定article元素

核心逻辑 #

你已经可以定位到挂载目标::before伪元素的DOM节点，只需要沿DOM树向上查找匹配itemprop="listItemElement"属性的<article>祖先节点，对其设置隐藏样式即可。

注意：::before是CSS伪元素，不属于真实DOM节点，所有DOM导航操作都要在承载该伪元素的真实HTML元素（即你给出结构中的<span>）上执行。

最简实现 #

直接对你已经获取到的目标伪元素宿主元素调用原生closest()方法即可，这个API会自动从当前元素开始逐级向上匹配父节点，返回第一个符合选择器规则的祖先元素，不需要手写循环遍历parentNode：

// 假设targetSpan是你已经获取到的、挂载了目标::before伪元素的span节点
const targetArticle = targetSpan.closest('article[itemprop="listItemElement"]');
if (targetArticle) {
  // 按需选择隐藏方式
  targetArticle.style.display = 'none'; // 完全隐藏，不占页面空间
  // targetArticle.style.visibility = 'hidden'; // 保留元素占位，仅隐藏内容
}

适配动态加载内容的完整版本 #

如果页面是无限滚动、异步加载的列表，新增的内容块不会被初始逻辑处理，可以加一个DOM监听自动处理新增节点：

// 替换成你已有的、判断元素是否挂载了目标::before伪元素的逻辑
function checkHasTargetPseudo(el) {
  const beforeStyles = window.getComputedStyle(el, '::before');
  // 这里换成你自己的识别规则，比如匹配特定content值、背景图标地址等
  return beforeStyles.content === '"你的目标图标对应content值"';
}

// 初始加载时处理已有内容
function hideMatchedTiles(root = document) {
  // 这里的选择器可以根据你实际的伪元素挂载标签调整，不一定是span
  const allCheckElements = root.querySelectorAll('article[itemprop="listItemElement"] span');
  allCheckElements.forEach(el => {
    if (checkHasTargetPseudo(el)) {
      const tile = el.closest('article[itemprop="listItemElement"]');
      if (tile) tile.style.display = 'none';
    }
  })
}
hideMatchedTiles();

// 监听页面DOM变化，处理后续动态加载的内容
const observer = new MutationObserver(mutations => {
  mutations.forEach(mut => {
    mut.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        hideMatchedTiles(node);
      }
    })
  })
})
observer.observe(document.body, {
  childList: true,
  subtree: true
});

常见问题说明 #

• 不要自己手写while(el = el.parentNode)的循环向上查找，closest()是原生实现的标准API，兼容性覆盖所有现代浏览器，逻辑更简洁不容易出错。
• 如果closest()返回null，说明当前元素不在目标article的嵌套结构内，检查你的伪元素宿主元素定位是否准确即可。
• 不建议用修改class、设置opacity:0的方式隐藏，前者可能被页面原有样式覆盖，后者仍会响应元素交互事件。

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