当指定文本存在时显示目标HTML元素的代码调试求助

当class为header --name的<div>中的文本为TXT element xyz时，显示class为showelement的<a>元素。

现有代码 #

JavaScript代码 #

function show() {
  var txt = document.getElementsByClassName("descriptiontxt --block")[0].innerText;
  if (txt == "TXT element xyz") {
    document.getElementsByClassName("showelement").style.visibility = "visible";
  }
}
show();

HTML代码 #

<section id="mainsection" class="mainclass">
  <div class="header --name">
    <h1 class="headtxtelement">TXT element xyz</h1>
  </div>
  <div class="descriptiontxt --block">
    <ul>
      <li>TXT element xyz</li>
      <li>Text line 1</li>
      <li>Text line 2</li>
      <li>DText line 3</li>
    </ul>
  </div>
  <a class="showelement" href="x">ELEMENT I WANT TO SHOW</a>
</section>

尝试修改后的代码（未正常运行） #

function show() {
  var txt = document.querySelector("mainsection")[0].innerText;
  if (txt === "Test") {
    document.querySelector(".showelement").style.visibility = "visible";
  }
}
show();

问题分析与修正方案 #

原代码及修改版的问题 #

1. 目标元素选择偏差：原代码错误选择了descriptiontxt --block的文本，而非需求中指定的header --name区域；修改版中querySelector("mainsection")缺少#（id选择器前缀），且错误将匹配文本写为Test。
2. DOM元素操作错误：getElementsByClassName返回HTMLCollection集合，不能直接调用.style，需通过索引获取单个元素。
3. 文本匹配精度不足：直接使用innerText可能因换行、空格导致匹配失败，需先去除首尾空白。

修正后的可运行代码 #

JavaScript代码

function show() {
  // 精准选择header --name下的标题元素，获取并格式化文本
  const headerText = document.querySelector(".header.--name .headtxtelement").innerText.trim();
  
  if (headerText === "TXT element xyz") {
    const targetElement = document.querySelector(".showelement");
    if (targetElement) {
      targetElement.style.visibility = "visible";
      // 若初始用display:none隐藏，可替换为：targetElement.style.display = "block";
    }
  }
}
show();

配套CSS（需提前设置元素隐藏状态）

.showelement {
  visibility: hidden;
  /* 或使用 display: none; 需与JS中设置的属性对应 */
}

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