DOM Manipulation

Accessing Elements

The basic concept in DOM manipulation is accessing HTML elements using methods like getElementById, getElementsByClassName, or getElementsByTagName.

01 Accessing Elements

• index.html
• style.css
• app.js

Modifying Content

You can modify the content of an HTML element using properties like innerHTML or textContent. For example, you can change the text within an element or add new elements inside an existing one.

• 02 Modifying Content
  • index.html
  • style.css
  • app.js

Modifying Attributes

You can change or add attributes for an HTML element using methods like setAttribute or removeAttribute. For example, you can change the source of an image or add a class to an element.

• 03 Modifying Attributes
  • index.html
  • style.css
  • app.js

Manipulating CSS Styles

You can manipulate the CSS styles of HTML elements using the style property. For instance, you can change the background color or dimensions of an element.

• 04 Manipulating CSS Styles
  • index.html
  • style.css
  • app.js

Adding and Removing Classes

You can add or remove classes for an HTML element using methods like classList.add, classList.remove, or classList.toggle. This allows you to apply or remove specific CSS styles for that element.

• 05 Adding and Removing Classes
  • index.html
  • style.css
  • app.js

Handling Events

You can attach or remove events for an HTML element using methods like addEventListener or removeEventListener. This allows you to respond to user actions, such as a click on an element or hovering over it.

• 06 Handling Events
  • index.html
  • style.css
  • app.js

Traversing and Modifying the DOM Tree

You can traverse and modify the DOM tree using methods like parentNode, childNodes, nextSibling, and previousSibling. These methods allow you to navigate between elements and make changes accordingly.

• 07 Traversing and Modifying the DOM Tree
  • index.html
  • style.css
  • app.js

Creating New Elements

You can create new HTML elements using the createElement method and add them to the DOM using methods like appendChild or insertBefore. This enables you to generate and add dynamic content to the page.

• 08 Creating New Elements
  • index.html
  • style.css
  • app.js

Removing Elements

You can remove an element from the DOM using the remove method or by removing it from its parent using the removeChild method. This allows you to eliminate unnecessary elements or temporarily hide them.

• 09 Removing Elements
  • index.html
  • style.css
  • app.js

Manipulating Input Values

You can access and modify the input values of HTML elements, such as text fields, selects, or checkboxes. This way, you can retrieve or update the data entered by the user.

• 10 Manipulating Input Values
  • index.html
  • style.css
  • app.js