DOM manipulation

• The Document Object Model (DOM) represents the document (the web page) as a tree of nodes (or objects or elements)
• With JavaScript, you can modify (add/remove/change) the entire DOM

node types	description
window	represents the browser window
document	represents the entire document (the root node of the DOM tree)
element node	represents an element (an HTML tag)
attribute node	the attribute of an element
text node	the text inside an element
comment node	comments inside an element

REMARK

• The Elements tab inside Chrome's DevTools shows the (modified) DOM (after execution of the scripts), which can differ a lot from the original HTML code (CTRL + U)
  • For example for stubru.be (opens new window), both the original HTML code (only scripts!) and the DOM code are very different ...

Select elements

• Before you can modify the DOM, we first have to select an element on the page
• The four most commonly used selection methods are:

selector	description
document.body (opens new window)	select the body element
document.getElementById(<id>) (opens new window)	select the element whose id equals <id>
document.querySelectorAll(<CSS selector>) (opens new window)	select ALL elements matching <CSS selector>
document.querySelector(<CSS selector>) (opens new window)	select THE FIRST element matching <CSS selector>

• Open the developer console on this page and use REPL to select some elements
  • document.body
  • document.getElementById('app')
  • document.querySelector('img')
  • document.querySelector('img[alt=DOM]')
  • document.querySelectorAll('h2')

TIP

You can test your CSS selector knowledge using document.querySelectorAll() on this page:
https://itf-es6.netlify.app/es6/dom/querySelector.html (opens new window)

Loop over NodeList

• document.getElementById() and document.querySelector() always return one element
• On the other hand, document.querySelectorAll() always returns a NodeList, even if there is only one item selected
• A NodeList can be iterated as an array
• We are going to demonstrate briefly how to retrieve and use each element within a NodeList (such that we can use it later on in the course and in the exercises)
• Open es6/dom/nodelist.html and es6/dom/nodelist.js, where we have a list of buttons and want some information about every button:

<div id="buttongroup">
    <button class="primary">primary button</button>
    <button class="secondary">secondary button</button>
    <button class="tertiary">tertiary button</button>
</div>

• Line 2: select all buttons
• Line 6 to 9: loop, with the forEach() (opens new window) method, over the NodeList of buttons
  • The first parameter of the callback function inside forEach() represents the element (the button)
  • The second (optional) parameter is the index inside the loop
• Line 8: outputs the information about every button to the console

// select all buttons inside #buttongroup
const buttons = document.querySelectorAll('#buttongroup button');
console.log('buttons', buttons);

// loop over the buttons inside the NodeList
buttons.forEach(function (button, index) {
    // log information about every button
    console.log('button', index, button);
});

Modify content

property	description
<element>.textContent (opens new window)	get or set ALL text inside the <element> (including spaces and hidden text)
<element>.innerText (opens new window)	get or set only the VISIBLE text inside the <element> (including spaces but without hidden text)
<element>.innerHTML (opens new window)	get or set the HTML content inside <element>

• Open es6/dom/content.html and es6/dom/content.js

