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

在您的情況下，僅當元素具有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")

Answer 2

nav在您的情況下不是id，而是標簽名。 在這種情況下，請使用：

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

或者，更靈活的解決方案：

var e = document.querySelector(id);

（此外，因為它不是id，所以您可能想用tag替換id參數，但這只是裝飾性的：）