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

Because `NodeList` is an Array(-like) *class* holding `HTMLElement`s? `HTMLElement` is just for single nodes, not lists. — Niccolò Campolungo, Sep 30 '13 at 19:39
A `NodeList` is an Array-like object holding some amount of nodes. An `HTMLElement` is the element itself; it's an object of which its value is the element itself and it contains no other elements. Trying to use Array-like indices on it would be like trying to do `document.querySelectorAll(".active")[0][0];` — Joe Simmons, Sep 30 '13 at 19:46
Also, in the fiddle, if i remove 1 of the li's containg the class "active". This will still return a nodeList and not the single HTMLElement. http://jsfiddle.net/AmhVk/5/ — kevinius, Sep 30 '13 at 20:03

score 4 · Accepted Answer · edited Sep 11 '17 at 20:00

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...

hello @kevinius, so `nodeList` can contain 1 or more elements and `HTMLElement` can contain only 1 element, what about `HTMLCollection`? can you explain, please? — tonywei, Jun 12 '19 at 09:15
`getElementsByClassName()` returns an HTMLCollection, not a NodeList — Edouard, Oct 31 '22 at 15:51