View Previous Page:

Javascript basics

In website development, DOM stands for Document Object Model. It is a programming interface that allows us to create, change, or remove elements from a website document. DOM manipulation is when you use JavaScript to add, remove, and modify elements of a website. It is very common in web development.

Dom Tree:

The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

Document

// From Doctype to /html all is included
val = document;         
// HTML collection of all the nodes amd elements
val = document.all; 
// Show everything in head
val = document.head;

Single Element Selector

let val = document.getElementById('id');

val.style.background='black';
val.style.display = 'none';
val.innerText = 'new contenet';
val.innerHTML = '<h1>New</h1>'

Using we can insert variables in string using ${val} + innerHtml removes all the prev code inside the element and insert new Html codes.

Single: Query Selector

Query selector is used to access multiple type of element eg: Class, Id, Form etc.

For more than one elements it gets the first element.

document.querySelector('#id');
document.querySelector('.class');
document.querySelector('h1');
document.querySelector('li:last-child');
document.querySelector('li:nth-child(3)');

val.innerHTML += `Inseting js ${val} in string`;

Note: the output are usually collection not arrays. They look like arrays but some functions like for each don’t work on them.