Récupérer les balises de titre dans une section

Bonjour,

J'ai besoin de récupérer les titres contenus dans une section, sans distinction de niveau.

Suivant son niveau dans la structure du document — les sections de mes documents sont imbriquées —, une section peut contenir des titres h2 (et, éventuellement, des titres h3, voire h4), ou des titres h3 (et, éventuellement, des titres h4).

Apparemment, il n'est pas possible d'utiliser une RegEx dans getElementsByTagName et d'écrire

getElementsByTagName("/h[234]/")

Comment puis-je donc procéder ?

Merci d'avance de votre aide.
Borcade
(D'un seul coup, le site ne m'a plus reconnu, ni par mon pseudo, ni par mon adresse mail. J'ai dû donc me réinscrire sous un autre pseudo.)

Voici ce que j'ai imaginé comme solution, pour simplifier par rapport au document, mais la logique reste la même pour une section :
(la coloration en bleu des titres est simplement pour vérifier si ça marche ; le traitement réel est bien sûr un peu plus signifiant.

<script type="text/javascript">

function Traitement(liste) {
var i;
for (i=0; i < liste.length; i++) {
	liste[i].style.color = "blue";
	}
}

const titres_2 = document.getElementsByTagName("h2");
const titres_3 = document.getElementsByTagName("h3");
const titres_4 = document.getElementsByTagName("h4");

Traitement(titres_2);
Traitement(titres_3);
Traitement(titres_4);

</script>

S'il y a plus élégant, je suis preneur.
Mais, au moins, ça marche.

En javascript, tu as querySelectorAll avec comme filtres des règles identiques au CSS

'use script';
const headers = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
for(var i=0, iMax = headers.length; i < iMax; i++) {
   console.log(headers[i].tagName, headers[i].textContent);
}

A ma connaissance, on ne peut pas utiliser les expressions régulières dans les règles CSS. Juste dommage.
Modifié par bazooka07 (26 Aug 2018 - 23:44)

Il y a mieux en fait. Applique une classe aux titres, sélectionne les élèments. TOUS. Ensuite tu en fais ce que tu veux avec la propriété h_liste[h+un chiffre].style.

<h1 class="head"> lol </h1>
<h2 class="head"> lil </h2>
<h3 class="head"> lal </h1>
<script>

var h_liste = document.getElementsByClassName('head');
console.log(h_liste);

</script>

Ah, et l'output :

https://gyazo.com/b0515d6879333777320535c49e335341

Bonjour Athos_is_coding,

Juste une remarque, je ne suis pas sûr que cela soit "mieux" (en fait je suis sûr ).
Ajouter une classe 'head' pour juste pouvoir sélectionner la balise en javascript,
pour moi, c'est pas "mieux".

la première solution reste à mon avis la meilleur (et n'a rien de non élégant):

function Traitement(liste) {
	for (var i=0; i < liste.length; i++) {
		liste[i].style.color = "blue";
	} 
}
Traitement(document.getElementsByTagName("h2"));
Traitement(document.getElementsByTagName("h3"));
Traitement(document.getElementsByTagName("h4"));

mais la solution de bazooka07 est aussi bonne mais à mon avis moins performante (c'est relatif dans ton cas) que getElementsByTagName()
Modifié par aliasdmc (01 Sep 2018 - 15:23)

@aliasdmc,

Généralement il y a un container <div> ou autres pour ces balises. Il suffit de l'affubler d'un id="my-container" et de modifier la requête du querySelectorAll en

document.querySelectorAll('#my-container h1, #my-container h2, #my-container h3, #my-container h4, #my-container h5, #my-container h6');

AMHA, c'est plus rapide que document.getElementsByTagName(...)

Bonjour bazooka07,

Nous sommes toujours pas d'accord sur la "rapidité" (qui est relatif je l'admet pour ce sujet) de querySelectorAll et getElementsByTagName
et que pour l'élégance on perd en performance, qui encore une fois est relatif je l'admet pour ce sujet, mais qui peut être important pour des projets js plus costaux, c'est pour cela qu'il m'a semblé intéressant de préciser cette performance.
Peut être que j'ai raison, peut être que tu as raison ...

Je laisse donc les lecteurs se faire le propre avis et leur choix et regardant les tests des rapidités
de querySelectorAll vs getElementsByTagName
ou querySelectorAll vs getElementById

Bonjour,

Je n'ai découvert cet échange de spécialistes qu'au moment de publier ma question concernant les boutons placés avant les titres.

Dans la mesure où un document contiendra au plus une quinzaine de titres, je ne pense pas être vraiment concerné par la comparaison de performance entre querySelectorAll, getElementsByTagName, getElementById.

Je préfère donc m'en tenir à l'élégance de querySelectorAll.