Ссылка на 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'; 
}} 

И я звоню из другого DIV в моем HTML, как этот

<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 не идентификатор в вашем случае, но тег имя. В этом случае используйте:

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

Или, более гибкое решение:

var e = document.querySelector(id); 

(также, как это не идентификатор, вы, вероятно, хотите заменить id параметр с tag, но это просто косметический :))

Answer 2

В вашем случае document.getElementById используется, только если элемент имеет идентификатор. Но если вы хотите получить ссылку на элемент с использованием имени тега, вы должны использовать document.getElementsByTagName. Но опять же это приведет к тому, что ваша общая функция toggle_visibility будет ограничена тэгом.

Вместо этого используйте document.querySelector. К этой функции вы можете передавать селектор css, и это может быть либо идентификатор или имя тега, либо имя класса.

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")