Document Object Model
Topics we will cover in this blog:
- What is DOM ?
- Referring element in DOM using
- querySelector()
- querySelectorAll()
- Selecting text inside HTML elements
- textContent
- innerHTML
- Getting text from user inputs using value
What is DOM ?
DOM Stands for Document Object Model. It is a javascript object and web API that describes HTML. DOM is representation of HTML page that you can access using javascrit .DOM represents document as nodes and object .With help of DOM you can perform many things like add text , delete items and lot more operations.
We can access DOM by going to dev tools in your browser or right click and go to inspect or press F12 on keyboard. We can use document variable for accessing DOM.
Selecting/Referencing a HTML element.
Here we will see how we can connect HTML and javascript using document object. We can use document.querySelector(”selector”) to select a element in html document.
We can access DOM by going to dev tools in your browser or right click and go to inspect or press F12 on keyboard. We can use document variable for accessing DOM.
Above code inside script tag uses querySelector()with class as css selector.
The value of variable is object that represents an html element in DOM. If no element with selector mentioned is found it returns null.
In document.querySelector(”Selector") we can different selector types similar to css selectors like following:
- Type selector (h1, h2,p) :
document.querySelector(”h1") - ID selector (#) :
document.querySelector(”#elementID") - Class selector (.) :
document.querySelector(”.className")
There are other ways to select an element like following but these are old and are not used at present. most of the developers prefer querySelector() because it accepts all type of selector. where as old ways accept only one type each.
document.getElementById(”element ID”)document.getElementsByTagName()document.getElementsByClassName()
Select multiple elements having same selector.
document.querySelector(”Selector") references only the one or first element (incase of many elements with same selector).
we have to use document.querySelectorAll(”Selector") to reference all elements with same selector. It returns a nodelist containing all elements that matches selector mentioned in query.
In above example we have asked to refer all input elements using querySelectorAll(). It returns a nodelist in which we can access each input element by indexing ex : input[0] gives first input. We can use array properties like length and method like forEach() to iterate on nodelist.
Referring text inside elements :
Element.textContent :
Element.textContent is a property that returns text inside an element.ex: p, div, h1, span elements.
Element.innerHTML
There is some limitations to .textContent. which is taken care by .innerHTML
Output is same for both the properties, but…in certain scenarios textContent wont work as shown below.
As we can see .textContent gives only text inside element , whereas .innerHTML gives text along with HTML tags. It depends on purpose which to use when , if user want to get or change only text inside elements use .textContent. if user wants to put HTML elements inside HTML document it is better to use .innerHTML.
Getting text from user input:
To refer the text inside user input element we can not use .textContent or .innerHTML For that we have to use value property. Elements where we can use value property are input, textarea, select .
We can set default value of an input user using value attribute as shown below
