JavaScript: getElementsByTagName()

Question

Can i add an animation to all the links in the page?

Here the code

  var words = document.links;

  words.onmouseover = function() {
    words.classList.toggle("tada");
};

Thanks in advance.

That code should work. It should only touch the first anchor in the page, but its using querySelector instead of querySelectorAll or getElementsByTagName. — Quentin, May 11 '16 at 13:37
I don't see you using `getElementsByTagName` or `document.querySelectorAll` anywhere! — Felix Kling, May 11 '16 at 13:44
Potentially a duplicate of http://stackoverflow.com/q/6967297/218196 and http://stackoverflow.com/q/22727403/218196 — Felix Kling, May 11 '16 at 13:46
FYI, if you only want `` elements that have a `href` attribute, you can just use the `document.links` collection. — , May 11 '16 at 14:02

Rion Williams · Accepted Answer · 2016-05-11T15:07:53.650

2

The getElementsByTagName('a') and querySelectorAll('a') functions should work as expected returning either an HTMLCollection or a NodeList respectively, both of which will require you to iterate through to actually set up your event handler :

// Get your links
var links = document.getElementsByTagName('a');
// Iterate through them and set up your event handlers
for(var l = 0; l < links.length; l++){
      links[l].onmouseover = function () {
         this.classList.toggle("tadan");
      };
}

It's also important to note that getElementsByTagName() will return a "live" HTMLCollection of elements, whereas querySelectorAll() will return a "non-live" NodeList, which can affect how the elements in these are used.

edited May 11 '16 at 15:07

answered May 11 '16 at 13:40

Rion Williams

74,820
37
200
327

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName seems to indicate that getElementsByTagName returns an HTMLCollection. Is the only difference between an HTMLCollection and a NodeList that the HTMLCollection is always live? – heapunderflow May 11 '16 at 15:05
You are correct. For some reason I suppose I was referencing the wrong function initially. But yes, the `HTMLCollection` is live and the `NodeList` is not. – Rion Williams May 11 '16 at 15:06

I wrestled a bear once. · Answer 2 · 2016-05-11T13:49:50.613

0

gotta loooopp

var link = document.getElementsByTagName( 'a' );

for(var i=link.length; i--;)
    link[i].onmouseover = function () {
          this.classList.toggle("tadan");
    };

OR you do have jQuery tagged so you could just

$('a').mouseover(function(){
    $(this).toggleClass('tadan');
});

edited May 11 '16 at 13:49

answered May 11 '16 at 13:39

I wrestled a bear once.

22,983
19
69
116

1

If you use jQuery, might as well do it all the jQuery way: `$(this).toggleClass('tadan');` – Andrew Mairose May 11 '16 at 13:47
1

You can simplify the code if you use `this` instead of `z` inside the event handler. Then you can omit the IIFE. – Felix Kling May 11 '16 at 13:49
good points, thank you. – I wrestled a bear once. May 11 '16 at 13:50

JavaScript: getElementsByTagName()

2 Answers2