Element.className returning undefined?

[Question was changed after an alternate debugging method was pointed out to me and I found the real cause of the problem - thanks to Pointy and user2864740] I'm trying to emulate (before taking a peek at the source code of) bootstrap's dropdown menu. I attach an onclick listener to every a.dropdown-toggle. The listener grabs the node's parent, uses the node's parent to find the actual dropdown menu and adds or removes the open class. After getting the dropdown menu node (a ul element) I use element.className but it returns undefined. This is especially strange because jquery's .attr('class') returns the expected result. I'm using jquery 1.10.2. HTML: ``` <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a> <ul class="dropdown-menu open"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Privacy</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> ``` CSS: ``` li.divider { border-top: solid 1px grey; padding: 0px 0px; } .dropdown-menu { position: absolute; display: none; border: 1px solid grey; list-style-type: none; } .dropdown a:link, .dropdown a:visited { text-decoration: none; color: black; } .dropdown-menu.open{ display: block; } ``` Javascript: ``` $( document ).ready(function(){ $('a.dropdown-toggle').click(function(e){ e.preventDefault(); dropDownMenu = $(this.parentNode).find('.dropdown-menu'); // does not return dropdown menu console.log( "According to jquery, class name is: " + dropDownMenu.attr('class') ); // prints dropdown-menu console.log( "According to .className, class name is: " + dropDownMenu.className ); //prints undefined if ( dropDownMenu.attr('class').indexOf('open') > -1 ) { // previously dropDownMenu.className.indexOf('open') > -1 alert('removing class'); }else{ alert('adding class'); } }); }); ```