What is DOM?

DOM stands for document object model which were introduced after 1990s is tree like structure which control user behaviour and perform actions on the basis of user issued commands.
The HTML DOM is a standard object model and programming interface for HTML.

DOM Methods

HTML DOM methods are actions you can perform (on HTML Elements).
The HTML DOM can be accessed with JavaScript. In the DOM, all HTML elements are defined as objects.

getElementById Method()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()

HTML Elements

createElement(tagName) is used to create a new HTML element code.
appendChild(childNode) adds a new child to parent element.
remove() removes the element itself from DOM.

createElement(tagName)
removeChild
remove

Document.write()

document.write is a powerful method in dom, bcz using this we can write the whole html documnet, inline css and even use tailwind in the single template literals, we can pass variable, tags and something else which we want.

documnet.write()

DOM Events Attributes

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.
To assign events to HTML elements you can use event attributes. The onload and onunload events can be used to deal with cookies. The oninput event is often to some action while the user input data.

List of Events

There are list of events available in js dom for different purposes.
click, dblclick, mouseover, mouseout, mouseout, mouseleave, mousemove, mouseup etc. are events in JavaScript DOM.

Changing HTML

You can use .textContent to change the content, if you pass any tag or something else it can only show as a content.

const para = document.
getElementById("msg");
para.textContent = "Changed 
text using DOM!";

Changing HTML

You can use innerHTML to change the whole tag fully.

const para = document.
getElementById("msg");
para.innerHTML = "This is the
 new content!";

Changing HTML

You can use innerText to change text content in the selected tag.

const para = document.
getElementById("msg");
para.innerText = "Changed 
text using DOM!";

Click Event

The function call when the user clicks the mouse button.

const lives = document.getElementById("control")
lives.addEventListener("click", function() {
  lives.innerText = "Clicked"
});

Double Click Events

The function call when the user clicks the mouse button.

const lives = document.getElementById("control")
lives.addEventListener("dblclick", function() {
  lives.innerText = "Clicked"
});

Mouseover

The function call when the user moves the cursor to the document or page.

const lives = document.getElementById("control")
lives.addEventListener("mouseover", function() {
  lives.innerText = "Clicked"
});

Mouseout

The function call when the user moves the cursor to the element and when the this element go then this function work.

const lives = document.getElementById("control")
lives.addEventListener("mouseout", function() {
  lives.innerText = "Clicked"
});

Mousemove

The function call when the user moves the cursor to the document or page.

const lives = document.getElementById("control")
lives.addEventListener("mousemove", function() {
  lives.innerText = "Clicked"
});

MouseUp

The function call when the user moves the cursor to the document or page.

const lives = document.getElementById("control")
lives.addEventListener("mouseup", function() {
  lives.innerText = "Clicked"
});

Onload function

The onload function is called when the user load the page.

function showMessage() {
const heading = document.getElementById("welcome");
heading.textContent = "Page loaded successfully";
}

Changing CSS

You can use .style to change the css of the html tags. We can change color, backgroundColor font-size, padding, margin and much more.
We can use camelCase a naming style or convention used in programming.

function changeStyle() {
  const p = document.getElementById("text");
  p.style.color = "white";
  p.style.backgroundColor = "blue";
  p.style.fontSize = "24px";
  p.style.padding = "10px";
  p.style.borderRadius = "8px";
}

Changing Colors and Backgrounds

In this example we can change the the color and and background of an element.

function changeStyle() {
  const p = document.getElementById("container");
  p.style.color = "red";
  p.style.backgroundColor = "pink"
  
}

Change margin and padding

In this example we can change the the color and and background of an element.

function changeStyle() {
  const p = document.getElementById("container");
  p.style.margin = "30px";
  p.style.padding = "30px"
  
}

Font size & Border

In this example we can change the font size of the text.

function changeStyle() {
  const p = document.getElementById("container");
  p.style.font-size= "30px";
  p.style.border = "2px solid black"
  
}

Height, Width & Display

In this example we can change the height width and apply flex box as needed.

function changeStyle() {
  const p = document.getElementById("container");
  p.style.height= "200px";
  p.style.width= "300px"
  p.style.display = "flex"
  p.style.justifyContent = "center"
}