当您尝试访问itemDivs1.style时会发生错误，因为itemDivs1是null，因此它无法找到任何属性
x1c 0d1x的数据
为什么是null？看起来当你使用<template>标签时，它创建了一个新文档！这似乎是预期的行为according to the documentation-请务必查看底部的支持表，因为它似乎Firefox不支持这一点！

的
正因为如此，您不能只执行document.getElementById(...)，因为它会在错误的文档中查找。我们需要看看这份新文件的内部。您已经选择了模板标记并将其保存到userCardTemplate变量中，因此我们可以从那里调用userCardTemplate.content.querySelector("#aaa")来查找子文档中所需的元素。

const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")

// DEFINE HERE THE ELEMENTS I WANT TO HIDE <---
var itemDivs1 = userCardTemplate.content.querySelector("#aaa");
var itemDivs2 = userCardTemplate.content.querySelector("#bbb");
var itemDivs3 = userCardTemplate.content.querySelector("#ccc");

let users = []
let results = []

searchInput.addEventListener("input", e => {
  results = []; //quickly empty array
  userCardContainer.innerHTML = "";

  const value = e.target.value.toLowerCase()
  const xy = value.split(' ')

  // wait for 4 chars
  if (parseFloat(value.length) >= 4) {
    users.forEach(user => {

      var distance
      // Search method based on distance, using 'g'
      if (xy[0] == "g") {
        var distance = Math.sqrt(
          Math.pow(parseFloat(xy[1]) - parseFloat(user.x1), 2) +
          Math.pow(parseFloat(xy[2]) - parseFloat(user.y1), 2))
          // If this condition is met, HIDE body_1 and body_3
          itemDivs1.style.display = 'none'
          itemDivs3.style.display = 'none'
      // Search method based on distance, NOT using 'g'
      } else{
        var distance = Math.sqrt(
          Math.pow(parseFloat(xy[0]) - parseFloat(user.x2), 2) +
          Math.pow(parseFloat(xy[1]) - parseFloat(user.y2), 2))
          // If this condition is met, HIDE body_1 and body_2
          itemDivs1.style.display = 'none'
          itemDivs2.style.display = 'none'
      }
      let fvalue = value.replace("1", "9")

      // Search method based on text
      if (user.mnames.includes(fvalue)) {
        // If this condition is met, HIDE body_2 and body_3
        itemDivs2.style.display = 'none'
        itemDivs3.style.display = 'none'
      }

      // Condition to show card
      const isVisible = user.mnames.includes(fvalue) || distance <= 5

      if (isVisible) {
        user.distance = distance
        results.push(
          user
        );
      }
    });
  }
  
  // Sort and limit results
  results.sort((a, b) => a.distance - b.distance)
  results = results.slice(0, 10)
  results.forEach((u) => {
userCardContainer.append(u.element);
  });
})

fetch("https://raw.githubusercontent.com/ucc23/ucc/main/_clusters/generated.json")
  .then(res => res.json())
  .then(data => {
    users = data.map(user => {
      const card = userCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      const body_1 = card.querySelector("[data-body_1]")
      const body_2 = card.querySelector("[data-body_2]")
      const body_3 = card.querySelector("[data-body_3]")
      card.querySelector("a").setAttribute("href", "https://url/" + user.name)

      header.textContent = user.name
      body_1.textContent = user.mnames.split(',')
      body_2.textContent = user.x1 + ',' + user.y1
      body_3.textContent = user.x2 + ',' + user.y2

      return {
        mnames: user.mnames,
        x1: user.x1,
        y1: user.y1,
        x2: user.x2,
        y2: user.y2,
        element: card
      }
    });
  });

.user-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .25rem;
  margin-top: 1rem;
}

.card {
  border: 0px solid black;
  background-color: white;
  padding: .5rem;
  text-align: center;
  font-size: 1.5rem;
}

.card > .header {
  margin-bottom: .25rem;
}

.card > .body_1 {
  font-size: 1rem;
  color: #777;
  font-weight: bold;
}

.card > .body_2 {
  font-size: 1rem;
  color: #777;
  font-weight: bold;
}

.card > .body_3 {
  font-size: 1rem;
  color: #777;
  font-weight: bold;
}

<div class="search-container">
  <input type="search" id="search" data-search>
</div>
<div class="user-cards" data-user-cards-container></div>
<template data-user-template>
  <div class="card">
  <a href=""><div class="header" data-header></div></a>
  <div class="body_1" data-body_1 id="aaa"></div>
  <div class="body_2" data-body_2 id="bbb"></div>
  <div class="body_3" data-body_3 id="ccc"></div>
  </div>
</template>