Javascript DOM

#javascript #html

This Post will cover the basics of selecting elements and manipulating elements in the DOM.

What is DOM

DOM stands for Document Object Model. It is an object oriented representation of a web page.

DOM represents the HTML or XML documents as tree of nodes .

Let's understand the above image.

Document is the root node.

Root node has one child which is the HTML element.

Each document can have only one document element.

HTML node have two child node elements HEAD and BODY

Similarly HEAD and BODY have their child nodes TITLE ,Script and h1 respectively

At bottom we have text node which is just a text

let's see how we can select and manipulate these nodes.

1. Selecting elements

We'll dicuss 4 ways to select an HTML element

getElementById
getElementByName
getElementByClass
QuerySelector

getElementById

Div is a HTML element. It has an id attribute, id is used to uniquely identify an element in the DOM.

To select an element by its id we use document.getElementById() method.

getElementById() returns an element object if an id exists. If there is no element with that id then it will return null.

Once the element is selected we can manipulate it ,add styles to it.

getElementByName

Some elements in HTML have name attribute. Unlike id, name doesn't have to be unique.

Multiple elements can have same name value.

to access element by name we use getElementByName().This will return a NodeList.

getElementByClass

HTML elements can have class attribute.To access the element by class we use getElementByClass().This will return HTML collection

querySelector
It can be used to select elements with id or class.
To select an element by id we use '#' and for class we use '.'

2. Manipulating elements

Now that we know how to select an element from the DOM in manupulating elements we will see how to add or remove an element from the DOM.

Adding new element to the DOM
To add a new element in the DOM we have to follow 3 steps .

step 1. creating the new element.
step 2. creating the text node.
step 3. adding element into the DOM.

let's see how to write javascript for above 3 steps.

To create an element we use document.createElement(HTMLtag)

To add a text in it we can use innerHTML="some text" or textContent="some text" (difference between textContent and innerHTML will be discussed later).

To add element into the DOM we use document.body.append() or we can also use document.body.appendChild(). The only difference between append and appendChild is append can add text as well as html tag as a node in the DOM but appendChild will only append html tags.