DEV Community

Sandeep Machiraju
Sandeep Machiraju

Posted on

JavaScript DOM Tutorial for Beginners: Learn JavaScript DOM in 1 Hour [2021]

Topics covered in this video :
➡️ What is DOM ?
➡️ DOM Element

➡️ Property vs Attribute vs Method

➡️ Creating Element
➡️ Accessing Element
➡️ Using Property of Element
➡️ CSS Manipulation of Element
➡️ Using Attribute to invoke Property right way
➡️ Dynamically Adding Elements to DOM

➡️ Accessing Element using CSSOM Selector (ie querySelector)

➡️What is DOM Event ?
➡️Event Target
➡️Accessing Events on Event Target
➡️Examples on Two Ways of Accessing Events on Event Target
➡️Event Attributes

➡️Event handler
➡️Event Listeners

➡️When to use What ?

➡️ What is DOM ? : https://youtu.be/a0ax0yXSHiw​

➡️ What is Document Interface ? : https://youtu.be/EVNbGVMlANs​

➡️ Property vs Method vs Attribute : https://youtu.be/dXEJcw7XNqQ​

➡️ DOM Element : https://youtu.be/hr5yQ1VwF0I​

💎 FOLLOW US ON Twitter : https://twitter.com/MrkTutorials​

💎 FOLLOW US ON Instagram : https://www.instagram.com/mrk_tutorials/​

javascript​ #dom​ #property​ #attribute​ #method​

Reach us at :
📧 : mrktutorials@outlook.com

Credits :
📒 Tutor Name & Editing : Sandeep Machiraju

Follow on :
⚡️ https://www.instagram.com/sandeep_mac...​
⚡️ https://www.facebook.com/sandeepM20598​

⭐️ Github Link : https://github.com/machirajusaisandee...​ ⭐️

JavaScript is one of the most popular programming languages in 2021. A lot of people are learning JavaScript to become front-end and/or back-end developers.

I've designed this JavaScript tutorial for beginners to learn JavaScript from scratch. We'll start off by answering the frequently asked questions by beginners about JavaScript and shortly after we'll set up our development environment and start coding.

What is DOM
DOM stands for Document Object Model. When a browser loads a web page, the browser creates a Document Object Model of that page.

In simple terms you can think of the DOM as an application programming interface (API) for HTML, and we can use programming languages like JavaScript, or JavaScript frameworks like Angular to access and manipulate the HTML using their corresponding DOM objects.

In other words DOM contains the HTML elements as objects, their properties, methods and events and it is a standard for accessing, modifying, adding or deleting HTML elements.

Also Watch :
➡️ Installing Node js :
https://www.youtube.com/watch?v=AW0oa...​

➡️ 5 Major Places to Use Node js
https://youtu.be/S5SMVGV-gs8​

This course will help you learn web development in 2021 and beyond. Mastering these technical skills is vital to your career as a software developer. Whether you want to get a full-time job or become a freelance developer. Or whether you want to become a full-stack or front-end developer... You HAVE to master JavaScript DOM.

JavaScript DOM Crash Course
This crash course focuses on the DOM WITHOUT JQUERY. In this part we will talk about what the JavaScript DOM (Document Object Model) is and we will look at the different selectors like

➡️ document.getElementById()
➡️ document.getElementsByClassName()
➡️ document.getElementsByTagName()
➡️ document.querySelector()
➡️ document.querySelectorAll()

We will also look at how to change content and styles via these selectors
Element object represents an HTML element.
Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit.
It only has methods and properties common to all kinds of elements.

dom​ #javascript​ #dommanipulation​ #javascriptforbeginners​

JavaScript Tutorial | What is Dom? | Document Object Model

Abbreviation : Document Object Model (DOM)

The DOM is a programming API for HTML and XML documents .

It defines the logical structure of documents and the way a document is accessed and manipulated . and this logical structure can be expressed as tree

Document is object or interface that represents webpage loaded.
If you want to access any element in an HTML page, you always start with accessing the document object.
So, it is an interface and represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.
Basically , it is the root of the document tree, and provides the primary access to the document's data.

Top comments (0)