Document object model

DOM stands for Document Object Model.

• The DOM is created when the browser loads and parses your HTML file. Means Browser creates one object called "document". it keeps complete html and css into document .
• DOM is a tree-like object model created by the browser that contains all HTML elements and their attributes.

Step-by-Step (What Browser Does)

when we open an HTML file in the browser then

step 1 : Browser reads HTML line by line

step 2 : Browser converts each HTML tag into DOM nodes

• so , Browser is responsible for creating the DOM from the HTML file.
• JavaScript can now access the DOM
• DOM is created BEFORE JavaScript starts manipulating it.
• document object stores html and css in a tree structure called "DOM Tree".
• Each DOM element can have its own CSS styles applied to it.
• DOM is a collection of objects that represent HTML elements.
• Each element node has a tag name, attributes, and content.

HTML file
   ↓
Browser parses HTML
   ↓
DOM Tree created
   ↓
JavaScript interacts with DOM

• we can select the dom elements , manipulate the dom elements as well as we can also create DOM elements with the help of java Script .

How to Select Elements in the Document

• In JavaScript, there are 5 ways to select elements from the document.

1. with the help of getElementById("id")

• here , we select an HTML element from the document object with the help of the id of a particular HTML element.
• It returns the single HTML element reference .

// html 
 <h1 id="title">Hello</h1>

// js 
let headingObjReference = document.getElementById("title");
console.log(headingObjReference);

// In console 
 <h1 id="title">Hello</h1>

2. by using getElementsByClassName('className')

• Here, we select HTML element(s) from the document object with the help of the class name of the HTML element(s).
• It returns an HTMLCollection (array-like object) containing all the HTML element(s) having the given class name.
• With the help of the elements’ references, we can change the content as well as the CSS styles of the HTML elements.

// html 
<p class="text">Hello</p>
<p class="text">World</p>

//js
let allSameClassElementsReference = document.getElementsByClassName("text");

console.log(allSameClassElementsReference );      // HTMLCollection
console.log(allSameClassElementsReference [0]);

HTMLCollection(2) [p.text, p.text]
<p class="text">Hello</p>

3. With the help of getElementsByTagName('tagName')

• Here, we select HTML element(s) from the document object with the help of the tag name of the HTML element(s).
• It returns an HTMLCollection (array-like object) containing all the HTML element(s) having the same tag name.
• With the help of the elements’ references, we can change the content as well as the CSS styles of the HTML elements.

// HTML 
<p>One</p>
<p>Two</p>

// js code
let allSameTagElementsReference = document.getElementsByTagName("p");
console.log(allSameTagElementsReference);

HTMLCollection(2) [p, p]

4. With the help of querySelector('query')

• It selects and returns only the first HTML element that satisfies the given CSS selector query.
• If no element matches the query, it returns null.
• We can use id, class, tag, attribute, or any CSS selector inside querySelector().

In css file , how to access elements with  id , class name , tag name 
- for id , 
         # idName

- for class Name 
           .className

- for tag name 
         tagName

//html

<h1 class="title">Hello</h1>
<h1 class="title">World</h1>

//js 
let element = document.querySelector(".title");
console.log(element);

<h1 class="title">Hello</h1>

//eg 2 
//HTML

<div id="box">
  <p>Hello ApnaMart!</p>
</div>

// js 
let para = document.querySelector("#box p");
console.log(para.innerText); // Hello ApnaMart!

Hello ApnaMart!

5 . With the help of querySelectorAll('query')

• Here, we select all HTML elements from the document object that satisfy the given CSS selector query.
• The returned NodeList is array-like and can be accessed using index.
• With the help of the elements’ references, we can change the content as well as the CSS styles of the HTML elements.

// html
<p class="text">One</p>
<p class="text">Two</p>
<p class="text">Three</p>

// js
let elements = document.querySelectorAll(".text");

console.log(elements);

NodeList(3) [p.text, p.text, p.text]

Modifying Content of an Element

1. innerText – Update Visible Text

2. textContent – Update All Text

3. innerHTML – Update HTML Content

1. innerText – Update Visible Text

• innerText = “visible text only”

• Shows only what we see on page, ignores hidden text

• We can read it or change it

• If element is hidden, innerText may not work properly
  

<div id="box">
  <p>Hello</p>
</div>

<script>
  let box = document.getElementById("box");

  // read content
  console.log(box.innerText); // Hello

  // change content
  box.innerText = "Welcome to ApnaMart!";
</script>

//eg 1

<h1 id="title1">Hello World</h1>
<script>
  let title = document.getElementById("title1");
  title.innerText = "Welcome to ApnaMart!";
</script>

Welcome to ApnaMart!

//eg 2 

<h1 id="title" style="display:none;">Hello World</h1>

<script>
  let title = document.getElementById("title");
  title.innerText = "Welcome to ApnaMart!";
  console.log(title.innerText); // Check in console
</script>

Hello World

2. textContent – Update All Text

• textContent = “all text inside element”

• Shows everything inside element, including hidden text

• We can read it or change it

• Doesn’t care about styles, faster than innerText
  

<div id="box">
  <p>Hello <span style="display:none">Secret</span></p>
</div>

<script>
  let box = document.getElementById("box");

  // read content
  console.log(box.textContent); // Hello Secret

  // change content
  box.textContent = "Shop Online Easily!";
</script>

//eg2

<h1 id="title2">Hidden <span style="display:none">Secret</span> Text</h1>
<script>
  let title = document.getElementById("title2");
  title.textContent = "Shop Online Easily";
</script>

Shop Online Easily

3. innerHTML – Update HTML Content

• innerHTML = “inside HTML”

• Shows everything inside element, even HTML tags

• We can read it or change it

• If we add HTML tags, browser will show them, not as plain text
  

//eg 1 

<div id="box">
  <p>Hello</p>
</div>

<script>
  let box = document.getElementById("box");

  // read content
  console.log(box.innerHTML); // <p>Hello</p>

  // change content
  box.innerHTML = "<b>Welcome to ApnaMart!</b>";
</script>