javascript

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

@Achieversit
Contact Us : 8151000080
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.

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
2
DOM
window.document
// OR
document

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

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
4
Select Elements
Get element by ID
Get elements by class name
Get elements by tag name
Get elements by name
Queryselector
Queryselectorall

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

@Achieversit
Contact Us : 8151000080
6
Get element by tag name :
We can also get our elements by tag name
using the getElementsByTagName() method.
This is my first Paragraph
This is my first Paragraph
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

@Achieversit
Contact Us : 8151000080
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.

@Achieversit
Contact Us : 8151000080
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">
This is my paragraph
sp
</div>
let e = document.querySelectorAll("span, p");
// [p, span]

@Achieversit
Contact Us : 8151000080
9
Like ,Share
&Save It For Later

javascript

More Related Content

Similar to javascript

Recently uploaded

javascript