Gallery
Share
Explore

DOM Selectors

Explaining selectors, their use, and importance:

Understanding and Applying DOM Selectors

Introduction to Selectors

In web development, selectors are powerful tools that allow developers to target and manipulate specific HTML elements on a web page. They act as a bridge between your HTML structure and both CSS styles and JavaScript functionality. Selectors are fundamental to creating interactive, well-styled web applications.

What are Selectors?

Selectors are patterns used to select and target HTML elements in a document. They can be thought of as search queries for your HTML elements. When you use a selector, you're essentially saying, "Find me these specific elements so I can do something with them."

Types of Selectors

There are several types of selectors, but the three most common and foundational are:
Element Selectors: These select all elements of a specified type. For example, 'p' selects all paragraph elements.
Class Selectors: These select elements with a specific class attribute. They are denoted by a dot (.) followed by the class name. For example, '.highlight' selects all elements with the class "highlight".
ID Selectors: These select a single element with a specific id attribute. They are denoted by a hash (#) followed by the id name. For example, '#header' selects the element with the id "header".

Why Use Selectors?

Selectors are crucial for several reasons:
Styling: In CSS, selectors allow you to apply styles to specific elements or groups of elements without changing the HTML structure.
Manipulation: In JavaScript, selectors enable you to find and manipulate specific elements in the Document Object Model (DOM).
Specificity: They provide a way to be as broad or as specific as needed when targeting elements.
Maintainability: By using appropriate selectors, you can make your code more readable and easier to maintain.

How to Use Selectors

In CSS, selectors are used at the beginning of each rule set to determine which elements the styles will apply to. For example:
css
Copy
p {
color: blue;
}
In JavaScript, selectors are often used with methods like querySelector, querySelectorAll, getElementById, or getElementsByClassName to select elements for manipulation. For example:
javascript
Copy
let paragraph = document.querySelector('p');
Understanding and effectively using selectors is a crucial skill for any web developer. They form the foundation for both styling and interactive functionality in web applications. In the following exercises, we'll explore how to use these different types of selectors in practical scenarios.
\chapter{Understanding and Applying DOM Selectors}

\section{Introduction to Selectors}

In web development, selectors are powerful tools that allow developers to target and manipulate specific HTML elements on a web page. They act as a bridge between your HTML structure and both CSS styles and JavaScript functionality. Selectors are fundamental to creating interactive, well-styled web applications.

\subsection{What are Selectors?}

Selectors are patterns used to select and target HTML elements in a document. They can be thought of as search queries for your HTML elements. When you use a selector, you're essentially saying, "Find me these specific elements so I can do something with them."

\subsection{Types of Selectors}

There are several types of selectors, but the three most common and foundational are:

\begin{enumerate}
\item \textbf{Element Selectors}: These select all elements of a specified type. For example, 'p' selects all paragraph elements.
\item \textbf{Class Selectors}: These select elements with a specific class attribute. They are denoted by a dot (.) followed by the class name. For example, '.highlight' selects all elements with the class "highlight".
\item \textbf{ID Selectors}: These select a single element with a specific id attribute. They are denoted by a hash (#) followed by the id name. For example, '#header' selects the element with the id "header".
\end{enumerate}

\subsection{Why Use Selectors?}

Selectors are crucial for several reasons:

\begin{itemize}
\item \textbf{Styling}: In CSS, selectors allow you to apply styles to specific elements or groups of elements without changing the HTML structure.
\item \textbf{Manipulation}: In JavaScript, selectors enable you to find and manipulate specific elements in the Document Object Model (DOM).
\item \textbf{Specificity}: They provide a way to be as broad or as specific as needed when targeting elements.
\item \textbf{Maintainability}: By using appropriate selectors, you can make your code more readable and easier to maintain.
\end{itemize}

\subsection{How to Use Selectors}

In CSS, selectors are used at the beginning of each rule set to determine which elements the styles will apply to. For example:

\begin{verbatim}
p {
color: blue;
}
\end{verbatim}

In JavaScript, selectors are often used with methods like \texttt{querySelector}, \texttt{querySelectorAll}, \texttt{getElementById}, or \texttt{getElementsByClassName} to select elements for manipulation. For example:

\begin{verbatim}
let paragraph = document.querySelector('p');
\end{verbatim}

Understanding and effectively using selectors is a crucial skill for any web developer. They form the foundation for both styling and interactive functionality in web applications. In the following exercises, we'll explore how to use these different types of selectors in practical scenarios.
This preamble provides a comprehensive introduction to selectors, explaining what they are, why they're important, and how they're used in both CSS and JavaScript. It sets the stage for the practical exercises that follow, giving students a solid theoretical foundation before diving into hands-on practice.

Here are 5 progressive illustrative exercises to teach understanding and application of HTML DOM Selectors for CSS and JavaScript, focusing on the three main types: Element name, Class, and ID selectors.
Exercise 1: Basic Element Selector
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Exercise 1: Element Selector</title>
<style>
/* CSS will go here */
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// JavaScript will go here
</script>
</body>
</html>
Task: a) Use CSS to make all paragraphs blue. b) Use JavaScript to change the text of the first paragraph to "I've been changed!"
Solutions: CSS:
p {
color: blue;
}
JavaScript:
javascript
Copy
document.getElementsByTagName('p')[0].textContent = "I've been changed!";
Exercise 2: Class Selector
HTML:

