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，您可能希望用id参数替换tag，但这只是表面的:)

Answer 2

在您的示例中，只有当元素具有ID时才使用document.getElementById，但是如果要使用标记名称获取元素的引用，则必须使用document.getElementsByTagName。但是，这将使您的泛型函数toggle_visibility被限制为标签名。

而不是两者都使用document.querySelector。对于这个函数，您可以传递css选择器，它也可以是id或标记名或类名。

​

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>

​

另外，不要将click事件绑定到HTML中的元素，而是使用addEventListener绑定事件。这对你来说更容易管理。

现在，在HTML中，您甚至可以引用如下：

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