Science Knowings: JavaScript Course For Social Media

DOM (Document Object Model)

Revisiting OOP and DOM

OOP Recap

Before diving into DOM, let's do a quick recap of OOP(Object-Oriented Programming) concepts, which are essential for understanding the DOM.

In OOP, we organize code into objects, which are reusable and modular units that represent real-world entities.

DOM Introduction

The Document Object Model (DOM) provides a tree-like representation of our HTML document, allowing us to interact with its content and structure programmatically.

What is the DOM (Document Object Model)?

Understanding the DOM

The DOM is a programming interface that allows us to access and manipulate HTML and XML documents.

  • It represents the document as a hierarchical tree of objects, with the document object as the root.
  • Each node in the tree represents a part of the document, such as elements, text, comments, etc.

Relationship Between HTML, CSS, and DOM

HTML, CSS, and DOM

HTML provides the structure of our document, CSS styles it, and DOM allows us to interact with it dynamically in JavaScript.

ComponentRole
HTMLDefines the content and structure of the webpage.
CSSStyles the webpage, controlling its appearance (colors, fonts, layout).
DOMProvides a programmatic interface to access and manipulate the HTML document.

Accessing the DOM

Accessing the DOM

There are several methods to access elements in the DOM.

getElementById() Method

Retrieves an element by its unique id attribute.

document.getElementById('element-id');

querySelector() Method

Selects the first element that matches a specified CSS selector.

document.querySelector('css-selector');

querySelectorAll() Method

Selects all elements that match a specified CSS selector.

document.querySelectorAll('css-selector');

DOM Element Properties

DOM Element Properties

DOM elements have various properties that provide information about their state and content.

  • .innerHTML: Gets or sets the HTML content within an element.
  • .innerText: Gets or sets the text content of an element.
  • .classList: Contains a list of CSS classes applied to the element.
  • .style: Allows access and modification of element styles.

Manipulating the DOM

Manipulating the DOM

DOM manipulation allows us to dynamically change the content and structure of the document.

Creating, Appending, and Removing Elements

  • document.createElement(): Creates a new HTML element.
  • .appendChild(): Adds a new element as a child of another element.
  • .removeChild(): Removes a child element from its parent.

Changing Element Attributes

Changing Element Attributes

We can modify element attributes using the .setAttribute() and .getAttribute() methods.

element.setAttribute('attribute-name', 'value');

Event Handling

Event Handling

DOM events allow us to respond to user interactions, such as clicking or hovering over an element.

Event Listeners

Event listeners are functions that are executed when a specific event occurs.

element.addEventListener('event-name', function() { ... });

DOM Events

DOM Events

Common DOM events include:

  • click: Triggered when an element is clicked.
  • mouseover: Triggered when the mouse cursor enters an element's area.
  • submit: Triggered when a form is submitted.

Next Topic: DOM Selection Methods

DOM Selection Methods

In the next session, we'll explore DOM selection methods in depth to efficiently target and manipulate elements in our HTML documents.

Follow us to continue your JavaScript journey!