Understanding javascript DOM core ideas: nodeList vs HTMLElement objects

Question

I have been working towards understanding the DOM very thoroughly. At the moment i'm making my way trough traversing the DOM tree and i seem to be finding some inconsistencies.

• On a nodeList i can use an index to iterate trough the list
• On a HTMLElement i can't use an index

See this fiddle for an example: http://jsfiddle.net/AmhVk/4/

So the question is, why is it that the nodeList has an indexable list like element[0], element1 and the HTMLElement has not?

Could someone explain this to me very thoroughly? Thx...

<ul id="jow">
    <li><a href="">Item</a></li>    
    <li><a href="">Item</a></li>
    <li class="active"><a href="">Item</a></li> 
    <li class="active"><a href="">Item</a></li> 
    <li><a href="">Item</a></li>
    <li><a href="">Item</a></li>
</ul>

<div id="ieps"></div>

function simple(){

    var li = document.querySelectorAll(".active");
    var ul = li[0].parentNode;
    var getULchild = ul.children[0];

    var ieps = document.getElementById("ieps");

    ieps.innerHTML += "ul will return = " + ul + "<br>";
    ieps.innerHTML += "li will return = " + li + "<br><br>";        

    ieps.innerHTML += "ul[0] will return: " + ul[0] + "<br>";
    ieps.innerHTML += "li[0] will return: " + li[0] + "<br><br>";

}

Also, in the fiddle, if i remove 1 of the li's containg the class "active". This will still return a nodeList and not a single HTMLElement: jsfiddle.net/AmhVk/5

Answer 1

So i did some research and i now have a full understanding of what objects the DOM returns when traversing the document tree. Since i didn't find any real answers on the net i'm going to give the answer to my own question, hope this helps someone else too.

---

Retrieving element nodes

You can retrieve element nodes via 1 of these options. This will either return a HTMLElement or a nodeList.

Methods to retrieve element nodes:

• HTMLElement document.getElementById()
• HTMLCollection document.getElementsByTagName()
• nodeList document.getElementsByName()
• nodeList document.getElementsByClassName()
• HTMLElement document.querySelector()
• nodeList document.querySelectorAll()

nodeList vs HTMLElement

• nodeList can contain 1 or more elements
• HTMLElement can contain only 1 element

They are different in the way you work with them. In the nodeList you have to use brackets [] with an index value to get to items in the list nodeList[2]. Whereas with the HTMLElement you allready work with the item itself.

Example

var linkClass = document.getElementsByClassName(".active");
var linkID = document.getElementById("id");

var parentFromLinkClass = linkClass[0].parentElement;
var parentFromLink = linkID.parentElement;

document.write(linkClass[0]); //returns the url of the link
document.write(linkID); //returns the url of the link

document.write(parentFromLinkClass); //HTMLLIElement (not a nodeList)
document.write(parentFromLink); //HTMLLIElement (not a nodeList)

• linkClass selects elements using a nodeList selector function (getElementsByClassName)
• linkID selects an element using an single element selector function (getElementByID)

DOM semantics

The DOM semantics have a very subtle way of telling you what type of object it will return. Remember that the type of object returned depends on the number of elements you can 'maximum' select.

• getElementsByClassName - plural form of Element (Elements) - returns nodeList
• getElementByID - single form or noun of Element - returns HTMLElement
• querySelectorAll - selects 'all' - returns nodeList
• querySelector - selects 'single' - returns HTMLElement
• linkID.parentElement - single form or noun of Element - returns HTMLElement

I will update this answer when needed...