DOM – Learn what matters
-->What is DOM? – Document Object Model
-Document Object Model represents structure of web page (Using Tree like
structure)
-Each element of the html document is a node in that tree.
-These nodes can be accessed, modified, and manipulated using programming
languages like JavaScript.
-->4 Pillars of DOM: -
[Link] of an element
[Link] HTML
[Link] CSS
[Link] listener
1. Selection of an element – [Link](“<element/#id/.class>”)
//Note : element in html = opening tag + content + closing tag
Eg:
The code in line 8 will select h1 element present in “[Link]”.
The code in 9th line will print h1 element of “[Link]” in console.
[Link] HTML: -
The innerHTML property is used for getting or replacing the content of HTML
elements, including <html> and <body>.
(OR)
[Link] CSS: -
To bring about change in styling of an element in HTML using JS, we can use
“.style.<property>” with the line used for selecting the html element in JS.
[Note: Camel case means hyphen ku aduthu irukkura letter capitalize aayidum and andha hyphen
remove aayidum].
When we write CSS properties in JS, it must be written in camel case and not like as written in CSS.
for eg: background-color property written in CSS, will be written in JS as backgroundColor , where
hyphen is removed and the letter after the hyphen is capitalized [because we have to write these
properties in Camel Case in JS]
[Link] listener: -
Event means anything which is happening. Eg:(here) mousemove, click, drag, etc.
Here, Listener means that which listens or observes.
Hence, event listener is that which observes/listens to what happens and reacts according to the
event that has occurred.
For eg: if we “click” on a text, then “hey” should be printed in console. For that we can use an event
listener.
when we “click” on h1 element of html, the below code will execute the function written after “click”.
Eg: therefore, we can write our code like this
if we “click” on h1, then “hey” should be printed in console. For that we can use an event listener
Before clicking h1
After clicking on h1
//ignore the pink colour in above image
General syntax of add Event listener:- [Link](event,
function)
Another eg:
Before clicking a, that is h1:
After clicking h1:
--> Simple example of bulb or whatever clicking on the same button
Concept: when on button is clicked, the bulb should turn on.
HTML:
CSS:
JS:
The above code will change the background of a circle box named as bulb to
yellow, when we click on it.
Concept is: click on button to turn on bulb.
Before clicking “on” button:
After clicking “on” button: -
But what if we want to turn off the bulb by again clicking the on button
We can also do that here in JS by defining a variable and using it as follows:
Before clicking on button:
After clicking on button:
After again clicking the on button:
-->selecting multiple elements at the same time. –
querySelectorAll(“<element/#id/.class>”)
If we have multiple h1 elements in our html document like shown above and
we want to select all these h1 elements at the same time, then we can’t do
that with querySelector(“h1”) as it will select only one element at a time and
that one element will be the first element and in this case,
querySelector(“h1”) will only select the first h1, (i.e.)<h1>hello boy 1</h1>
So, to select all h1 at the same time, we can use querySelectorAll(“h1”) .
Eg:
Case 1: querySelector(“h1”)
querySelector(“h1”) has selected only the first h1.
Case 2: querySelectorAll(“h1”):
querySelectorAll gets all the selected html elements and returns them in the
form of a NodeList to the variable h.
NodeList is an array-like collection of selected elements from html. We can
also access element in node list using its index values, which starts from 0.
The “forEach” loop above will print the selected elements present in the
NodeList one by one.
Things to know: -
1)To select an element by its id – use “getElementById” method.
Syntax: document. getElementById(”id name without #”)
Eg:
2)To select (an) element(s) by its’ class – use “getElementsByClassName”.
The getElementsByClassName method returns an object of all the elements
which have all of the given class name(s). (similar to querySelectorAll)
Syntax: [Link](“<classname(s) w/ .
(dot)>”)
Eg1: selecting only 1 class name
Eg2: selecting multiple class names using getElementsByClassName.
3)innerHTML vs textContent:
textContent – used to add text to a selected element in HTML document.
Inner HTML:
textContent:
As we can see from above, textContent prints the written content in it – as it is
including the tags but innerHTML reads the tags as tags and outputs accordingly.
events -> Mouse Events: click, dblclick, mousedown, mouseup, contextmenu,mouseout,
mousewheel, mouseover
Touch Events: touchstart, touchend, touchmove, touchcancel
Keyboard Events: keydown, keyup, keypress
Form Events: focus, blur, change, submit
Window Events: resize, scroll, load, unload, hashchange