JavaScript and DOM

DOM

Document Object Model

  • DOM is actually a document's "object model".

     
  • On the web, an HTML file is referred to as a document.
  • And representing the HTML document as a Javascript object is called modelling.
  • Representation of HTML tags, and their  attributes as JavaScript objects is the DOM.
  • Every HTML element is called a Node in the DOM.

DOM Tree

  • The backbone of an HTML document is tags.
  • According to the Document Object Model (DOM), every HTML tag is an object. 
  • Everything in HTML, even comments, becomes a part of the DOM.

  • There are 12 node types. In practice we usually work with 4 of them:

    document – the “entry point” into DOM.
    element nodes – HTML-tags, the tree building blocks.
    text nodes – contain text.
    comments – sometimes we can put information there, it won’t be shown on UI, but JS can read it from the DOM.

DOM Tree

  • Understanding the DOM Tree
  • The Dev Tools (Inspect Element) show us the entire HTML of the page, you can see the CSS as well.
  • You can edit any of HTML, CSS and JS in-place using the DevTools.

DOM Tree 

<div id="myId">This is an element with ID</div>
<div class="myClass">This is an element with class</div>
<input type="text" name="myName" value="Input name">
<div>This is a div element</div>
<div class="myClass">This element with class</div>
<p>This is a paragraph</p>
// document.getElementById
const myElement = document.getElementById('myId');
console.log(myElement.textContent);

// document.getElementsByClassName
const elementsByClass = document.getElementsByClassName('myClass');
for (let i = 0; i < elementsByClass.length; i++) {
    console.log(elementsByClass[i].textContent);
}

// document.getElementsByName
const elementsByName = document.getElementsByName('myName');
console.log(elementsByName[0].value);

// document.getElementsByTagName
const divElements = document.getElementsByTagName('div');
for (let i = 0; i < divElements.length; i++) {
    console.log(divElements[i].textContent);
}

DOM Tree

Modifying Elements:

  • setAttribute
  • getAttribute
  • innerHTML
  • innerText
  • createElement
  • appendChild
  • prependChild
  • append
  • prepend
  • removeChild
<div id="myDiv">Initial content</div>

DOM Tree 

// Set attribute
const myDiv = document.getElementById('myDiv');
myDiv.setAttribute('class', 'highlight');

// Get attribute
const classValue = myDiv.getAttribute('class');
console.log(classValue); // Output: highlight

// InnerHTML
myDiv.innerHTML = '<p>This is <strong>new</strong> content</p>';

// InnerText
myDiv.innerText = 'This is new text content';

// Create element and append
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph element';
myDiv.appendChild(newElement);

// Prepend child
const newChild = document.createElement('div');
newChild.textContent = 'This is a prepended div';
myDiv.prepend(newChild);

// Append
const appendedElement = document.createElement('span');
appendedElement.textContent = 'This is appended content';
myDiv.append(appendedElement);

// Prepend
const prependedElement = document.createElement('span');
prependedElement.textContent = 'This is prepended content';
myDiv.prepend(prependedElement);

// Remove child
myDiv.removeChild(newElement);

DOM Tree

Events: Any action being done on the UI is called an event.

Ex:

  • Appearing of your webpage on the browser,
  • refreshing the browser,
  • right click,
  • left click,
  • mouse enter,
  • mouse leave,
  • scrolling the page,
  • typing something from keyboard,
  • pressing back or space button,
  • submitting a form,
  • losing or reconnecting to internet

etc, all the above are different types of events which you have access to. You can set triggers based on these events.

DOM Tree 

<button id="myButton">Click me</button>
<div id="myElement" 
     style="width: 100px; height: 100px; background-color: red;">
</div>
<div id="myElement" 
     style="width: 100px; height: 100px; background-color: blue;">
</div>
<input type="text" id="myInput" placeholder="Type something...">

<form id="myForm">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Submit</button>
</form>

<select id="mySelect">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked!');
});

document.getElementById('myElement').addEventListener('mouseover', function() {
    console.log('Mouse over the element!');
});

document.getElementById('myElement').addEventListener('mouseout', function() {
    console.log('Mouse out of the element!');
});

document.addEventListener('keydown', function(event) {
    console.log('Key pressed: ' + event.key);
});

document.addEventListener('keyup', function(event) {
    console.log('Key released: ' + event.key);
});

document.getElementById('myInput').addEventListener('focus', function() {
    console.log('Input field focused!');
});

document.getElementById('myInput').addEventListener('blur', function() {
    console.log('Input field blurred!');
});

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    console.log('Form submitted!');
});

document.getElementById('mySelect').addEventListener('change', function() {
    console.log('Option changed!');
});

window.addEventListener('resize', function() {
    console.log('Window resized!');
});

DOM Tree

Event Propagation: mechanism by which events propagate through the DOM tree. It is implemented by browsers and in either of 2 ways:

Event Bubbling:

Event bubbling is the default behaviour in which an event first triggers on the innermost target element, then bubbles up through its ancestor elements in the DOM tree until it reaches the root of the document (i.e., the window object). This means that the event handlers on the ancestor elements are also executed in sequence.

Event Capturing:

Event capturing is the opposite of event bubbling. It involves the event starting from the root of the document and trickling down through the DOM tree to the target element. Once the event reaches the target element, it triggers the event handlers attached to it.

DOM Tree

Difference:-
Event Bubbling and Event Capturing:

The main difference is in the direction in which the event propagates through the DOM tree.


Bubbling moves from the target element upwards to the ancestors, while capturing moves from the root downwards to the target element.

DOM Tree

Event Delegation:

Event delegation is a design pattern in which instead of attaching event handlers directly to individual elements, you attach a single event handler to a common ancestor element of the target elements. This handler then listens for events that bubble up from the target elements.

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

// const listParent = document.getElementById('myList')
listParent.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Clicked on ' + event.target.textContent);
    }
});

W7_D1

By Yash Priyam

W7_D1

  • 132

More from Yash Priyam