Informatique


Accéder au DOM

  • Démo Soit le code suivant: 
    
<section>
<article>
<div>
	<p>Érasme-Louis Surlet de Chokier (Régent)</p>
	<p>Leopold Ier (1831-1865)</p>
	<p>Leopol II (1831-1909)</p>
	<p>Albert Ier (1909-1934)</p>
	<p>Leopold III (1934-1944)</p>
	<p>Charles Comte de flandre (Régent)(1944-1950)</p>
	<p>Leopold III (1950-1951)</p>
	<p>Baudoin Ier (1951-1993)</p>
	<p>Albert II (1993-2013)</p>
	<p>Philippe Ier (1993-2013)</p>
</div>
<p>Érasme-Louis Surlet de Chokier est Régent, en attente du Roi désigné.</p>
<p>Charles Comte de Flandre est Régent pendant la détention de Lepold III en Allemagne</p>
<p>Leopold III, abdique peu après le début de son deuxième règne</p>
</article>
</section>

    Quel(s) paragraphe(s) est (sont) ciblé(s) par

    • document.querySelectorAll("div > p")
    • document.querySelectorAll("p")
    • document.querySelectorAll("article > p")
    • document.querySelectorAll("article p")
    • document.querySelectorAll("div p:nth-child(2n)")
    • document.querySelectorAll("div p:last-child")
    • document.querySelectorAll("p:last-child")
    • document.querySelectorAll("div + p")
    • document.querySelectorAll("section article div p")
    • document.querySelectorAll("section article p")
  • Démo Soit le code suivant: 
    
<head>
	<style>
	  .rouge {color:red;}
	</style>
</head>
<body>
<header>
	<h1 class=mtitre_1>Les rois d'Angleterre</h1>
	<h2 class=stitre>Les Plantagenêts</h2>
</header>
<nav>
	<ul class=menu_angl>
		<a href="#"><li>Henri II</li></a>
		<a href="#"><li>Richard Ier</li></a>
		<a href="#"><li>Jean sans Terre</li></a>
		<a href="#"><li>Edouart Ier</li></a>
		<a href="#"><li>Edouart II</li></a>
		<a href="#"><li>Richard II</li></a>
	</ul>
</nav>
<section>
<article class=art1>
	<h1 class=mtitre_2>Les origines des <strong>Plantagenêts</strong></h1>
	<div>
		<p class=mep>Selon une théorie, il ferait allusion au genêt qu'avait l'habitude de porter à son chapeau Geoffroy V...</p>
		<p class=mep>C'est à partir du règne de <strong>Jean sans Terre (1199-1216)</strong> que s’opéra un glissement...</p>
		<p class=mep>L'usurpation d'Henri IV d'Angleterre entraîna une division de la famille Plantagenêt </p>
	</div>
</article>
<article class=art2>
	<h1 class=mtitre_2>Histoires des <strong>Plantagenêts</strong></h1>
	<div>
		<p class=mep>Les Plantagenêts sont une branche de la Maison de Châteaudun...</p>
		<p class=mep>La puissance des Plantagenêts trouve son origine dans le mariage que fit <strong>Geoffroy V</strong> et qui ...</p>
		<p class=mep>C'est son fils Henri II qui fit valoir ses droits par un voyage en Angleterre en 1153 où  ...</p>
		<p class=mep><i><strong>Richard III</strong></i> fut le dernier roi Plantagenêt. Cependant, le lignage des Plantagenêts se perpétua ...</p>
	</div>
</article>
<article class=art3>
	<h2 class=stitre>Quelques reines</h2>
	<div>
		<p class=mep>Quelques reines, pour la route...</p>
		<ul class=reines_angl>
			<li>Marie Ier</li>
			<li>Jeanne Ier</li>
			<li>Elisabeth Ier</li>
			<li>Elisabeth II</li>
		</ul>
	</div>
</article>
</section>
</body>

    Ajouter la classe 'rouge' au cibles suivantes:

    • les balises <h1> portant l'attribut class "mtitre_2"
    • les balises <p> de classe "mep"
    • les balises <p> de classe "mep" qui se trouvent dans la balise de classe "art2"
    • la balise <h1> qui se trouve dans la balise <article> de classe "art1"
    • les balises <strong> encadrant les chaînes "Jean sans Terre (1199-1216)" et "Geoffroy V" (sans utiliser contains!!)
    • les balises qui portent l'attribut "class"
    • les balises <p> qui portent l'attribut "class"
    • les balises <li> du menu
    • les balises <li> de la liste des reines d'Angleterre
    • la balise <h2> contenant quelques reines
  • Démo Soit le code suivant: 
    
<head>
<style>
  .rouge {color:red;}
</style>
</head>
<body>
<section>
<article>
	<h1>Les saintes</h1>
	<div>
		<p>Agathe, martyr (tenaille et seins arrachés)</p>
		<p>Catherine d'Alexandrie, martyr (la roue et le sabre)</p>
		<p>Justine, martyr (dague)</p>
		<p>Claire d'Assise, fondatrice des Clarisses</p>
	</div>
