Scribd
Upload
2 views

Document Object Model

Uploaded by

hitendar.s
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Document Object Model

Uploaded by

hitendar.s
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Document Object Model

Sandeep G
Who Am I?

- Engineer / Front End developer


- Worked in Software AG, MSFT, SAP
- ~9 years of experience
- Worked in React JS, TypeScript, JS, CSS, HTML
Agenda

● What is DOM?
● What DOM Covers?
● DOM Basics

● HTML DOM Elements


● Accessing DOM Elements
Introduction
What is DOM
● Programming interface that lets us add, edit, and delete components from a HTML
document.
● DOM views the HTML documents as a tree of nodes.
● With the help of DOM, you can basically update the contents in a HTML page.
Accessing DOM Element

● getElementById()- returns unique element


● getElementsByName() - returns array of element
● getElementsByTagName()- returns array of element
● getElementsByClassName()- returns array of element
● querySelector() - returns the first matching element, e.g.
querySelector(‘#deivtag’)
● querySelectorAll - returns all the matching element in an array, e.g.
querySelector(‘.divtag’)
Selectors
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll
DOM Methods
createElement & appendChild
removeChild
Adding text and HTML
Adding Style
setAttribute
Happy Coding

You might also like