JavaScript 引用 html5 语义标记

Question

我是 JavaScript 和这个网站的新手。我需要帮助来尝试切换 div 的可见性，div 是一个 html 语义标签 (nav)，但我找不到参考方法它。

我搜索了一个好小时并尝试了 document.getElementById()，但这不起作用，除非我将标签更改为 <div id="nav">。

我的JavaScript代码如下：

function toggle_visibility(id) {
"use strict";

var e = document.getElementById(id);

if (e.style.display === 'block') {

    e.style.display = 'none';
} else {

    e.style.display = 'block';
}}

我在我的 html 中从另一个 div 调用它，就像这样

<a href="#" onclick="toggle_visibility('nav');"><div id="mNav"></div></a>

<nav>
    <ul>
        <a href=""><li>
            Link 1
        </li></a>
        <a href=""><li>
            Link 2
        </li></a>
        <a href=""><li>
            Link 3
        </li></a>
    </ul>
</nav>

Answer 1

nav 在您的情况下不是 id ，而是标签名称。在这种情况下，使用：

var e = document.getElementsByTagName(id)[0];

或者，更灵活的解决方案：

var e = document.querySelector(id);

（另外，因为它不是 id，您可能想用 tag 替换 id 参数，但这只是装饰性的 :)）

Answer 2

在您的情况下，仅当元素具有 ID 时才使用 document.getElementById。但是如果你想使用标签名获取元素的引用，那么你必须使用document.getElementsByTagName。但这同样会使您的通用函数 toggle_visibility 仅限于标记名。

而不是两者，使用 document.querySelector。对于此函数，您可以传递 css 选择器，它可以是 id 或标签名称，也可以是 class 名称。

function toggle_visibility(selector) {
   "use strict";
   var e = document.querySelector(selector);
   e.style.display = (e.style.display==="block") ? "none" : "block";
}

<a onclick="toggle_visibility('nav');">Toggle Menu<div id="mNav"></div></a>

<nav>
<ul>
    <a href=""><li>
        Link 1
    </li></a>
    <a href=""><li>
        Link 2
    </li></a>
    <a href=""><li>
        Link 3
    </li></a>
</ul>
</nav>

另外，不要将点击事件绑定到 HTML 内的元素，而是使用 addEventListener 来绑定事件。这样你会更容易管理。

现在在您的 HTML 中您甚至可以参考：

toggle_visibility("#myNav")
toggle_visibility(".className")

JavaScript 引用 html5 语义标记

JavaScript reference html5 semantic tag

html

javascript

nav