CODEWITHSUNDEEP
javascriptdomtree-traversalnodelist
kevinius
kevinius

Reputation: 4610

Understanding javascript DOM core ideas: nodeList vs HTMLElement objects

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.

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

Upvotes: 4

Views: 2519

Answers (1)

kevinius
kevinius

Reputation: 4610

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

Upvotes: 6

Related Questions