title: Element.className returning undefined?
body: <p>[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]</p>
  
  <p>I'm trying to emulate (before taking a peek at the source code of) bootstrap's dropdown menu.</p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>I'm using jquery 1.10.2.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;li class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Account &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
      &lt;ul class="dropdown-menu open"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Privacy&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$( 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') &gt; -1 ) { // previously dropDownMenu.className.indexOf('open') &gt; -1
              alert('removing class');
          }else{
              alert('adding class');
          }
  
      });
  
  });
  </code></pre>