<!DOCTYPE html>
<html>
<head>
<title>Exercise 2: Class Selector</title>
<style>
/* CSS will go here */
</style>
</head>
<body>
<h1 class="highlight">Main Title</h1>
<p class="highlight">This is an important paragraph.</p>
<p>This is a normal paragraph.</p>
<script>
// JavaScript will go here
</script>
</body>
</html>
Task: a) Use CSS to give all elements with the class "highlight" a yellow background. b) Use JavaScript to count how many elements have the class "highlight".
Solutions: CSS:

.highlight {
background-color: yellow;
}
JavaScript:
javascript
Copy
let highlightedElements = document.getElementsByClassName('highlight');
console.log("Number of highlighted elements: " + highlightedElements.length);
Exercise 3: ID Selector
HTML:
html
Copy
<!DOCTYPE html>
<html>
<head>
<title>Exercise 3: ID Selector</title>
<style>
/* CSS will go here */
</style>
</head>
<body>
<h1>My Shopping List</h1>
<ul>
<li id="first-item">Apples</li>
<li>Bananas</li>
<li>Milk</li>
</ul>
<script>
// JavaScript will go here
</script>
</body>
</html>
Task: a) Use CSS to make the element with id "first-item" bold and red. b) Use JavaScript to change the text of the element with id "first-item" to "Oranges".
Solutions: CSS:
css
Copy
#first-item {
font-weight: bold;
color: red;
}
JavaScript:
javascript
Copy
document.getElementById('first-item').textContent = "Oranges";
Exercise 4: Combining Selectors
HTML:
html
Copy
<!DOCTYPE html>
<html>
<head>
<title>Exercise 4: Combining Selectors</title>
<style>
/* CSS will go here */
</style>
</head>
<body>
<div class="container">
<p>This is a paragraph inside the container.</p>
<p class="special">This is a special paragraph.</p>
</div>
<p>This is a paragraph outside the container.</p>
<script>
// JavaScript will go here
</script>
</body>
</html>
Task: a) Use CSS to make paragraphs inside the container green, but make the special paragraph italic. b) Use JavaScript to add an exclamation mark to the end of each paragraph inside the container.
Solutions: CSS:
css
Copy
.container p {
color: green;
}

.container .special {
font-style: italic;
}
JavaScript:
javascript
Copy
let containerParagraphs = document.querySelectorAll('.container p');
containerParagraphs.forEach(function(paragraph) {
paragraph.textContent += "!";
});
Exercise 5: Advanced Selectors
HTML:
html
Copy
<!DOCTYPE html>
<html>
<head>
<title>Exercise 5: Advanced Selectors</title>
<style>
/* CSS will go here */
</style>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome</h2>
<p>Welcome to my website!</p>
</section>
<section id="about">
<h2>About Me</h2>
<p>I'm a web developer.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email me at: example@email.com</p>
</section>
</main>
<script>
// JavaScript will go here
</script>
</body>
</html>
Task: a) Use CSS to style all links in the navigation to be blue, but turn red when hovered over. b) Use JavaScript to add the text " (current page)" to the h2 element of the section that matches the current hash in the URL.
Solutions: CSS:
css
Copy
nav a {
color: blue;
}

nav a:hover {
color: red;
}
JavaScript:
javascript
Copy
function updateCurrentPage() {
let currentHash = window.location.hash;
if(currentHash) {
let currentSection = document.querySelector(currentHash);
if(currentSection) {
let heading = currentSection.querySelector('h2');
if(heading) {
heading.textContent += " (current page)";
}
}
}
}

window.addEventListener('hashchange', updateCurrentPage);
updateCurrentPage(); // Run once at page load
These exercises progressively introduce more complex uses of DOM selectors, from basic element selection to advanced dynamic content updating based on URL changes.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.