web-dev-qa-db-fra.com

Comment obtenir tous les éléments h1, h2, h3 etc. en javascript?

Je veux écrire quelque chose comme ça en javascript:

var all_headings = document.getElementsByTagName("h1,h2,h3,h4,h5,h6");

all_headings serait alors une liste de tous les éléments qui sont h1 ou h2 ou h3... Et dans l'ordre où ils apparaissent dans le document, bien sûr.

Comment fait-on ça?

javascripthtmlgetelementsbytagname
25
Eyal

Avec les navigateurs modernes, vous pouvez le faire

document.querySelectorAll("h1, h2, h3, h4, h5, h6")

Ou vous pouvez obtenir une compatibilité entre navigateurs en utilisant jQuery:

$("h1, h2, h3, h4, h5, h6")
54
Alex Turpin

Si vous utilisez jQuery, vous pouvez utiliser

$(":header")

exemple de la documentation jQuery

<script>$(":header").css({ background:'#CCC', color:'blue' });</script>

Documentation

16
GibboK

Si vous avez juste besoin d'une sélection DOM inter-navigateurs, il n'est pas nécessaire de charger jQuery.

Chargez simplement Sizzle à la place. C'est le moteur de sélection que jQuery utilise.

Exemple: http://jsfiddle.net/77bMG/

var headings = Sizzle('h1,h2,h3');

for( var i = 0; i < headings.length; i++ ) {
    document.write('<br>');
    document.write(i + ' is ' + headings[i].innerHTML);
}

Ou sans code de bibliothèque, vous pouvez parcourir le DOM et pousser les en-têtes dans un tableau.

Exemple: http://jsfiddle.net/77bMG/1/

var headings = [];

var tag_names = {
    h1:1,
    h2:1,
    h3:1,
    h4:1,
    h5:1,
    h6:1
};

function walk( root ) {
    if( root.nodeType === 1 && root.nodeName !== 'script' ) {
        if( tag_names.hasOwnProperty(root.nodeName.toLowerCase()) ) {
            headings.Push( root );
        } else {
            for( var i = 0; i < root.childNodes.length; i++ ) {
                walk( root.childNodes[i] );
            }
        }
    }
}

walk( document.body );

for( var i = 0; i < headings.length; i++ ) {
    document.write('<br>');
    document.write(i + ' is ' + headings[i].innerHTML);
}
5
user113716

Vous n'avez pas besoin de jQuery pour quelque chose de simple; essayez le sien:

var tags = [ "h1","h2","h3" ];
var all_headings = [];

for(var i = 0; i < tags.length; i++)
    all_headings = all_headings.concat(document.getElementsByTagName(tags[i]));
3
TJHeuvel

QuentinUK est la meilleure réponse ici, car c'est le/seul/qui répond à la question en fournissant une solution utilisant uniquement JavaScript sans bibliothèque.

for (i=1; i<=6; i++) {
    var headers = document.getElementsByTagName('h'+i);
    for (j=0; j<headers.length; j++) {
        headers[j].className = 'h';
    }
}
var headers = document.getElementsByClassName('h');
for (i=0; i<headers.length; i++) {
    headers[i].innerHTML += ' '+i;
}
2
Jan Kyu Peblik

Fonction sans jQuery et document.querySelectorAll

function get_all_h(document) {
    var arr = [];
    if (!document) return arr;
    var all_el = document.getElementsByTagName('*');
    for (var i = 0, n = all_el.length; i < n; i++) {
        if (/^h\d{1}$/gi.test(all_el[i].nodeName)) {
            arr.Push(all_el[i]);
        }
    }
    return arr;
}
1
Ramil Shavaleev

Donnez-leur un nom de classe commun puis utilisez getElementsByClassName

0
QuentinUK