diff --git a/blog/DOM manipulation in JavaScript.md b/blog/DOM manipulation in JavaScript.md new file mode 100644 index 000000000..ce128b2a9 --- /dev/null +++ b/blog/DOM manipulation in JavaScript.md @@ -0,0 +1,393 @@ +--- +title: 'DOM manipulation in JavaScript' +sidebar_label: DOM-manipulation-in-JavaScript +authors: [dharshibalasubramaniyam] +tags: [dom, javascript] +date: 2024-06-25 +hide_table_of_contents: true +--- + +## 1. Understanding DOM + +- The Document Object Model (DOM) is a programming interface for web documents. + +- This model allows developers to interact with the document programmatically via scripting languages like JavaScript. + +- When a web page is loaded, the browser parses the HTML and creates the DOM. + +- The DOM represents the document as a tree of nodes, where each node is an object representing a part of the document: + +*Document Node*: Represents the entire document. + +*Element Nodes*: Represent HTML elements like `
`, `

`, ``, etc. + +*Text Nodes*: Contain the text content within elements. + +*Attribute Nodes*: Represent the attributes of HTML elements (`class`, `id`, `src` etc.). + +For example, consider the following HTML: + +```html + + + + Example with Attributes + + +

Hello, World!

+

This is a paragraph.

+ + +``` + +For this document, the DOM tree would look like this: + +```graphql +Document + ├── html + │ ├── head + │ │ └── title + │ │ └── "Example with Attributes" + │ └── body + │ ├── h1 + │ │ ├── @class="header" + │ │ ├── @id="main-title" + │ │ ├── @data-info="example" + │ │ └── "Hello, World!" + │ └── p + │ └── "This is a paragraph." +``` + +The DOM plays a central role in web development by enabling developers to create dynamic and interactive web pages. + +- Access and manipulate elements: Developers can use JavaScript to select, modify, and create HTML elements. + +- Handle events: The DOM allows developers to listen for and respond to user events, such as clicks, keypresses, and form submissions. + +- Modify styles: Through the DOM, developers can change the CSS styles of elements dynamically. + +## 2. DOM Manipulation + +### 2.1. Accessing Elements + +- To get an element by its ID in JavaScript, you can use the `getElementById` method. + +```html +
Hello, World!
+``` + + +```js +// Get the element with the ID 'myElement' +const element = document.getElementById('myElement'); + +// Log the element to the console +console.log(element); +``` + +- To get elements by their class, we can use the `getElementsByClassName` method. This method returns a live HTMLCollection of elements with the specified class name. + +```html +
First Element
+
Second Element
+
Third Element
+``` + +```js +// Get the elements with the class name 'myClass' +const elements = document.getElementsByClassName('myClass'); + +// Log the elements to the console +console.log(elements); + +// Optionally, you can iterate over the elements as well +for (let i = 0; i < elements.length; i++) { + console.log(elements[i]) +} +``` + +- To get elements by tag name in the Document Object Model (DOM), we can use the `getElementsByTagName` method. This method allows you to retrieve a collection of elements that match a specified tag name. + +```html +

Hello, World!

+

This is a paragraph.

+
+

Another paragraph inside a div.

+

Second paragraph inside a div.

+
+``` + +```js +// Get all

elements in the document +const paragraphs = document.getElementsByTagName("p"); + +// Loop through and log the text content of each

element +for (let i = 0; i < paragraphs.length; i++) { + console.log(paragraphs[i].textContent); +} +``` + +- The `querySelector` method in JavaScript allows you to select and retrieve the first element that matches a specified CSS selector within the document or within a specific element, + +```js +// Select the first

element in the document +const firstParagraph = document.querySelector("p"); + +// Select the element with id="main-title" +const titleElement = document.querySelector("#main-title"); + +// Select the first element with class="intro" +const introParagraph = document.querySelector(".intro"); + +// Select the first

element inside the

+const paragraphInDiv = document.querySelector("div p"); +``` + +- The `querySelectorAll` method in JavaScript allows you to select and retrieve a list (or NodeList) of all elements that match a specified CSS selector within the document or within a specific element. Unlike `querySelector`, which returns only the first matching element, `querySelectorAll` returns a NodeList containing all matching elements. + +```js + +// Select all

elements in the document +const paragraphs = document.querySelectorAll("p"); + +// Log the number of

