An Introduction of Javascript DOM
Today I write our first article on Javascript DOM. First of all we know that what is js DOM. The Javascript DOM (Document Object Model) is an interface that allows the developers to manipulate the content, structure and style of a website or webpage.
What is the DOM ?
At that time, most of the website consist of an HTML and CSS documents. The browser creates the documents known as Documents Object Model (DOM). This documents enables Javascript to access the elements and styles of a website or webpager. The DOM is buuilt in a tree structure os objects and defines:
HTML elements as objects
Properties and events of the HTML elements
Methods to access the HTML Elements
DOM Documents…
The DOM documents is the owner of all objects in your website or webpage. That means if you want to access any object on your webpage you always have to start with the document. And, It also contains many important properties and methods that enable us to access and modify our website.
Finding HTML Elements
Now that we understand what the DOM document is we can start getting our first HTML elements. There are many different ways to do so using the Javascript DOM here are the most common:
Get Element by id
1var dom = document.getElementById('id-name');
Get elements by class name
1var dom = document.getElementsByClassName('class-name');
Get element by tag name
1var dom = document.getElementsByTagName('li');
Queryselectors
The querySelector() method returns the first element that matches a specific CSS selector. That means that you can get elements by id, class, tag and all other CSS selectors. Here I just list a few of the most popular options.
Get by id:
1var header = document.querySelector(‘#header’)
Get by class:
1var items = document.querySelector(‘.list-items’)
get by tag:
1var headings = document.querySelector(‘h1’);
