J*aScript 中使用多个 querySelector 更新页面元素_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript 中使用多个 querySelector 更新页面元素

2025-10-31

浏览次数：次

返回列表

javascript 中使用多个 queryselector 更新页面元素

本文旨在讲解如何在 J*aScript 的 if 语句中使用多个 querySelector 来更新不同的页面元素，并提供示例代码和注意事项，帮助开发者理解并应用此技术。通过该方法，可以根据特定条件动态修改页面内容，提升用户体验。

使用 querySelector 在 if 语句中更新多个元素

在 Web 开发中，经常需要在满足特定条件时，更新页面上的多个元素。querySelector 是 J*aScript 中一个强大的方法，允许我们使用 CSS 选择器来选取 HTML 元素。结合 if 语句，我们可以根据不同的条件动态地修改页面内容。

基本用法

querySelector 方法接受一个 CSS 选择器作为参数，并返回文档中匹配该选择器的第一个元素。如果找不到匹配的元素，则返回 null。

const element = document.querySelector('#myElement');

if (element) {
  element.textContent = '新的文本内容';
} else {
  console.log('找不到元素');
}

在 if 语句中使用多个 querySelector

可以在同一个 if 语句中使用多个 querySelector 来选取不同的元素并进行更新。

function updateElements(condition) {
  const displayTextElement = document.querySelector('#displayText');
  const refreshTextElement = document.querySelector('#refreshText');

  if (condition) {
    if (displayTextElement) {
      displayTextElement.textContent = '条件为真时的消息';
      displayTextElement.style.display = 'flex'; // 显示元素
    }
    if (refreshTextElement) {
      refreshTextElement.textContent = '刷新页面以继续';
      refreshTextElement.style.display = 'flex'; // 显示元素
    }
  } else {
    if (displayTextElement) {
      displayTextElement.textContent = '条件为假时的消息';
      displayTextElement.style.display = 'none'; // 隐藏元素
    }
    if (refreshTextElement) {
      refreshTextElement.textContent = '请检查条件';
      refreshTextElement.style.display = 'none'; // 隐藏元素
    }
  }
}

// 示例调用
updateElements(true);

示例：胜负判断

以下是一个判断胜负并更新页面元素的示例。

//DETERMINE WINNER FUNCTION
function determineWinner(
  player,
  enemy,
  timerId
) {
  clearTimeout(timerId);
  const displayTextElement = document.querySelector('#displayText');
  const refreshTextElement = document.querySelector('#refreshText');

  if (player.health === enemy.health) {
    if (displayTextElement) displayTextElement.innerText = 'Tie';
    if (refreshTextElement) refreshTextElement.innerText = 'Refresh Screen to Continue';
  } else if (player.health > enemy.health) {
    if (displayTextElement) displayTextElement.innerText = 'Player 1 Wins';
    if (refreshTextElement) refreshTextElement.innerText = 'Refresh Screen to Continue';
  } else if (enemy.health > player.health) {
    if (displayTextElement) displayTextElement.innerText = 'Player 2 Wins';
    if (refreshTextElement) refreshTextElement.innerText = 'Refresh Screen to Continue';
  }
  if (displayTextElement) displayTextElement.style.display = 'flex';
}

class Player {
  constructor(health) {
    this.health = Number(health);
  }
}

function checkWinner() {
  let tom = new Player(document.querySelector('#tomHealth').value);
  let jerry = new Player(document.querySelector('#jerryHealth').value);

  determineWinner(jerry, tom, null);
}

对应的 HTML 结构：

<div>
  Player 1 (jerry)<input type="number" id="jerryHealth" value="6"> Player 2 (tom)<input type="number" id="tomHealth" value="5">
  <button onclick="checkWinner()">Check Winner</button>
</div>
<div id="red-container">
  <!--Smaller container-->
  <div id="smaller-red-container">

    <!-- player health -->
    <div id="player-container">
      <div id="player-health"></div>
      <div id="player-health-cover"></div>
    </div>

    <!-- timer -->
    <div id="timer">
      10
    </div>

    <!-- enemy health -->
    <div id="enemy-container">
      <div id="enemy-health"></div>
      <div id="enemy-health-cover"></div>
    </div>
  </div>
  <div id="displayText"></div>
  <div id="refreshText"></div>
  <canvas></canvas>
</div>

以及对应的 CSS 样式：

金戈企业建站系统0.1

软件介绍：金戈企业建站系统不仅是一份免费的企业建站代码包，而且它还是完全开源的，它倾注了作者1个多月来日日夜夜的心血，虽然有些地方没做到尽善尽美，可我相信在接下来的日子里我会通过反馈信息让她更丰满实用起来。1.完美的摸板机制，即使你对php一点也不懂，只要你会做网页。就可以立即打造新颖别致的网站界面（摸板制作方法手册正在紧张制作中，稍后发布）可惜作者精力有限，目前只提供一套摸板。不过只是暂时的2.

0 查看详情金戈企业建站系统0.1

#displayText {
  align-items: center;
  justify-content: center;
  top: 20;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  color: red;
}

#refreshText {
  align-items: center;
  justify-content: center;
  top: 10;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  color: red;
}

注意事项

确保元素存在: 在使用 querySelector 之前，确保页面上存在对应的元素。如果元素不存在，querySelector 会返回 null，尝试访问 null 的属性会导致错误。可以使用条件判断来避免这种情况。
性能考虑: 频繁调用 querySelector 可能会影响性能，特别是在复杂的文档结构中。如果需要频繁访问同一个元素，最好将其缓存到变量中。
选择器准确性: 使用准确的 CSS 选择器，确保选取到目标元素。错误的 CSS 选择器可能导致选取到错误的元素或者找不到元素。
避免阻塞: 如果 querySelector 的目标元素在 DOM 中较深，或者选择器较为复杂，可能会导致浏览器阻塞。尽量简化选择器，并避免在关键渲染路径中使用。

总结

通过结合 querySelector 和 if 语句，可以灵活地根据条件更新页面上的多个元素。这在动态 Web 应用开发中非常有用，可以根据用户的操作、服务器的响应或其他条件来更新页面内容，提升用户体验。记住要处理 querySelector 返回 null 的情况，并注意性能优化，确保代码的健壮性和效率。

以上就是J*aScript 中使用多个 querySelector 更新页面元素的详细内容，更多请关注其它相关文章！

# 可以根据 # 搜索大数据seo公司 # 深圳企业网站建设开发 # 宁城网站建设公司 # 自由策划网站建设 # seo佬杰 2 # seo效果多久能体现 # 电脑端查看关键词排名 # 福建省seo加盟 # 百度2018seo # 邢台短视频seo厂商 # 是一个 # 显示效果 # 中非 # 单选框 # css # 找不到 # 表单 # 建站系统 # 选择器 # 多个 # red # canva # 应用开发 # win # ai # 浏览器 # html # java # javascript