"AchieversIT is offering best training in UI development, our training is based on conceptual with practical knowledge. Live Training & Corporate Training. 100% placement guarantee. learn HTML5, CSS3, Javascript, JQuery, React.JS, Bootstrap, Json. "

1. @Achieversit
JavaScript
DOM
Contact Us : 8151000080
E-mail : info@achieversit.com
#Dom
0

2. @Achieversit
Contact Us : 8151000080
E-mail : info@achieversit.com
1
Hey Everyone's
In this post, you will learn about
JavaScript Document Object Model
(DOM) with the help of examples.
Do Like,save and Share This Post If You
Found This Helpful.

3. A Document object represents the HTML
document that is displayed in that window.
This document enables Javascript to access and
manipulate the elements and styles of a website.
By the help of document object ,we can add
dynamic content to our web page.
if you want access any object on your web page
you always start with the document.
@Achieversit
Contact Us : 8151000080
E-mail : info@achieversit.com
2
DOM
window.document
// OR
document

4. The model is built in a tree structure of objects
and defines:
@Achieversit
Contact Us : 8151000080
E-mail : info@achieversit.com
3
HTML elements as objects.
Properties and events of the HTML
Methods to access the HTML elements.

5. In this shot, we will learn different ways to select a
DOM element in JavaScript.
JavaScript provides six methods to select an
element from the document.
@Achieversit
Contact Us : 8151000080
E-mail : info@achieversit.com
4
Select Elements
Get element by ID
Get elements by class name
Get elements by tag name
Get elements by name
Queryselector
Queryselectorall

6. @Achieversit
Contact Us : 8151000080
E-mail : info@achieversit.com
5
Get element by ID :
The get ElementById() method is used to
get a single element by its id.
<p id="para">This is my first Paragraph</p>
const paragraph = document.getElementById("para1");
console.log(paragraph);
//<p id="para">This is my first paragraph </p>
Get elements by class name :
We can also get more than one object using the
getElementsByClassName() method which
returns an array.

7. @Achieversit
Contact Us : 8151000080
E-mail : info@achieversit.com
6
Get element by tag name :
We can also get our elements by tag name
using the getElementsByTagName() method.
<p class="para">This is my first Paragraph</p>
<p class="para">This is my first Paragraph</p>
var paras= document.getElementByClassName("para1");
console.log(paras);
// HTML Collection(2)
// 0: p.para
// 1: p:para
// length:2
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
const tagNodes= document.getElementByTagName("li");
console.log(tagNodes);
// HTML Collection(li,li)
// 0: li
// 1: li
// length:2

8. @Achieversit
Contact Us : 8151000080
E-mail : info@achieversit.com
7
Get Elements By name :
The getElementsByName method returns the elements
that match the value of the name attribute with the
passed string. The return value is a live NodeList
Collection.
document.getElementByName("first-boy");
It is not recommended to use getElementByName
because it works differently on Internet Explorer.
Queryselector :
The querySelector() method returns the fiirst element that
matches a specified CSS selector.
That means that you can get elements by id,class,tag and all ot
valid CSS selectors.

9. @Achieversit
Contact Us : 8151000080
E-mail : info@achieversit.com
8
var header = document.querySelector('#header'); // using id
var item = document.querySelector('.list-item'); // using class
var heading = document.querySelector('h1'); // using tag
var para = document.querySelector('div > p'); //
document.querySelector(Css Selectors);
Syntax :
QueryselectorAll :
The querySelectorAll() method is an extension of the
querySelector() method. This method returns all the
elements that match the passed selector.
We can send multiple selectors separated by commas.
document.querySelectorAll(".child");//returns all element with child class
<div id="parent-1" class="container">
<p>This is my paragraph</p>
<span>sp</span>
</div>
let e = document.querySelectorAll("span, p");
// [p, span]

10. @Achieversit
Contact Us : 8151000080
E-mail : info@achieversit.com
9
Like ,Share
&Save It For Later