Skip to content
Commits on Source (4)
Show whitespace changes
Inline Side-by-side
exodom1.1/index.html 0 → 100644
View file @ 493c7986
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exo DOM 1.1</title>
<link rel="stylesheet" href="./style.css">
<script src="./index.js" defer></script>
</head>
<body>
<ul>
<li>Rouge</li> <!--Écrire en rouge souligné-->
<li>Vert</li> <!--Écrire en vert italique-->
<li>Bleu</li> <!--Écrire en bleu-->
</ul>
</body>
</html>
exodom1.1/index.js 0 → 100644
View file @ 493c7986
const li1 = document.querySelector("li:first-of-type");
const li2 = li1.nextElementSibling;
const li3 = li1.parentElement.lastElementChild;
li1.classList.add("red", "underline");
li2.classList.add("green", "italic");
li3.classList.add("blue");
exodom1.1/style.css 0 → 100644
View file @ 493c7986
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
.underline {
text-decoration-line: underline;
}
.italic {
font-style: italic;
}
exodom1.12/index.html 0 → 100644
View file @ 493c7986
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maman</title>
<script src="./index.js" defer></script>
</head>
<body>
<nav>
<ol>
<li><a href="#maman">Maman est en haut</a></li>
<li><a href="ailleurs#haut">Qui fait du gâteau</a></li>
</ol>
</nav>
</body>
</html>
exodom1.12/index.js 0 → 100644
View file @ 493c7986
const title = document.querySelector("title");
title.textContent = "Papa";
const li1 = document.querySelector("li");
// façon simple mais bourrine
li1.innerHTML = '<a href="#papa">Papa est en bas</a>';
// façon plus subtile
const a2 = li1.nextElementSibling.firstElementChild;
a2.textContent = "Qui fait du nougat";
a2.href = "elsewhere#bas";