Often you’ll want your JavaScript functions to access parent elements in the DOM.

To accomplish this in JavaScript, try element.parentNode.

To do the same in jQuery, try element.parent().

Here’s a JavaScript example.

HTML:

<ul id="tabs">
<li class="firsttab"><a href="#">one</a></li>
<li class="secondtab"><a href="#">two</a></li>
</ul>

JavaScript:

function init() {
  var tablinks = document.getElementById('tabs').getElementsByTagName('a');
  for (var i = 0, j = tablinks.length; i < j; i++) {
    tablinks[i].onclick = doit;
  }
}
function doit() {
  alert(this.parentNode.className);
}
window.onload = init;

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.


No Reader comments

Related books & courses
Available now on SitePoint Premium

Preview for $1