DOM
MANIPULATION
(Workshop)
Summary
- What is the DOM
- Finding HTML Elements
- Changing HTML Elements
- Writing directly into the HTML output stream
- Event Handlers
- Node Relationships
1_What is the DOM
2.Finding HTML Elements
-
Get element by ID
-
Get elements by class name
-
Get element by tag name
-
querySelector
-
querySelectorAll
2.Finding HTML Elements
a. Get element by ID
let title = document.getElementById(‘header-title’);
The getElementById() method is used to get a single element by its id.
2.Finding HTML Elements
b. Get elements by class name
let items = document.getElementsByClassName(‘list-items’);We can also get more than one object using the getElementsByClassName() method which returns an array of elements.
2.Finding HTML Elements
c. Get element by tag name
let listItems = document.getElementsByTagName(‘li’);We can also get our elements by tag name using the getElementsByTagName() method.
2.Finding HTML Elements
d. querySelector
let header = document.querySelector(‘#header’);let items = document.querySelector(‘.list-items’);let headings = document.querySelector(‘h1’);Get by id:
Get by class:
Get by tag:
2.Finding HTML Elements
d. querySelector
document.querySelector(“h1.heading”);Get more specific elements:
2.Finding HTML Elements
e. querySelectorAll
let heading = document.querySelectorAll(‘h1.heading’);The querySelectorAll() method is completely the same as the querySelector() except that it returns all elements that fit the CSS Selector.
3. Changing HTML Elements
3. Changing HTML Elements
document.getElementById(“#header”).innerHTML = “Hello World!”;a. Changing the HTML
document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"3. Changing HTML Elements
document.getElementsByTag(“img”).src = “test.jpg”;b. Changing a value of an attribute
3. Changing HTML Elements
document.getElementById(id).style.property = new style;c. Changing the style
document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;3. Changing HTML Elements
let div = document.createElement(‘div’);d. Adding elements
let newContent = document.createTextNode("Hello World!");
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);3. Changing HTML Elements
let elem = document.querySelector('#header');
elem.parentNode.removeChild(elem);e. Deleting elements
3. Changing HTML Elements
let div = document.querySelector('#div');
let newDiv = document.createElement(‘div’);
newDiv.innerHTML = "Hello World2"
div.parentNode.replaceChild(newDiv, div);f. Replace elements
4. Writing directly into the HTML output stream
document.write(“<h1>Hello World!</h1><p>This is a paragraph!</p>”);document.write(Date());5. Event Handlers
- mouse click
- page load
- mouse move
- input field change
- etc...
5. Event Handlers
a. Assign Events
<h1 onclick=”this.innerHTML = ‘Hello!’”>Click me!</h1><h1 onclick=”changeText(this)”>Click me!</h1>document.getElementById(“btn”).onclick = changeText();5. Event Handlers
b. Assign Events Listeners
document.getElementById(“btn”).addEventListener('click', runEvent);document.getElementById(“btn”).addEventListener('mouseover', runEvent);6. Node Relationships
6. Node Relationships
a. Navigating Between Nodes
We can navigate between nodes using these properties:
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
let parent = document.getElementById(“heading”).parentNode