Wie bekomme ich alle h1,h2,h3 usw.-Elemente in javascript?

Ich dazu etwas schreiben soll, wie dies in javascript:

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

all_headings wäre dann eine Liste aller Elemente, die h1 oder h2 oder h3... Und in der Reihenfolge, in der Sie im Dokument erscheinen, natürlich.

Wie mache ich es?

InformationsquelleAutor der Frage Eyal | 2011-08-15

  1. 37

    Mit modernen Browsern, die Sie tun können

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

    Oder Sie können cross-browser-Kompatibilität durch die Verwendung von jQuery:

    $("h1, h2, h3, h4, h5, h6")

    InformationsquelleAutor der Antwort Alex Turpin

  2. 14

    Wenn Sie jQuery können Sie

    $(":header")

    Beispiel von der jQuery-Dokumentation

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

    Dokumentation

    InformationsquelleAutor der Antwort GibboK

  3. 4

    Wenn Sie einfach nur brauchen, um einige cross-browser-DOM-Auswahl, es gibt keine Notwendigkeit zu laden, jQuery.

    Laden Sie einfach Brutzeln statt. Es ist die Selektor-engine von jQuery verwendet.

    Beispiel: 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);
}

    Ohne oder Bibliotheks-code, können Sie zu Fuß den DOM, und drücken Sie die überschriften in ein Array.

    Beispiel: 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);
}

    InformationsquelleAutor der Antwort user113716

  4. 3

    Brauchen Sie nicht, die jQuery für etwas einfach; versuchen Sie, seine:

    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]));

    InformationsquelleAutor der Antwort TJHeuvel

  5. 1

    QuentinUK das ist die beste Antwort hier, denn es ist das /nur/ein, beantwortet die Frage, indem Sie eine Lösung, die nur mithilfe von JavaScript ohne Bibliotheken.

    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;
}

    InformationsquelleAutor der Antwort Jan Kyu Peblik

  6. 1

    Funktion ohne jQuery und 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;
}

    InformationsquelleAutor der Antwort Ramil Shavaleev

  7. 0

    Ihnen eine gemeinsame Klasse Namen verwenden Sie dann getElementsByClassName

    InformationsquelleAutor der Antwort QuentinUK

Schreibe einen Kommentar