Targeting specific elements in JavaScript?

Question

I tried asking this before, but I guess I wasn't specific enough. Suppose I have HTML code that looks like this. How do I ONLY target the tags within the the horizontalNAV using pure JavaScript? Okay I know I could do this using jQuery like this...

<script type="text/javascript">
   $(document).ready(function(){
      $('#horizontalNAV li a').click(function(){
         //jQuery code here...
      });
   });
</script>

However I do NOT want a jQuery answer, because I want to know how you target ('#horizontalNAV li a') using pure javaScript.

or you can tell me how to do it for the verticalNav portion, either way I'll get it, if I see an example or if its explained to me. If I'm not mistaken you would have to use the document.querySelectorAll method, if so, how does that work in the above example.

<div id="wrapper">
   <div id="horizontalNav">
      <ul>
       <li><a href="#"></a>item1</li>
       <li><a href="#"></a>item2</li>
       <li><a href="#"></a>item3</li>
      </ul>
   </div>
   <div class="sideBar">
      <div class="verticalNav">
         <ul>
           <li><a href="#"></a>item1</li>
           <li><a href="#"></a>item2</li>
           <li><a href="#"></a>item3</li>
         </ul>
      </div>
   </div>
</div>

Have a look at this tutorial about JS and DOM: quirksmode.org/dom/intro.html — Felix Kling
– Felix Kling, Commented Aug 11, 2014 at 0:08

adeneo · Accepted Answer · 2014-08-11 00:44:50Z

2

Without jQuery it would look like this

<script type="text/javascript">
   document.addEventListener("DOMContentLoaded", function(event) {

      var elems = document.querySelectorAll('#horizontalNav li a');

      for (var i = elems.length; i--;)
           elems[i].addEventListener("click", handler, false);

   }, false);

   function handler(event) {
       //javascript code here...

       this.style.color = 'red';
   }
</script>

FIDDLE

edited Aug 11, 2014 at 0:44

answered Aug 10, 2014 at 23:59

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dragonore Over a year ago

Appreciate the answer, just what I was looking for. To expand on what you have, let say I wanted to do something simple like make the a tags that is targeted above change color or something dumb, how would I do that? Sorry if I'm pestering or dumb at this. Things are so much simpler with jQuery ):

adeneo Over a year ago

I've added something for that. Note that the ID's you're using doesn't match, it's case sensitive.

RobG · Accepted Answer · 2014-08-11 00:29:13Z

1

If #horizontalNAV is a UL or OL element, then it can only have LI element children so you can skip that part of the selector. The following doesn't use querySelectorAll so will work in browsers, that don't support it:

<script>

  window.onload = function() {
    var list = document.getElementById('#horizontalNAV');
    var links = list && list.getElementsByTagName(‘a’);

    if (links) {
      for (var i=0, iLen=links.length; i<iLen; i++) {
        links[i].onclick = listener;
      }
    }
  }

  function listener() {
     // do stuff
  }

</script>

If you want to include more than one listener for an event, you’ll need to use addEventListener or some other strategy instead of assigning the function directly to the element, but in most cases only one listener is required per event type and keeping things simple has its benefits.

The listener function is declared outside the function doing the assignment to avoid a closure and circular reference, so it should have less chance of creating a memory leak.

answered Aug 11, 2014 at 0:29

RobG

148k32 gold badges180 silver badges216 bronze badges

2 Comments

dragonore Over a year ago

I understand, maybe li tags was a bad example. I suppose in real life I would just use jQuery, I just don't want to be to dependent on it. I'm a newbie at this stuff.

RobG Over a year ago

@dragonore—it's good to have an understanding of the underlying methods and how they work, that way you are able to evaluate when it's sensible to use jQuery and when not to. jQuery is typically very much slower at doing DOM manipulation than plain JS. Learning to write efficient JS will also help you to write efficient jQuery and hopefully dispel the common belief that code is "better" simply by being shorter (often it's the other way around).

Collectives™ on Stack Overflow

Targeting specific elements in JavaScript?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related