如何为HTMLCollectionOf、NodeCollection及谷歌自动补全表单设置CSS样式？

嘿，我来帮你搞定这个样式设置的问题！其实不管是HTMLCollectionOf还是NodeListOf，核心思路都是遍历集合里的每个元素，然后逐个设置样式，只是两者的遍历方式略有不同。另外谷歌自动补全的pac-item因为是动态生成的，还有点特殊需要注意，我一步步给你讲：

1. 处理NodeListOf<HTMLElement>（你已经用到的querySelectorAll返回值） #

querySelectorAll返回的NodeListOf在现代浏览器里直接支持forEach方法，所以你可以直接遍历每个元素设置样式，就像这样：

let items = document.querySelectorAll('.pac-item') as NodeListOf<HTMLElement>;
items.forEach(item => {
  // 直接设置inline样式
  item.style.backgroundColor = '#f5f5f5';
  item.style.padding = '10px 12px';
  // 或者更推荐的方式：添加CSS类
  item.classList.add('custom-pac-item');
});

2. 处理HTMLCollectionOf<Element> #

比如getElementsByClassName、getElementsByTagName这类方法返回的是HTMLCollectionOf，它本身没有forEach方法，所以我们需要先把它转换成数组再遍历：

// 假设你拿到的是HTMLCollectionOf<HTMLElement>
let elements = document.getElementsByClassName('your-class') as HTMLCollectionOf<HTMLElement>;

// 方法1：用Array.from转成数组
Array.from(elements).forEach(el => {
  el.style.color = '#333';
  el.classList.add('custom-style');
});

// 方法2：用展开运算符转成数组
[...elements].forEach(el => {
  el.style.borderRadius = '4px';
});

3. 谷歌自动补全pac-item的特殊处理 #

因为谷歌自动补全的pac-item是动态生成的（只有用户输入时才会出现），如果页面初始化时直接调用querySelectorAll可能拿不到元素。这时候可以用MutationObserver来监听容器的变化，一旦新的pac-item被添加，就立即设置样式：

// 创建一个MutationObserver实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否有新节点被添加
    if (mutation.addedNodes.length > 0) {
      const pacItems = document.querySelectorAll('.pac-item') as NodeListOf<HTMLElement>;
      pacItems.forEach(item => {
        // 给新生成的item设置样式
        item.style.fontSize = '14px';
        item.style.borderBottom = '1px solid #eee';
        item.classList.add('custom-pac-item');
      });
    }
  });
});

// 找到谷歌自动补全的容器（通常是.pac-container）
const pacContainer = document.querySelector('.pac-container');
if (pacContainer) {
  // 监听容器的子节点变化
  observer.observe(pacContainer, { childList: true });
}

小建议：优先用CSS类而非inline样式 #

相比直接设置style属性，定义一个CSS类然后通过classList.add添加会更易维护，比如：

.custom-pac-item {
  background-color: #f5f5f5;
  padding: 10px 12px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}

这样后续修改样式只需要改CSS，不用动TS代码，更高效！

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