DOM
MANIPULATION
(Workshop)

Summary

  1. What is the DOM
  2. Finding HTML Elements
  3. Changing HTML Elements
  4. Writing directly into the HTML output stream
  5. Event Handlers
  6. 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

Thank You

DOM Manipulation #Workshop

By Haythem Ben Drissia

Made with Slides.com

DOM Manipulation #Workshop

  • 2,106

More from Haythem Ben Drissia