Javascript – About DOM

The most common use of Javascript is to add client side behavior to HTML pages. Js scripts are included in html and interact with it through DOM.

DOM is simply a standard for manipulating html created by w3d (word wide web consortium standard).

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

Every browser has it’s own implementation of it so small differences in behavior are a common thing (especially Internet Explorer 🙂 ).

DOM interface defines:

  • the html elements as objects
  • properties of all HTML elements
  • methods to access all HTML elements
  • events for all HTML elements

Note: This is part of Javascript learning roadmap.


DOM Navigation

The entire html page is represented as a node tree. The root of the tree is the document itself.

2AC277C4-2D27-4414-9FDE-DDF222F73B2A

There are 6 types of nodes in the DOM:

  • document node – the entire document
  • root node – the html tag
  • element node – every HTML element
  • text node – text inside HTML
  • attribute node – every html attribute
  • comment node – all comments in the document

 

Node Properties

Each node has a set of properties that are commonly used for manipulating sets of nods and in traversing the DOM. Here are the ones you should know:

 

nodeName Property

  • specifies the name of the node
  • is read-only
  • for element node – the same as the tag name
  • for attribute node – attribute name
  • for text node – always #text
  • for document node – always #document

nodeValue Property

  • for element nodes is undefined
  • for text nodes is text itself
  • for attribute notes is the attribute value

nodeType Property

  • element node = 1
  • attribute node = 2
  • text node = 3
  • comment node = 8
  • document node = 9

Manipulating the DOM

Many developers use jQuery for any interaction with DOM. And that is ok in most situations. jQuery is an extremely useful library and used in probably all large applications.

But there are situations where adding a 260 KB library just for changing the text in DOM Node is not the best idea. JS alone has attributes on manipulating the DOM. Here are the most practical ones:

Find elements

  • by id:                     document.getElementById(“someID”)
  • by tag name         document.getElementByTagName(“element”)
  • by class name      document.getElementsByClassName(“someClass”); // no ‘.’ in front
  • by css selectors:   document.querySelectorAll(“someCssSelector”)

Important note: All of this are returning HtmlCollection – any get/set on this kind of collection is very performance consuming – executes a query on the document at each operation.

Change HTML Content

  • element.innerHTML = “newHTML”

Change value of an attribute

  • element.attributeName = “newValue” 

Change value of CSS properties

  • element.style.propertyName = “newValue” 

Add/Remove class

  • element.classList.add(“className”)
  • element.classList.remove(“className”) 

Add event listener

  • element.addEventListener(“click”, function() {}, useCapture); // not “onClick”
  • the method doesn’t override previous listeners – elements can have more than one listeners
  • useCapture (3rd parameter) – boolean – defines what kind of propagation to be used (capturing or bubbling)
    • bubbling (default) – the inner most element’s event is handled first and then the outer
    • capturing – the outer most element’s event is handled first and then the inner

Remove event listener

  • element.removeEventListener(“mousemove”, myFunction); 

 


Conclusion

The most important think you need to remember from this topic is that DOM is simply a standard protocol. It provides the way to transform HTML elements into Javascript objects and manipulate them as you like in the script.

Interaction with DOM is the most expensive operation you can do in Javascript in terms of performance. Use it only when you have to!

Note: This is part of Javascript learning roadmap.

Thank you for your time!

Please subscribe for more weekly web wisdom! 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s