From 99a10150ad9fb229e8f3e13222b9c2a55dbb1abd Mon Sep 17 00:00:00 2001 From: Dharshi Balasubramaniyam <139672976+DharshiBalasubramaniyam@users.noreply.github.com> Date: Tue, 25 Jun 2024 20:57:30 +0530 Subject: [PATCH 1/3] Create DOM manipulation in JavaScript.md --- blog/DOM manipulation in JavaScript.md | 393 +++++++++++++++++++++++++ 1 file changed, 393 insertions(+) create mode 100644 blog/DOM manipulation in JavaScript.md diff --git a/blog/DOM manipulation in JavaScript.md b/blog/DOM manipulation in JavaScript.md new file mode 100644 index 000000000..ec6dc6dee --- /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' +var 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' +var elements = document.getElementsByClassName('myClass'); + +// Log the elements to the console +console.log(elements); + +// Optionally, you can iterate over the elements as well +for (var 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 +var paragraphs = document.getElementsByTagName("p"); + +// Loop through and log the text content of each

element +for (var 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 +var firstParagraph = document.querySelector("p"); + +// Select the element with id="main-title" +var titleElement = document.querySelector("#main-title"); + +// Select the first element with class="intro" +var introParagraph = document.querySelector(".intro"); + +// Select the first

element inside the

+var 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 +var paragraphs = document.querySelectorAll("p"); + +// Log the number of

elements found +console.log("Number of

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

  • elements inside the
      +var 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 +var divElement = document.getElementById("myDiv"); + +// Get inner HTML content of divElement +var 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 +var paragraphElement = document.getElementById("myParagraph"); + +// Get text content +var 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 +var spanElement = document.getElementById("mySpan"); + +// Get inner text +// Retrieves the visible text content inside an element, excluding hidden elements or elements with CSS display: none. +var 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' +var element = document.getElementById('myElement'); + +// Get the value of an attribute +var 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 +var 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 +var title = document.createElement('h2'); +newToDo.textContent = 'My tasks'; + +// Insert the title before the list +container.insertBefore(title, todolist); + +// Create yet another new element +var 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 +var 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 +var container = document.getElementById('container'); + +// Get the child element to be removed +var childElement = document.getElementById('childElement'); + +// Remove the child element using removeChild +container.removeChild(childElement); + +// Get another child element to be removed +var 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 +var 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 +var 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 +var 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. From 48c26c91094ce808f4ad60c0f76a9ddee5628985 Mon Sep 17 00:00:00 2001 From: Dharshi Balasubramaniyam <139672976+DharshiBalasubramaniyam@users.noreply.github.com> Date: Thu, 27 Jun 2024 14:30:54 +0530 Subject: [PATCH 2/3] Update DOM manipulation in JavaScript.md --- blog/DOM manipulation in JavaScript.md | 60 +++++++++++++------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/blog/DOM manipulation in JavaScript.md b/blog/DOM manipulation in JavaScript.md index ec6dc6dee..3b8d4ebe3 100644 --- a/blog/DOM manipulation in JavaScript.md +++ b/blog/DOM manipulation in JavaScript.md @@ -79,7 +79,7 @@ The DOM plays a central role in web development by enabling developers to create ```js // Get the element with the ID 'myElement' -var element = document.getElementById('myElement'); +const element = document.getElementById('myElement'); // Log the element to the console console.log(element); @@ -95,13 +95,13 @@ console.log(element); ```js // Get the elements with the class name 'myClass' -var elements = document.getElementsByClassName('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 (var i = 0; i < elements.length; i++) { +for (let i = 0; i < elements.length; i++) { console.log(elements[i]) } ``` @@ -119,10 +119,10 @@ for (var i = 0; i < elements.length; i++) { ```js // Get all

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

        element -for (var i = 0; i < paragraphs.length; i++) { +for (let i = 0; i < paragraphs.length; i++) { console.log(paragraphs[i].textContent); } ``` @@ -131,16 +131,16 @@ for (var i = 0; i < paragraphs.length; i++) { ```js // Select the first

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

        element inside the

        -var paragraphInDiv = document.querySelector("div p"); +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. @@ -148,16 +148,16 @@ var paragraphInDiv = document.querySelector("div p"); ```js // Select all

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

        elements found console.log("Number of

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

      • elements inside the
          -var listItems = document.querySelectorAll("ul li"); +const listItems = document.querySelectorAll("ul li"); ``` ### 2.2. Modifying Content @@ -166,10 +166,10 @@ var listItems = document.querySelectorAll("ul li"); ```js // HTML element -var divElement = document.getElementById("myDiv"); +const divElement = document.getElementById("myDiv"); // Get inner HTML content of divElement -var htmlContent = divElement.innerHTML; +const htmlContent = divElement.innerHTML; console.log("Inner HTML:", htmlContent); // Set inner HTML content of divElement @@ -180,10 +180,10 @@ divElement.innerHTML = "

          New content with bold text.

          "; ```js // HTML element -var paragraphElement = document.getElementById("myParagraph"); +const paragraphElement = document.getElementById("myParagraph"); // Get text content -var textContent = paragraphElement.textContent; +const textContent = paragraphElement.textContent; console.log("Text content:", textContent); // Set text content @@ -194,11 +194,11 @@ paragraphElement.textContent = "Updated text content."; ```js // HTML element -var spanElement = document.getElementById("mySpan"); +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. -var innerText = spanElement.innerText; +const innerText = spanElement.innerText; console.log("Inner text:", innerText); // Set inner text @@ -217,10 +217,10 @@ spanElement.innerText = "Updated inner text."; ```js // Get the element with the ID 'myElement' -var element = document.getElementById('myElement'); +const element = document.getElementById('myElement'); // Get the value of an attribute -var classValue = element.getAttribute('class'); +const classValue = element.getAttribute('class'); console.log('Class:', classValue); // Output: Class: myClass // Set a new value for an attribute @@ -253,7 +253,7 @@ const container = document.getElementById('container'); const todolist = document.querySelector('.todo-list'); // Create a new element -var newToDo = document.createElement('li'); +const newToDo = document.createElement('li'); newToDo.setAttribute("class", "todo-item") newToDo.textContent = 'Buy fruits.'; @@ -261,21 +261,21 @@ newToDo.textContent = 'Buy fruits.'; todolist.appendChild(newToDo); // Create another new element -var title = document.createElement('h2'); +const title = document.createElement('h2'); newToDo.textContent = 'My tasks'; // Insert the title before the list container.insertBefore(title, todolist); // Create yet another new element -var lastElement = document.createElement('div'); +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 -var firstElement = document.createElement('div'); +const firstElement = document.createElement('div'); firstElement.textContent = 'First Element'; // Prepend the new element as the first child @@ -297,16 +297,16 @@ container.prepend(firstElement); ```js // Get the container element -var container = document.getElementById('container'); +const container = document.getElementById('container'); // Get the child element to be removed -var childElement = document.getElementById('childElement'); +const childElement = document.getElementById('childElement'); // Remove the child element using removeChild container.removeChild(childElement); // Get another child element to be removed -var anotherChildElement = document.getElementById('anotherChildElement'); +const anotherChildElement = document.getElementById('anotherChildElement'); // Remove the element using remove() anotherChildElement.remove(); @@ -322,7 +322,7 @@ anotherChildElement.remove(); ```js // Get the element -var element = document.getElementById('myElement'); +const element = document.getElementById('myElement'); // Change the background color and font size using the style property element.style.backgroundColor = 'blue'; @@ -333,7 +333,7 @@ element.style.fontSize = '20px'; ```js // Get the element -var element = document.getElementById('myElement'); +const element = document.getElementById('myElement'); // Add a new class to the element element.classList.add('newClass'); @@ -360,7 +360,7 @@ function handleClick() { } // Get the button element -var button = document.getElementById('myButton'); +const button = document.getElementById('myButton'); // Add a click event listener button.addEventListener('click', handleClick); From cb5720d4359eec700d506bf7e207ade8b2cf09e1 Mon Sep 17 00:00:00 2001 From: Dharshi Balasubramaniyam <139672976+DharshiBalasubramaniyam@users.noreply.github.com> Date: Thu, 27 Jun 2024 14:37:24 +0530 Subject: [PATCH 3/3] Update DOM manipulation in JavaScript.md --- blog/DOM manipulation in JavaScript.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/blog/DOM manipulation in JavaScript.md b/blog/DOM manipulation in JavaScript.md index 3b8d4ebe3..ce128b2a9 100644 --- a/blog/DOM manipulation in JavaScript.md +++ b/blog/DOM manipulation in JavaScript.md @@ -376,18 +376,18 @@ button.removeEventListener('click', handleClick); 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. +- **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. +- **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. +- **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. +- **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. +- **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. +- **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. +- **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.