如何用TypeScript查找并隐藏HTML中title为Add的按钮？

你碰到的myNodeList1.length返回0，核心原因是代码执行时机不对——如果脚本在DOM还没渲染完成时就运行，document.querySelectorAll('div.edittoolbar div.btn-group')找不到目标元素，nodes.item(0)会是null，自然childNodes长度为0。另外，childNodes会包含换行、空格这类文本节点，你给它标注NodeListOf<Element>类型也不准确，应该用children（只返回元素节点），但这不是导致长度为0的主要原因。

下面给两种可行的解决方式：

方法一：直接定位目标按钮（最简洁） #

不用绕弯子遍历父节点，直接用CSS属性选择器找到title为"Add"的按钮，然后隐藏：

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 直接定位目标按钮，指定类型为HTMLButtonElement
  const addButton = document.querySelector<HTMLButtonElement>('button[title="Add"]');
  if (addButton) {
    // 隐藏按钮，两种方式二选一
    addButton.style.display = 'none';
    // 或者用 addButton.hidden = true;
  }
});

方法二：修正你原有的遍历逻辑 #

如果非要按你原来的思路遍历父节点下的按钮，调整两点即可：

1. 确保代码在DOM加载完成后执行
2. 用children代替childNodes（仅获取元素节点），并修正类型标注：

document.addEventListener('DOMContentLoaded', () => {
  const nodes = document.querySelectorAll('div.edittoolbar div.btn-group');
  if (nodes.length > 0) {
    // children返回HTMLCollectionOf<Element>，只包含元素节点
    const buttonElements = nodes[0].children;
    console.log(buttonElements.length); // 现在会返回3
    // 遍历找到title为Add的按钮
    for (let i = 0; i < buttonElements.length; i++) {
      const btn = buttonElements[i] as HTMLButtonElement;
      if (btn.title === 'Add') {
        btn.style.display = 'none';
        break;
      }
    }
  }
});

额外提示 #

• 脚本尽量放在<body>标签的末尾，这样DOM元素已经渲染完成，不需要额外监听DOMContentLoaded事件。
• TypeScript中用querySelector<HTMLButtonElement>可以直接获取按钮类型，避免手动类型断言。

内容的提问来源于stack exchange，提问作者ngoc tuan nguyen