1

Ok so I'm trying to understand the logic of this example from a book because I cant find any documentation to support this syntax and yet it seems to work.

Now the example below is stripped from a larger code segment, but for the purpose of what I'm trying to explain/understand I'm only showing the pertinent parts.

If you need to see the full example then you can download it here:

http://javascriptbook.com/code/c06/

and it's the Using Mutation Events example.

All it's doing is counting all the li elements in this particular ul element and display that number.

The HTML

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<h2><span id="counter">Number of Items</span></h2>

The JavaScript

var listitems = list.getElementsByTagName('li').length;
var counter = document.getElementById('counter');
counter.innerHTML = listitems;

That's the example from the book and it works as it should. I just can't understand it because I have never seen an id name infront of getElementsByTagName method. I know you can use document.getElementsByTagName and element.getElementsByTagName but this appears to be using the id name unless I'm missing something here. "list" is neither document nor an element name. The only reference to it in the code is the id name for the ul element.

The only way I know to do this is by...

var list = document.getElementById('list');
listitems = list.getElementsByTagName('li').length;
var counter = document.getElementById('counter');
counter.innerHTML = listitems;

or if you want it all on one line...

var listitems = document.getElementById('list').getElementsByTagName('li').length;
var counter = document.getElementById('counter');
counter.innerHTML = listitems;

...and both of those work. But again so does the original example above from book and I have no clue why. I can't find anything to support or explain why and how using an id name with the getElementsByTagName method works.

Can anyone assist here with some explanation? Appreciate it.

James Ost
  • 11
  • 2
  • I do think this is a duplicate though – adeneo Jun 28 '15 at 05:18
  • I was not aware that this worked either – Patrick Roberts Jun 28 '15 at 05:21
  • I read the article above. I understand that an element with an id is visible like a global variable, and is thus a "named element". So that is why you can shorthand the example as the author did in that code example? It's funny because no where else (12 other JavaScript books) do they mention this and instead use the syntax that I used in my second example. – James Ost Jun 28 '15 at 05:35
  • The duplicate is posted at the top of your question as I've marked as dupe. You're basically asking why you can access `list` directly, and you're really accessing `window.list` and the reason it works and links to the HTML5 specs is in the duplicate question. – adeneo Jun 28 '15 at 05:37
  • The reason the other books aren't using it, is probably because it's generally been thought of as bad practice, and most developers probably still think it's a bad practice, at least I do, but now it's actually in the HTML5 specification, and all browsers support it, so there's nothing wrong with it, per se ! – adeneo Jun 28 '15 at 05:39
  • Yep adeneo I am reading the article. Just wondering if that is bad or even common practice. No other book I have does it that way or even mentions this. Instead they all do it the way I did in my second example. However, this one author did it like this without explaining exactly what the code was doing. Both ways work, but is one more recommended than the other? – James Ost Jun 28 '15 at 05:40
  • Ah gotcha. That makes sense then as this is a newer book and the others are 2-3 years older for the most part. Thanks for the help adeneo. Gives me some reading material for the night at least. – James Ost Jun 28 '15 at 05:41
  • So after reading all that along with links to other websites they mentioned I come away with this, "while named access can seem somewhat convenient , it should not be used." lol. So I'll just stick with the way I know how to do it, but at least it's good to know in case I run into another coder who uses this madness. Ugh. A lot of hours tonight wasted on trying to figure this all out lol. – James Ost Jun 28 '15 at 06:21

0 Answers0