使用 if 语句隐藏元素（纯 Javascript）答案

【问题标题】：Hiding element with if statement (pure Javascript)使用 if 语句隐藏元素（纯 Javascript）
【发布时间】：2021-10-04 15:53:29
【问题描述】：

我试图隐藏 h3 标题，但 else 语句似乎不起作用。如何修改此代码以使其更清洁且有效？ “标记”是我的自定义动态标签，当您在搜索栏中键入内容时会添加到页面中。那正是我想隐藏所有h3的时候。但是一旦搜索栏为空，所有 h3 标题都应该可见。

var sectionHeader = document.getElementsByTagName('h3');
var keyword = document.getElementsByTagName("mark");

if(typeof(keyword) != 'undefined' && keyword != null){
    console.log("h3 headers are hidden");
    for (i = 0; i < sectionHeader.length; i ++) {
        sectionHeader[i].style.visibility = 'hidden';
    }
} else {
    console.log("h3 headers are visible");
    for (i = 0; i < sectionHeader.length; i ++) {
        sectionHeader[i].style.visibility = 'visible';
    }
}

【问题讨论】：

标签： javascript for-loop if-statement

【解决方案1】：

getElementsByTagName 永远不会返回 undefined 或 null，它总是返回 NodeList。如果没有mark 元素，NodeList 将为空。所以测试它的长度。

if (keyword.length > 0){
    console.log("h3 headers are hidden");
    for (i = 0; i < sectionHeader.length; i ++) {
        sectionHeader[i].style.visibility = 'hidden';
    }
} else {
    console.log("h3 headers are visible");
    for (i = 0; i < sectionHeader.length; i ++) {
        sectionHeader[i].style.visibility = 'visible';
    }
}

【讨论】：