DOM manipulation

• A jQuery statement always consists of two or more parts
  • The first part is always a selector
  • The following (chained) part(s) describe the action(s) you perform on the selector
• For example:
  • $('p.foo'): select all p-tags with the class .foo
  • .addClass('bar'): add class .bar to the selection
  • .show('slow');: make the section visible

$('p.foo').addClass('bar').show('slow');

• Making a good selection is crucial to executing a powerful script!

Select elements

CSS3 selectors

• A jQuery selector always starts with the dollar sign, followed by a CSS3 selector between parentheses
• jQuery has only one type of selector $() which replaces all the possible vanilla JavaScript selectors like
  document.getElementById(), document.querySelector() and document.querySelectorAll()

TIP

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

jQuery specific selectors

• jQuery has some very interesting extra pseudo-class selectors that are not available in CSS3
• A complete list can be found here: https://api.jquery.com/category/selectors/jquery-selector-extensions/ (opens new window)
• Some of them are replaceable with a CSS3 alternative (e.g. $(':checkbox') is equivalent to $('[type=checkbox]')), but some of them aren't:

jQuery	description
:has(<selector>) (opens new window)	select elements which contain at least one element that matches the specified <selector>
:hidden (opens new window)	select all elements that are hidden
:visible (opens new window)	select all elements that are visible
:parent (opens new window)	select all elements that have at least one child node (either an element or text)
:selected (opens new window)	select the selected option(s) from select lists
:checked (opens new window)	select the checked item(s) of checkboxes or radio buttons, as well as the selected option(s) of select lists

Loop over jQuery objects

• Where document.querySelectorAll() results in a nodeList, a jQuery selector $() always returns a jQuery object, even if there is only one element selected
• Use the jQuery each() (opens new window) method to loop over a jQuery object
• Open jQuery/dom/loopObjects.html and jQuery/dom/loopObjects.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 each() method, over the jQuery object of buttons. The order of the parameters (of the callback function) is reversed in comparison with the vanilla JavaScript forEach() method:
  • The first (optional) parameter is the index inside the loop
  • The second (optional) parameter represents the element (the button)
• Line 8: outputs the information about every button to the console

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

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

Modify content

jQuery	vanilla JS	description
<element>.text() (opens new window)	<element>.textContent	get or set ALL text inside the <element> (including spaces and hidden text)
<element>.html() (opens new window)	<element>.innerHTML	get or set the HTML content inside <element>

• Open jQuery/dom/content.html and jQuery/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 3: log the content of p#quote with two different methods in the console
• Line 5 to 7: modify the content of the three list items

const p = $('#quote');
console.log('p.text():', p.text()); // get ALL the text inside p
console.log('p.html():', p.html()); // get the HTML content inside p

$('main li:first-child').text('New first item'); // replace the content of the first item with new TEXT
$('main li:nth-child(2)').text('New second item with <b>bold text</b>?'); // replace the content of the second item with TEXT
$('main li:last-child').html('New last item with <b>bold text</b>!'); // replace the content of the last item with HTML
// $('main li').text('Same text for all list items');

REMARK: jQuery methods acting on multiple elements

• In the overview tables on this (and the following) page(s), we use the notation <element>.method() which makes it "easy" to compare the introduced methods with their vanilla JavaScript counterparts (where we used a similar notation)
• However, this is not entirely correct, as in jQuery some methods can be applied to multiple elements without looping over them (a process known as implicit iteration)
  • Example: if you uncomment line 8 ($('main li').text('Same text for all list items');) in the script jQuery/dom/content.js, the same text will be set for all elements (list items) matching the selection $('main li') (without using an each() loop)
• When needed, consult the official jQuery API documentation (opens new window) for the detailed information regarding a specific method!

Modify attributes

jQuery	vanilla JS	description
<element>.attr(<attribute>) (opens new window)	<element>.getAttribute(<attribute>) <element>.<attribute>	get the <attribute> of the <element>
<element>.attr(<attribute>, <value>) (opens new window)	<element>.setAttribute(<attribute>, <value>) <element>.<attribute> = <value>	set the <attribute> of the <element> to <value>
<element>.removeAttr(<attribute>) (opens new window)	<element>.removeAttribute(<attribute>)	remove the <attribute> on the <element>