• The HTML contains some text (p#quote) and an unordered list (ul)
• Inside p#quote there is some hidden text

<main class="container">
    <h1>Modifying content</h1>
    <p id="quote">
        Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>.<br />
        Adipisci dolores <span style="display: none">with invisible text</span>?
    </p>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    ....
</main>

• Line 2 to 4: log the content of p#quote with three different methods in the console
  • textContent gets all the text, even the invisible text
  • innerText gest only the visible part of the text
• Line 10 to 12: modify the content of the three list items

const p = document.getElementById('quote');
console.log('p.textContent:', p.textContent); // get ALL the text inside p
console.log('p.innerText:', p.innerText); // get only the VISIBLE text inside p
console.log('p.innerHTML:', p.innerHTML); // get the HTML content inside p

const li1 = document.querySelector('main li:first-child');
const li2 = document.querySelector('main li:nth-child(2)');
const li3 = document.querySelector('main li:last-child');

li1.textContent = 'New first item'; // replace the content of the first item with new TEXT
li2.textContent = 'New second item with <b>bold text</b>?'; // replace the content of the second item with TEXT
li3.innerHTML = 'New last item with <b>bold text</b>!'; // replace the content of the last item with HTML

Modify attributes

• Every HTML element can have some (default) attributes: e.g. src, title, href, ...

method	description
<element>.getAttribute(<attribute>) (opens new window)	get the <attribute> of the <element>
<element>.setAttribute(<attribute>, <value>) (opens new window)	set the <attribute> of the <element> to <value>
<element>.<attribute>	shorthand to get/set the <attribute> of the <element>
<element>.hasAttribute(<attribute>) (opens new window)	check if the <attribute> exists on the <element>: returns true or false
<element>.removeAttribute(<attribute>) (opens new window)	remove the <attribute> on the <element>
<element>.attributes	get all the attributes on the <element>

• Open es6/dom/attributes.html and es6/dom/attributes.js

<main class="container">
    <h1>Modifying attributes</h1>
    <div id="fotoFrame">
        <img src="https://picsum.photos/id/623/200/200" alt="Image 1" />
        <img src="https://picsum.photos/id/626/200/200" alt="Image 2" />
        <img src="https://picsum.photos/id/641/200/200" alt="Image 3" />
        <img src="https://picsum.photos/id/744/200/200" alt="Image 4" />
    </div>
    ....
</main>

// first image: add the title-attribute
const img1 = document.querySelector('main img:first-child');
img1.title = 'A new title for the first image';

// second image: copy the alt-attribute to the title-attribute
const img2 = document.querySelector('main img:nth-child(2)');
img2.title = img2.alt;

// third image: replace the image itself
document.querySelector('main img:nth-child(3)').src = 'https://picsum.photos/id/742/200/200';

// last image: add multiple attributes
const img4 = document.querySelector('main img:last-child');
img4.setAttribute('title', 'A new title for the last image');
img4.setAttribute('width', '100px');
img4.setAttribute('height', '100px');

<div id="fotoFrame">
    <img src="https://picsum.photos/id/623/200/200" alt="Image 1" title="A new title for the first image">
    <img src="https://picsum.photos/id/626/200/200" alt="Image 2" title="Image 2">
    <img src="https://picsum.photos/id/742/200/200" alt="Image 3">
    <img src="https://picsum.photos/id/744/200/200" alt="Image 4" title="A new title for the last image" width="100px" height="100px">
</div>

WARNING

• Always use <element>.value to get/set the value of an input/form element
  • <element>.getAttribute('value') returns the initial value of the element's value attribute (even if/after the input element is changed by the user!)
  • <element>.setAttribute('value', ...) (only) changes the (initial) value attribute of the element (and not the current value of the element)

The data-* attribute

• data-* attributes are a very handy way to add valid, custom attributes to an element (and thus, to store custom data with an element)
• The attribute name should not contain any uppercase letters, and must be at least one character long after the data- prefix
  • Examples: data-id, data-photographer, data-unsplash-url, ...
• data-* attributes are available via the dataset property:

property	example	description
<element>.dataset.* (opens new window)		get or set the data-* attribute of the <element>
	<element>.dataset.photographer	use only the suffix after data- (data-abc <=> <element>.dataset.abc)
	<element>.dataset.unsplashUrl	if the suffix contains (a) hypen(s), write the suffix in camelCase (data-abc--opq-xyz <=> <element>.dataset.abcOpqXyz

• Open es6/dom/data_attributes.html and es6/dom/data_attributes.js

<figure>
    <img src="https://picsum.photos/id/855/600/400" alt="" id="img1"
        data-photographer="Rodion Kutsaev"
        data-unsplash-url="https://unsplash.com/photos/IJ25m7fXqtk"
        />
    <figcaption></figcaption>
</figure>

const img = document.getElementById('img1');
console.log(img.dataset);

// fill the figcaption with the data-* attributes
const caption = document.querySelector('figcaption');
caption.innerHTML = `
  <b>Photographer</b>: ${img.dataset.photographer}<br>
  <b>URL</b>: <a href="${img.dataset.unsplashUrl}" target="_blank">${img.dataset.unsplashUrl}</a>
`;

// add a new data-* attribute for later use...
img.dataset.newAttribute = 'New attribute';

<figure>
    <img src="https://picsum.photos/id/855/600/400" alt="" id="img1" 
         data-photographer="Rodion Kutsaev" 
         data-unsplash-url="https://unsplash.com/photos/IJ25m7fXqtk" 
         data-new-attribute="New attribute">
    <figcaption>
        <b>Photographer</b>: Rodion Kutsaev<br>
        <b>URL</b>: <a href="https://unsplash.com/photos/IJ25m7fXqtk" target="_blank">https://unsplash.com/photos/IJ25m7fXqtk</a>
    </figcaption>
</figure>

Modify classes

property	description
<element>.className (opens new window)	get or replace all the classes on the <element>
<element>.classList (opens new window)	get all the classes on the <element>
<element>.classList.add(<c1>, ...)	add class(es) to the <element>
<element>.classList.remove(<c1>, ...)	remove class(es) from the <element>
<element>.classList.replace(<c1>, <c2>)	replace class <c1> by <c2> on the <element>
<element>.classList.toggle(<c>)	toggle the class <c> on the <element>: - add the class if it doesn't exist - remove the class if it exists
<element>.classList.contains(<c>)	check if the class <c> exists on the <element>: returns true or false

• Open es6/dom/classes.html and es6/dom/classes.js

<html lang="en">
    <head>
        ...
        <style>
            .border { border: 1px solid #000;  padding: 0.3rem; margin: 0.5rem; }
            .sepia { filter: sepia(1); }
            .grayscale { filter: grayscale(80%); }
            .red { background-color: indianred; }
            .green { background-color: yellowgreen; }
            .shadow { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); }
        </style>
    </head>
    <body>
        ...
        <div id="fotoFrame">
            <img src="https://picsum.photos/id/623/200/200" alt="Image 1" class="border" />
            <img src="https://picsum.photos/id/626/200/200" alt="Image 2" class="border red" />
            <img src="https://picsum.photos/id/641/200/200" alt="Image 3" class="border" />
            <img src="https://picsum.photos/id/744/200/200" alt="Image 4" class="border green" />
        </div>
        ...
    </body>
</html>

const img1 = document.querySelector('#fotoFrame img:first-child');
console.log('classList', img1.classList);
console.log('className', img1.className);
// replace the original class(es) with new classes
img1.className = 'shadow grayscale';

const img2 = document.querySelector('#fotoFrame img:nth-child(2)');
img2.classList.remove('border', 'red');
img2.classList.add('sepia');

const img3 = document.querySelector('#fotoFrame  img:nth-child(3)');
img3.classList.toggle('green');

const img4 = document.querySelector('#fotoFrame  img:last-child');
img4.classList.replace('green', 'red');
console.log('contains', img4.classList.contains('red'));

<div id="fotoFrame">
    <img src="https://picsum.photos/id/623/200/200" alt="Image 1" class="shadow grayscale">
    <img src="https://picsum.photos/id/626/200/200" alt="Image 2" class="sepia">
    <img src="https://picsum.photos/id/641/200/200" alt="Image 3" class="border green">
    <img src="https://picsum.photos/id/744/200/200" alt="Image 4" class="border red">
</div>

Modify inline styles

property	description
<element>.style (opens new window)	get all the inline style properties on the <element>
<element>.style.<property>	get/set the inline style <property> on the <element> (use camelCase notation for multi-word properties)
<element>.style.<property> = ''	set the new value to an empty string to remove the <property>

• Open es6/dom/styles.html and es6/dom/styles.js

<figure>
    <img src="https://picsum.photos/id/76/600/400" alt="" id="img1" 
        style="padding: 1rem" />
</figure>

const img1 = document.querySelector('#img1');
console.log('style', img1.style);
console.log('padding', img1.style.padding);
img1.style.border = 'solid 3px #50a551';
// use camelCase backgroundColor instead of background-color
img1.style.backgroundColor = 'rgba(80, 165, 81, 0.1)';

<figure>
    <img src="https://picsum.photos/id/76/600/400" alt="" id="img1" 
        style="padding: 1rem; border: 3px solid rgb(80, 165, 81); background-color: rgba(80, 165, 81, 0.1);">
</figure>

Modify elements

property	description
<element>.remove() (opens new window)	remove <element> from the DOM
document.createElement(<tag>) (opens new window)	create an element node of type <tag>
document.createTextNode(<str>) (opens new window)	create a text node containing <str> (not really necessary if you use innerHTML, innerText or textContent)
<element>.replaceWith(<node(s)>) (opens new window)	replace the selected <element> with new <node(s)>
<element>.append(<node(s)>) (opens new window)	insert <node(s)> at the end of the selected <element>
<element>.prepend(<node(s)>) (opens new window)	insert <node(s)> at the beginning of the selected <element>
<element>.before(<node(s)>) (opens new window)	insert <node(s)> before the selected <element>
<element>.after(<node(s)>) (opens new window)	insert <node(s)> after the selected <element>

• Open es6/dom/elements.html and es6/dom/elements.js

<main class="container">
    <h1>Modifying elements</h1>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    ...
</main>

const h1 = document.querySelector('h1');
// remove h1
h1.remove();

const ul = document.querySelector('main ul');
// add HTML before ul
const bqBefore = document.createElement('blockquote');
bqBefore.innerHTML = 'Insert a blockquote <b>before</b> ul';
ul.before(bqBefore);

// add HTML after ul
const bqAfter = document.createElement('blockquote');
bqAfter.innerHTML = 'Insert a blockquote <b>after</b> ul';
ul.after(bqAfter);

// Add text inside ul
const liFirst = document.createElement('li');
liFirst.innerText = '*** first text item added';
ul.prepend(liFirst);

// Add HTML inside ul
const liLast = document.createElement('li');
liLast.innerHTML = '*** last <b>HTML item</b> added';
ul.append(liLast);

<main class="container">       
    <blockquote>Insert a blockquote <b>before</b> ul</blockquote>
    <ul>
        <li>*** first text item added</li>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        <li>*** last <b>HTML item</b> added</li>
    </ul>
    <blockquote>Insert a blockquote <b>after</b> ul</blockquote>
    ...
</main>

WATCHING TIPS

• JavaScript DOM tutorial (opens new window)
• Learn DOM Manipulation In 18 Minutes (opens new window)
• Learn JavaScript DOM Traversal In 15 Minutes (opens new window)