</article>
<article>
	<h1>Les saints</h1>
	<div>
		<p>Laurent, martyr (charbons ardents)</p>
		<p>François d'Assise, fondateur Frères mineurs</p>
		<p>Ignace de Loyola, fondateur Compagnie de jésus </p>
		<p>Joseph, père nourricier de Jésus</p>
	</div>
</article>
</section>
</body>

    Cibler et ajouter la classe rouge:

    • toutes les balises <h1>
    • toutes les balises <article>
    • la deuxième balise <article>
    • la dernière balise <p> de la deuxième balise <article>
    • la balise <section>
    • toutes les balises <p> de la première balise <article>
    • une balise <p> sur deux en commençant par la première
    • une balise <p> sur deux en commençant par la deuxième
    • toutes les balises, afficher dans une boîte alert le nombre d'items trouvés <p>
  • Démo Soit le code suivant: 
    
	<section>
<article>
	<h1>Les femmes et les enfants d'Henry VIII, Roi d'Angleterre</h1>
	<div id=part1>
		<p class=epouse>Catherine d'Aragon</p>
		<p class=epouse>Anne Boleyn</p>
		<p class=epouse>Jane Seymour</p>
		<p class=epouse>Anne de Clèves</p>
		<p class=epouse>Catherine Howard</p>
		<p class=epouse>Catherine Parr</p>
		<p class=enfant>Marie Ier</p>
		<p class=enfant>Elisabeth Ier</p>
		<p class=enfant>Edward VI</p>
		<p class=enfant>Henry Fitzroy (illégitime)</p>
	</div>
	<h1>Les Tudor</h1>
	<div id=part2>
		<p>Henry VII</p>
		<p>Henry VIII</p>
		<p>Edward VI </p>
		<p>Marie Ier</p>
		<p>Elisabeth II</p>
	</div>
</section>

    Cibler et mettre en rouge:

    • "Marie Ier" qui se trouve dans la div#part1
    • Tous les enfants de la div#part1
    • Tous les paragraphes de classe "enfant"
    • Tous les paragraphes de classe "epouse"
    • Tous les paragraphes contenu dans la div#part2
    • Tous les paragraphes de classe dont le nom commence par "e"
    • Sélectionner le paragraphe contenant Henry VIII et à partir de celui-ci remonter sur la balise section.
    • Sélectionner le premier h1 et à partir de celui-ci remonter sur la balise article.
  • Soit le code html suivant : 
    
<section>
	<div id=d1>
	<h1 id=titre1>My very beau site</h1>
		<h3>Introduction</h3>
			<p class=para>Qu'il est beau mon beau site...</p>
			<p class=para >Pour être beau, il est beau...</p>
<p class=para><strong>Coucou</strong>, salut les boys !</p>
	</div>	
<div id=d2>
	<h1>My very beau site</h1>
		<h3>Introduction</h3>
			<p>Qu'il est beau mon beau site...</p>
			<p>Pour être beau, il est beau...</p>
<p>Pour être beau, il est beau...</p>
	</div>	
</section>
    • Ecrire le script permettant de sélectionner le titre d’id « titre1 » et de remplacer le texte «My very beau site» par «My very trop beau site»
    • Ecrire le script permettant de récupérer dans la variable bil le contenu textuel (uniquement) du premier paragraphe de classe para.
    • Ecrire le script permettant de récupérer dans la variable brol le contenu textuel et html contenu dans le 3ième paragraphe de classe para.
  • Soit le code html suivant : 
    <style>
.c1	{color:red;}
.taille{font-size:2em;}
</style>
</head>
<body>
<section>
	<div id=d1>
	<h1 id=titre1>My very beau site</h1>
		<h3>Introduction</h3>
			<p class=para>Qu'il est beau mon beau site...</p>
			<p class=para >Pour être beau, il est beau...</p>
<p class=para><strong>Coucou</strong>, salut les boys !</p>
	</div>	
<div id=d2>
	<h1>My very beau site</h1>
		<h3>Introduction</h3>
			<p class=para >Qu'il est beau mon beau site...</p>
			<p class=para >Pour être beau, il est beau...</p>
<p class=para >Pour être beau, il est beau...</p>
	</div>	
</section>
    • Ajouter les classes c1 et taille à tous les titres h1
    • Supprimer la classe para à tous les paragraphes contenus dans la div d’id « d1 »
    • Tester si la classe c1 est présente sur la div d’id « d2 »
    • Ajouter un background jaune sur la balise section
    • Supprimer la classe c1 de tous les titre h1
  • Au sein de la <div id="plouc"> se trouvent un noeud #text et un lien <a href="#">. Ce lien ne mène nulle part puisqu'il vaut #.
    Il faudrait donc modifier son attribut href pour le faire pointer vers http://www.rtbf.be.
    Essayer plusieurs solutions! Démo 
    
<div id=plouc>
	<a href="#">Le site de la RTBF</a>
</div>
  • Au sein de la <div id="plouc"> se trouve un bouton <button>.
    Faites en sorte que quand ce bouton est cliqué, il affiche "Vous m'avez cliqué" à la place de "Cliquez-moi", comme c'est le cas dans l'exemple ci-après. Démo 
    
<div id=plouc>
	<button>Cliquez-moi !</button>
</div>