elements found +console.log("Number of

elements:", paragraphs.length); + +// Select all elements with class="intro" +const introElements = document.querySelectorAll(".intro"); + +// Select all

  • elements inside the
      +const listItems = document.querySelectorAll("ul li"); + +``` +### 2.2. Modifying Content + +- `innerHTML` allows you to get or set the HTML markup inside an element. + +```js +// HTML element +const divElement = document.getElementById("myDiv"); + +// Get inner HTML content of divElement +const htmlContent = divElement.innerHTML; +console.log("Inner HTML:", htmlContent); + +// Set inner HTML content of divElement +divElement.innerHTML = "

      New content with bold text.

      "; +``` + +- `textContent` allows you to get or set the text content inside an element. + +```js +// HTML element +const paragraphElement = document.getElementById("myParagraph"); + +// Get text content +const textContent = paragraphElement.textContent; +console.log("Text content:", textContent); + +// Set text content +paragraphElement.textContent = "Updated text content."; +``` + +- `innerText` allows you to get or set the visible text content inside an element. + +```js +// HTML element +const spanElement = document.getElementById("mySpan"); + +// Get inner text +// Retrieves the visible text content inside an element, excluding hidden elements or elements with CSS display: none. +const innerText = spanElement.innerText; +console.log("Inner text:", innerText); + +// Set inner text +spanElement.innerText = "Updated inner text."; +``` + +### 2.3. Modifying Attributes + +- Use `getAttribute()` to get the value of an attribute. +- Use `setAttribute()` to set a new value for an attribute. +- Use `removeAttribute()` to remove an attribute. + +```html +
      First Element
      +``` + +```js +// Get the element with the ID 'myElement' +const element = document.getElementById('myElement'); + +// Get the value of an attribute +const classValue = element.getAttribute('class'); +console.log('Class:', classValue); // Output: Class: myClass + +// Set a new value for an attribute +element.setAttribute('class', 'newClass'); +console.log('Updated Class:', element.getAttribute('class')); // Output: Updated Class: newClass + +// Remove an attribute +element.removeAttribute('class'); +console.log(element.hasAttribute('class')); // Output: false +``` + +### 2.4. Creating and Inserting Elements + +- `createElement()` method creates a new HTML element. +- `appendChild()` method appends a node as the last child of a parent node. +- `insertBefore()` method inserts a node before an existing element within a a specified parent node. +- `append()` method appends node to the end of a parent node. +- `prepend()` method inserts node to the beginning of a parent node. + +```html + +
      +
        +
        + +``` + +```js +const container = document.getElementById('container'); +const todolist = document.querySelector('.todo-list'); + +// Create a new element +const newToDo = document.createElement('li'); +newToDo.setAttribute("class", "todo-item") +newToDo.textContent = 'Buy fruits.'; + +// Append the new element as the last child +todolist.appendChild(newToDo); + +// Create another new element +const title = document.createElement('h2'); +newToDo.textContent = 'My tasks'; + +// Insert the title before the list +container.insertBefore(title, todolist); + +// Create yet another new element +const lastElement = document.createElement('div'); +lastElement.textContent = 'Last Element'; + +// Append yet another element as the last child +container.append(lastElement); + +// Create and prepend a new element +const firstElement = document.createElement('div'); +firstElement.textContent = 'First Element'; + +// Prepend the new element as the first child +container.prepend(firstElement); +``` + +### 2.5. Removing Elements + +- `removeChild()` method removes a specified child node from the parent node. The removed child node is returned. + +- `remove()` method removes the element from the DOM. + +```html +
        +
        Child Element
        +
        Another Child Element
        +
        +``` + +```js +// Get the container element +const container = document.getElementById('container'); + +// Get the child element to be removed +const childElement = document.getElementById('childElement'); + +// Remove the child element using removeChild +container.removeChild(childElement); + +// Get another child element to be removed +const anotherChildElement = document.getElementById('anotherChildElement'); + +// Remove the element using remove() +anotherChildElement.remove(); + +``` +### 2.6. Modifying Styles + +- The `style` property allows to set or get inline styles for an element. This directly modifies the style attribute of the element in the DOM. + +```html +
        Hello world!
        +``` + +```js +// Get the element +const element = document.getElementById('myElement'); + +// Change the background color and font size using the style property +element.style.backgroundColor = 'blue'; +element.style.fontSize = '20px'; +``` + +- The `classList` property provides methods to add, remove, and toggle CSS classes on an element. This is a more flexible way to manage an element's classes compared to directly setting the `class` attribute. + +```js +// Get the element +const element = document.getElementById('myElement'); + +// Add a new class to the element +element.classList.add('newClass'); + +// Remove an existing class from the element +element.classList.remove('initialClass'); + +// Toggle a class on the element (add it if it doesn't exist, remove it if it does) +element.classList.toggle('toggledClass'); +``` + +### 2.7. Event Handling + +- The `addEventListener()` method attaches an event handler to an element. It allows multiple event listeners to be added to a single element for the same event type. + +```html + +``` + +```js +// Define the event handler function +function handleClick() { + alert('Button was clicked!'); +} + +// Get the button element +const button = document.getElementById('myButton'); + +// Add a click event listener +button.addEventListener('click', handleClick); +``` + +- The `removeEventListener()` method removes an event handler that was added with `addEventListener()`. + +```js +button.removeEventListener('click', handleClick); +``` + +## Conclusion + +Mastering DOM manipulation is crucial for creating dynamic, interactive web pages. The ability to access, modify, and interact with the DOM using JavaScript allows developers to build responsive and engaging user experiences. + +- **Understanding the DOM**: By understanding the structure and representation of a web document through the DOM, developers can effectively interact with and manipulate web pages. + +- **Accessing Elements**: Methods like `getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`, `querySelector()`, and `querySelectorAll()` enable precise selection of elements within the DOM, facilitating targeted manipulations. + +- **Modifying Content and Attributes**: Techniques such as using `innerHTML`, `textContent`, and `innerText` for content modification, alongside `getAttribute()`, `setAttribute()`, and `removeAttribute()` for attribute management, provide powerful ways to dynamically change the document's content and properties. + +- **Creating and Inserting Elements**: Methods like `createElement()`, `appendChild()`, `insertBefore()`, `append()`, and `prepend()` allow developers to construct and integrate new elements into the DOM, enabling the dynamic construction of web pages. + +- **Removing Elements**: Using `removeChild()` and `remove()` methods facilitates the removal of elements from the DOM, which is essential for maintaining clean and efficient document structures. + +- **Modifying Styles**: Direct manipulation of inline styles via the `style` property and managing classes with classList methods (`add()`, `remove()`, `toggle()`) offer flexible control over the appearance and styling of elements. + +- **Event Handling**: The ability to attach and remove event listeners using `addEventListener()` and `removeEventListener()` empowers developers to create interactive elements that respond to user actions, enhancing the user experience. + +By leveraging these DOM manipulation techniques, developers can create rich, interactive web applications that provide a seamless and dynamic user experience. Understanding and utilizing these tools effectively is key to modern web development.