如何根据孙子标签的innerHTML选择指定父标签ytd-compact-link-renderer？

既然CSS无法通过后代元素的内容反向选择父元素，咱们就得靠JavaScript来搞定这个问题。这里有几种实用的方法，按需选用即可：

方法一：遍历筛选候选元素 #

先获取所有ytd-compact-link-renderer元素，再逐个检查它们内部的孙子标签是否符合条件：

// 拿到所有可能的父元素候选
const linkRenderers = document.querySelectorAll('ytd-compact-link-renderer');

// 遍历筛选出符合条件的元素
const targetElement = Array.from(linkRenderers).find(renderer => {
  const labelElement = renderer.querySelector('yt-formatted-string#label');
  // 先判断标签存在，再检查内容（trim处理避免空格干扰）
  return labelElement && labelElement.innerHTML.trim() === 'Creator studio';
});

// 找到后就可以进行后续操作了
if (targetElement) {
  console.log('成功定位到目标元素:', targetElement);
  // 示例操作：修改样式、添加事件等
  // targetElement.style.border = '2px solid red';
}

方法二：用XPath反向选择父元素 #

XPath支持通过后代元素反向查找父级，写法更简洁：

// 编写XPath表达式，精准匹配目标孙子标签并取最近的父级
const xpathExpression = "//yt-formatted-string[@id='label' and normalize-space(text())='Creator studio']/ancestor::ytd-compact-link-renderer[1]";

// 执行XPath查询
const result = document.evaluate(xpathExpression, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
const targetElement = result.singleNodeValue;

if (targetElement) {
  console.log('通过XPath定位到目标元素:', targetElement);
  // 这里添加你的操作逻辑
}

注：normalize-space用来处理文本中的换行、多余空格，避免因格式问题导致匹配失败。

额外注意：动态加载场景 #

如果目标元素是页面异步加载的（比如YouTube很多内容是动态渲染的），需要用MutationObserver监听DOM变化，等元素出现后再执行筛选：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      // 每次有新节点加载时尝试查找目标
      const targetElement = Array.from(document.querySelectorAll('ytd-compact-link-renderer')).find(renderer => {
        const label = renderer.querySelector('yt-formatted-string#label');
        return label && label.innerHTML.trim() === 'Creator studio';
      });
      if (targetElement) {
        console.log('动态加载后找到目标元素:', targetElement);
        // 找到后可以停止监听，避免重复执行
        observer.disconnect();
      }
    }
  });
});

// 开始监听整个页面的DOM变化
observer.observe(document.body, { childList: true, subtree: true });

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