GIRLSCRIPT EDUCATION OUTREACH PROGRAM
DOM Manipulation in JS
Day - 3
So, what is DOM?
Document
Object
Model
What it does?
When a web page is loaded, the browser creates a Document Object Model of the page.
The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
Anatomy of HTML tags
Anatomy of HTML tags
DOM Structure
The HTML DOM model is constructed as a tree of Objects:
What can be done with DOM?
- JavaScript can change all the HTML elements in the page
- JavaScript can change all the HTML attributes in the page
- JavaScript can change all the CSS styles in the page
- JavaScript can remove existing HTML elements and attributes
- JavaScript can add new HTML elements and attributes
- JavaScript can react to all existing HTML events in the page
- JavaScript can create new HTML events in the page
What does DOM do?
- The HTML elements as objects
- The properties of all HTML elements
- The methods to access all HTML elements
- The events for all HTML elements
In short,
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>getElementById is a method, while innerHTML is a property.
getElementById Method
The most common way to access an HTML element is to use the id of the element.
In the example above the getElementById method used id="demo" to find the element.
innerHTML Property
The easiest way to get the content of an element is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.
Finding HTML Elements
Methods for
| Method | Description |
|---|---|
| document.getElementById(id) | Find an element by element id |
| document.getElementsByTagName(name) | Find elements by tag name |
| document.getElementsByClassName(name) | Find elements by class name |
| document.querySelector(id / class) | Find by query |
| document.querySelectorAll(id / class) |
Find all elements with the same query |
Changing HTML Elements
Properties for
| Property | Description |
|---|---|
| element.innerHTML = New html content | Change the inner HTML of an element |
| element.attribute = New value | Change the attribute value of an HTML element |
| element.style.property = New style | Find elements by class name |
Event handlers & Event Listener
Methods for
Event Handler
- An event handler is a JavaScript function that runs when an event fires.
- Only one event at a time with one element.
- Example: onclick="changeText()"
Event Listener
- An event listener attaches a responsive interface to an element, which allows that particular element to wait and “listen” for the given event to fire.
- We can assign multiple events at the same time to the element.
- Example: addEventListener()
| Method | Description |
|---|---|
| click | Fires when the mouse is pressed and released on an element |
| submit | Fires when a form is submitted |
| focus | Fires when an element (such as an input) receives focus |
| blur | Fires when an element loses focus |
| keypress | Fires continuously while a key is pressed |