Récupérer les balises headings de la page html

Version imprimable

Bonjour,

je dois récupérer les balises h1,h2.... d'une page et m'assurer qu'elles soient dans le bon ordre (pas de h2 avant h1 par exemple). Mon problème est que je n'arrive pas à trouver une solution pour vérifier l'ordre dans laquelle je les récupère.
Ma tentative était de placer tous les balises que je récupère à l'aide d'un QuerySelector dans lequel je place une variable ou j'y mets la lettre h + la valeur de la boucle sauf que les valeurs qui se retrouvent dans la variable headingsset arrivent dans l'ordre de la boucle for, ce qui ne m’intéresse pas...Si vous avez des propositions, je suis preneur.
Code:

1 2 3 4 5 6 7 8 9 10 var headingsset = []; for (var j = 1; j < 11; j++) { var hn = 'h'+ j; var headings = document.querySelectorAll(hn); for (var i = 0; i < headings.length; i++) { for (var l = 1; l<11 ; l++) { var by= 'h'+(parseInt(hn.match(j).join(''))+l); } }
En vous souhaitant une bonne soirée,

Alexandre

02/04/2018, 11h05
danielhagnoul

:salut:

Exemple ES2015+ avec commentaires

Nota bene pour les utilisateurs de Firefox

J'ai adopté les modules ES2015 partout, c'est tellement pratique, mais Firefox est en retard par rapport à Chrome et Edge, voir Can I use module : https://caniuse.com/#search=module.
La sortie de Firefox 60 (normal) est prévue pour le 2018-05-09 (https://wiki.mozilla.org/RapidRelease/Calendar)
03/04/2018, 14h24
MisterLSC

Merci pour votre réponse, je ne m'attendais pas à ce qu'elle soit sous forme d'une page web :P

Je ne comprends pas vraiment l'utilité de faire plusieurs QuerySelector pour l'ensemble de la page, on ne pourrait pas s'en sortir en utilisant qu'un seul d'entre eux qui s'applique sur toute la page?

Cordialement,

Alexandre
03/04/2018, 15h45
Beginner.

Salut,

Je ne suis pas sûr de comprendre la question... Tu veux vérifier cela dans toute la page ? Mais dans une page il peut y avoir plusieurs chapitres/groupes/conteneurs et chacun d'eux peuvent avoir des balises hn..., non ?

Citation:

Envoyé par MisterLSC

Je ne comprends pas vraiment l'utilité de faire plusieurs QuerySelector pour l'ensemble de la page, on ne pourrait pas s'en sortir en utilisant qu'un seul d'entre eux qui s'applique sur toute la page?

Ben justement si ta page contient plusieurs chapitres/groupes/conteneurs et que chacun d'eux peuvent avoir des balises hn alors il serait plus logique de traiter chacun d'eux séparément, non ? D'où l'usage de conteneurN.querySelectorAll( "h1, h2, h3, h4, h5, h6" ) pour chaque conteneur (si j'ai bien compris)...

PS : Pour les balises hn, n va de 1 à 6, non ? Alors pourquoi tu vas jusqu'à 11 dans tes boucles ?
03/04/2018, 16h47
MisterLSC

Bonjour,

J'ai vu que les hn ne sont pas censé dépasser 6 mais j'ai simplement mis un nombre au hasard en essayant de trouver une méthode qui marche sans appeler tous les hn possible:roll:

Oui, je cherche à vérifier toute la page mais le but est de pouvoir appliquer le script à toutes les pages possibles, sans savoir comment elles seront divisées en chapitres/groupes/contenus.
03/04/2018, 17h29
Beginner.

Ben dans ce cas il suffit d'adapter le code de Daniel, qui peut le plus peut le moins...

J'ai fait un mixte de ton code avec celui de Daniel (j'ai repris le principe, l'algorithme) plus quelques touches personnelles et ça donne cette fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 var headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6"); for (var i = 0, n = 0, hn; i < headings.length; i++, n = hn) { hn = +headings[i].tagName.slice(1); if (hn < n) { console.warn(i, "ordre incorrect !!! : une balise h" + hn + " après une balise h" + n); } else { if (n == 0) console.log(i, "une balise h" + hn); else console.log(i, "ordre correct : une balise h" + hn + " après une balise h" + n); } }
Tu peux tester ici : http://jsbin.com/zupigekaqi/edit?html,js,console,output

03/04/2018, 22h49
MisterLSC

Merci à tous les deux pour votre aide! J'allais justement partir sur un document.querySelectorAll (mais j'ai du aller au travail entre-temps :roll:)!

Bonjour,
il me semble que votre approche est incomplète dans le sens ou les <hx> peuvent appartenir à des conteneurs différents.

Exemple de code conforme :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<main>
  <h1>Titre principal</h1>
  <section>
    <h2>une balise h2</h2>
    <h3>une balise h3</h3>
    <h4>une autre balise h3</h4>
  </section>
  <section>
    <h2>une balise h2</h2>
    <h3>une balise h3</h3>
    <h4>une autre balise h3</h4>
  </section>
</main>

J'aurais plutôt une approche du type diviser pour mieux régner !

Dans un premier temps récupération de « l'arbre » puis traitement par blocs constitués.
Le traitement à faire va bien sûr dépendre de ce que l'on souhaite/possède comme spécification, unicité <h1>, hiérarchie, manque de continuité ...

Pour la partie récupération j'ai eu l'occasion de me pencher sur la question, plutôt quelque chose d'approchant, et je vous livre un fichier exemple de test.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Récupération « arbre » des headings</title>
<meta name="Author" content="NoSmoking">
<style>
* {
  margin: 0;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 100%;
  font: 1em/1.5 Verdana,sans-serif;
}
main {
  display: block;
  margin: 0 auto;
  max-width: 60em;
}
header h1 {
  color: #069;
  font-size: xx-large;
}
.row {
  display: table-cell;
  border: none !important;
  vertical-align: top;
  width: 28em;;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: 1.5em;
}
section, article, div {
  margin: .5em 1em;
  padding: 0 .5em;
  border: 1px solid #CCC;
}
section:hover, article:hover, div:hover {
  border: 1px solid #069;
}
ul {
  margin: .5em 1em;
  padding-left: 1.5em;
  border: 1px solid #ABC;
  line-height: 1.5em;
}
button {
  line-height: 2em;
  min-width: 20em;
  font-size: inherit;
  cursor: pointer;
}
</style>
</head>
<body>
<main>
  <header>
    <h1>Récupération « arbre » des headings</h1>
  </header>
  <div class="row">
    <div>
      <h1>Titre 1.1</h1>
      <p>Du texte ...</p>
      <h2>Titre 2.1</h2>
      <section>
        <h1>Titre 1.2</h1>
        <p>Du texte ...</p>
        <h4>Titre 4.1</h4>
        <article>
          <h5>Titre 5.1</h5>
          <p>Du texte ...</p>
        </article>
        <h3>Titre 3.1</h3>
        <p>Du texte ...</p>
      </section>
      <section>
        <h1>Titre 1.4</h1>
        Du texte ...
      </section>
    </div>
    <div>
      <h1>Titre 1.3</h1>
    </div>
  </div>
  <div class="row" id="result">
  </div>
  <button onclick="createListHeading()">createListHeading</button>
</main>
<script>
var selectorHeadings = "h1,h2,h3,h4,h5,h6";
function findListHeading(node) {
  var oHs = node.querySelectorAll(selectorHeadings);
  var i;
  var nb = oHs.length;
  var elem;
  var parent;
  var result = [];
  for (i = 0; i < nb; i += 1) {
    elem = oHs[i];
    // test si déjà traité
    if (!elem.getAttribute("flag")) {
      parent = elem.parentNode;
      // pris en compte si même parent
      if (parent === node) {
        result.push("<LI>&lt;" + elem.tagName + "&gt; " + elem.textContent);
        // marque comme traité
        elem.setAttribute("flag", "true");
      }
      // on y retourne
      else {
        result.push("<UL>" + findListHeading(parent) + "</UL>");
      }
    }
  }
  return result.join("");
}
 
function createListHeading() {
  // récup. de la liste
  var html = findListHeading(document.querySelector("body"));
  // affichage
  document.querySelector("#result").innerHTML = html;
  // on clear le flag
  var oElems = document.querySelectorAll("[flag]");
  Array.prototype.slice.call(oElems).map(function (elem) {
    elem.removeAttribute("flag");
  });
}
</script>
</body>

Pour la suite je verrais bien un traitement sur la liste réalisée voire modifier la récupération et travailler directement sur des objets.

04/04/2018, 19h03
NoSmoking

Je vous mets une version qui tiens compte uniquement de la hiérarchie des <hx> dans le document.
• Récupération « arbre » des headings.

Ce document est « non conforme » mais le résultat du validateur est bien diffèrent, comme quoi il est important de bien définir ce que l'on souhaite vérifier.

[Edit] correction lien foireux !
04/04/2018, 20h54
Beginner.

Merci NoSmoking, je vais regarder ça...

Citation:

Envoyé par NoSmoking

Bonjour,
il me semble que votre approche est incomplète dans le sens ou les <hx> peuvent appartenir à des conteneurs différents.

Ben oui c'est ce qui me semblait aussi c'est pourquoi je disais plus haut :

Citation:

Envoyé par Beginner.

...

Je ne suis pas sûr de comprendre la question... Tu veux vérifier cela dans toute la page ? Mais dans une page il peut y avoir plusieurs chapitres/groupes/conteneurs et chacun d'eux peuvent avoir des balises hn..., non ?

Ben justement si ta page contient plusieurs chapitres/groupes/conteneurs et que chacun d'eux peuvent avoir des balises hn alors il serait plus logique de traiter chacun d'eux séparément, non ? D'où l'usage de conteneurN.querySelectorAll( "h1, h2, h3, h4, h5, h6" ) pour chaque conteneur (si j'ai bien compris)...
05/04/2018, 09h52
danielhagnoul

Citation:

Envoyé par NoSmoking

[...]il me semble que votre approche est incomplète dans le sens ou les <hx> peuvent appartenir à des conteneurs différents.

J'en ai bien entendu tenu compte dans mon exemple, mais cette approche ne "lui plaît pas" ! :mouarf:

Citation:

Merci pour votre réponse, je ne m'attendais pas à ce qu'elle soit sous forme d'une page web

Je ne comprends pas vraiment l'utilité de faire plusieurs QuerySelector pour l'ensemble de la page, on ne pourrait pas s'en sortir en utilisant qu'un seul d'entre eux qui s'applique sur toute la page?

Cordialement,

Alexandre
06/04/2018, 12h24
NoSmoking

Oui c'est vrai mais quand il dit (que ne n'avais pas lu :oops:)

Citation:

Je ne comprends pas vraiment l'utilité de faire plusieurs QuerySelector pour l'ensemble de la page, on ne pourrait pas s'en sortir en utilisant qu'un seul d'entre eux qui s'applique sur toute la page?

il a raison dans le sens où l'on pourrait récupérer une bonne fois tous les <hx> et les parcourir.

Ce n'est pas l'option non plus que j'ai prise, par flemmardise, et je relance la recherche à chaque entrée dans la fonction en ciblant le parent.