• Open jquery/dom/attributes.html and jquery/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
$('main img:first-child').attr('title', 'A new title for the first image');

// Second image: copy the alt-attribute to the title-attribute
const img2 = $('main img:nth-child(2)');
img2.attr('title', img2.attr('alt'));

// Third image: replace the image itself
$('main img:nth-child(3)').attr('src', 'https://picsum.photos/id/742/200/200');

// Last image: add multiple attributes
$('main img:last-child').attr({
    title: 'A new title for the last image',
    width: '100px',
    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>

Modify form attributes

• Certain form attributes (also called properties) should be treated differently in jQuery
• For example, checked, disabled and selected should be retrieved and set with the prop() method instead of the attr() method!

jQuery	description
<element>.prop(<property>) (opens new window)	get the <property> of the <element>
<element>.prop(<property>, <value>) (opens new window)	set the <property> of the <element> to <value>
<element>.removeProp(<property>) (opens new window)	remove the <property> on the <element>

• Open jquery/dom/properties.html and jquery/dom/properties.js

<pre></pre>
<form>
    <div class="row responsive-label">
        <input type="checkbox" id="check1" value="I'm checkbox one" />
        <label for="check1">Checkbox 1</label>
    </div>
    <div class="row responsive-label">
        <input type="checkbox" id="check2" value="I'm checkbox two" checked disabled />
        <label for="check2">Checkbox 2</label><br />
    </div>
</form>

const checkbox1 = $('#check1');
const checkbox2 = $('#check2');

$('pre:first-of-type').html(`
    checkbox1.attr('checked'): ${checkbox1.attr('checked')}
    checkbox1.attr('disabled'): ${checkbox1.attr('disabled')}
    checkbox1.prop('checked'): ${checkbox1.prop('checked')}
    checkbox1.prop('disabled'): ${checkbox1.prop('disabled')}
    checkbox1.val(): ${checkbox1.val()}
    
    checkbox2.attr('checked'): ${checkbox2.attr('checked')}
    checkbox2.attr('disabled'): ${checkbox2.attr('disabled')}
    checkbox2.prop('checked'): ${checkbox2.prop('checked')}
    checkbox2.prop('disabled'): ${checkbox2.prop('disabled')}
    checkbox2.val(): ${checkbox2.val()}
`);

// disable checkbox1
checkbox1.prop('disabled', true);

• Because #checkbox1 has no attribute checked:
  • the result for attr('checked') is undefined
  • the result for prop('checked') is false

WARNING

Aways use the val() (opens new window) method to get/set the value of an input/form element, and not the attr() or prop() methods (as the use of the latter methods may lead to unexpected results)!

The data-* attribute

jQuery	vanilla JS	description
<element>.data('*') (opens new window)	<element>.dataset.*	get the data-* attribute of the <element>
<element>.attr('data-*', <value>)	<element>.dataset.* = <value>	set the data-* attribute of the <element> to <value>

• Open jquery/dom/data_attributes.html and jquery/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 = $('#img1');

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

// add a new data-* attribute for later use...
img.attr('data-new-attribute', '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

jQuery	vanilla JS	description
<element>.addClass(<c1>, ...) (opens new window)	<element>.classList.add(<c1>, ...)	add class(es) to the <element>
<element>.removeClass(<c1>, ...) (opens new window)	<element>.classList.remove(<c1>, ...)	remove class(es) from the <element>
<element>.toggleClass(<c>) (opens new window)	<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>.hasClass(<c>) (opens new window)	<element>.classList.contains(<c>)	check if the class <c> exists on the <element>: returns true or false

• Open jquery/dom/classes.html and jquery/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>

// remove all classes and add new classes
$('#fotoFrame img:first-child').removeClass().addClass('shadow grayscale');
$('#fotoFrame img:nth-child(2)').removeClass().addClass('sepia');

// add class 'green'
$('#fotoFrame img:nth-child(3)').toggleClass('green');

const img4 = $('#fotoFrame img:last-child');
// replace class 'green' with class 'red'
img4.removeClass('green').addClass('red');  // or img4.toggleClass(['green', 'red'])

console.log('contains', img4.hasClass('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

jQuery	vanilla JS	description
<element>.css(<property>) (opens new window)	<element>.style.<property>	get the inline style <property> on the <element>
<element>.css(<property>, <value>) (opens new window)	<element>.style.<property> = <value>	set the inline style <property> on the <element> to <value>
<element>.width() (opens new window)	<element>.style.width	get/set the width of the <element>
<element>.innerWidth() (opens new window)		get/set the width (including padding but not border) of the <element>
<element>.outerWidth() (opens new window)		get/set the width (including padding, border, and optionally margin) of the <element>
<element>.height() (opens new window)	<element>.style.height	get/set the height of the <element>
<element>.innerHeight() (opens new window)		get/set the height (including padding but not border) of the <element>
<element>.outerHeight() (opens new window)		get/set the height (including padding, border, and optionally margin) of the <element>

TIP

• Setting multiple styles can be done by chaining multiple css() methods:

<element>.css('border','solid 3px #50a551').css('background-color', 'rgba(80, 165, 81, 0.1)');

or with one css() method with an object of properties:

<element>.css({
    border: 'solid 3px #50a551',
    backgroundColor: 'rgba(80, 165, 81, 0.1)',
});

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

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

const img1 = $('#img1');
console.log('padding', img1.css('padding'));
console.log('original height', img1.height());
// img1.css('border', 'solid 3px #50a551').css('background-color', 'rgba(80, 165, 81, 0.1)');
img1.css({
    border: 'solid 3px #50a551',
    backgroundColor: 'rgba(80, 165, 81, 0.1)',
});
console.log('height after changing the style', img1.height());
console.log('innerHeight', img1.innerHeight());
console.log('outerHeight', img1.outerHeight());

<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

jQuery	vanilla	description
<element>.empty() (opens new window)	<element>.innerHTML = ''	remove all child nodes inside the <element>
<element>.remove() (opens new window)	<element>.remove()	remove <element> from the DOM
<element>.replaceWith(<content>) (opens new window)	<element>.replaceWith()	replace the selected <element> with <content>
<element>.append(<content>) (opens new window)	<element>.append()	insert <content> at the end of the selected <element>
<element>.prepend(<content>) (opens new window)	<element>.prepend()	insert <content> at the beginning of the selected <element>
<element>.before(<content>) (opens new window)	<element>.before()	insert <content> before the selected <element>
<element>.after(<content>) (opens new window)	<element>.after()	insert <content> after the selected <element>

• Open jQuery/dom/elements.html and jQuery/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 = $('h1');
// remove h1
h1.remove();

const ul = $('main ul');
// add HTML before ul
ul.before('<blockquote>Insert a blockquote <b>before</b> ul</blockquote>');

// add HTML after ul
ul.after('<blockquote>Insert a blockquote <b>after</b> ul</blockquote>');

// Add text inside ul
ul.prepend('<li>*** first text item added</li>');

// Add HTML inside ul
ul.append('<li>*** last <b>HTML item</b> added</li>');

<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>

Example

Contact hours

• Open jQuery/dom/contactHours.html and jQuery/dom/contactHours.js
• The page contains two tables in which we mark today's opening hours
• Each weekday corresponds to one row within the tbody tag
  • Note that we start the table with Sunday. This is a deliberate choice because it allows us to easily link the row number to the weekday of the Date object.
• Every td also needs a data-label attribute to render the table correctly on small screens (see https://minicss.org/docs#tables (opens new window))

<table>
    <thead>...</thead>
    <tbody>
        <tr>
            <td><b>sunday</b></td>
            <td>Closed</td>
            <td>Closed</td>
            <td>Closed</td>
        </tr>
        <tr>
            <td><b>monday</b></td>
            <td>9:00 – 12:00</td>
            <td>13:30 – 16:00</td>
            <td>Closed</td>
        </tr>
        ...
    </tbody>
</table>

// color day of the week
const dayOfWeek = new Date().getDay();
$(`tbody tr:nth-child(${dayOfWeek + 1})`).css('background-color', 'greenYellow');

// add a data-label to every td
$('tbody tr td:nth-of-type(2)').attr('data-label', 'Morning');
$('tbody tr td:nth-of-type(3)').attr('data-label', 'Afternoon');
$('tbody tr td:last-of-type').attr('data-label', 'Evening');

READING TIPS

• Attributes@jQuery API (opens new window)
• Manipulation@jQuery API (opens new window)