Warum gibt getElementsByTagName() immer ein Array zurück?

Warum ist es so, dass wenn ich nur ein h1 Element im Dokument habe, muss ich immer noch den Index verwenden, um darauf zuzugreifen?Warum gibt getElementsByTagName() immer ein Array zurück?

Wie das Folgende funktioniert nicht.

document.getElementsByTagName('h1').innerHTML = "SHUSHAN";

aber wenn ich

document.getElementsByTagName('h1')[0].innerHTML = "SHUSHAN";

tun funktioniert es.

Obwohl ich nur eine h1 habe, warum muss ich angeben?

Quelle

2017-02-07 Hye Shusho

Da der Rückgabetyp ein Array ist. Denken Sie darüber nach, wie viel Schmerz es wäre, wenn diese Funktion manchmal ein en-Element zurückgibt und manchmal eine Reihe von Elementen zurückgibt, das wäre Wahnsinn. – Keatinge

Kurze Antwort: Dies ist so, dass Sie etwas Verstand haben können.

Wenn Sie nicht wissen, ob Sie ein einzelnes Element erhalten werden oder eine Sammlung von Elementen, würden Sie defensiv schreiben, Typprüfung (dumm) Code wie diese

let foo = document.getElementsByTagName('h1') 
if (foo instanceof HTMLCollection) 
    // do something with all elements 
else 
    // do something with just one element

Es macht viel mehr Sinn für die Funktion immer einen bekannten Typ zurückgeben, ein HTMLCollection von HTMLElement Objekte

Wenn Sie kümmern sich nur um das erste Element erhalten, können Sie Destrukturierung Zuordnung

verwenden klar

let [first] = document.getElementsByTagName('h1') 
console.log(first) // outputs just the first h1

Das ist in Ordnung, weil die Zuordnung zeigt, dass es ein Array (oder Array-like) von Elementen ist erwartet, aber kümmert sich nur um eine Kennung auf den ersten Wert zuweisen

Sie sich auch bewusst sein sollten von den neueren document.querySelector und document.querySelectorAll Funktionen & hellip;

document.querySelector wird höchstens wählenein Element aus dem Dokument oder Rückkehr null
document.querySelectorAll immer eine HTMLCollection zurückkehren, aber leer sein, wenn keine Elemente, die die Wähler entsprechen.

Hier ist, wie ich Ihren Code im Jahr 2017 schreiben würde

setTimeout($ => { 
 
    // get the element to change 
 
    let elem = document.querySelector('h1') 
 
    // update the text of the element 
 
    elem.textContent = 'SHUSHAN' 
 
}, 3000)

<h1>wait 3 seconds ...</h1>

Quelle

2017-02-07 00:16:02 naomik

Können Sie mir sagen, was $ => {...} von setTimeout bedeutet? –

Es ist nur eine anonyme Funktion. Es könnte umgeschrieben werden als 'function() {...}' – naomik

getElement s ByTagName - der Methodenname selbst bedeutet, dass er mehrere Elemente zurückgibt - d. H. Ein Array. Die Methode gibt immer ein Array zurück, dessen Länge der Anzahl der übereinstimmenden Elemente entspricht. Daher müssen Sie immer auf die Elemente über den Index des Elements im Array zugreifen.

Quelle

2017-02-07 00:15:56 Sunny

Arrays müssen einen Index zugegriffen werden, unabhängig davon, wie viele Werte, die sie hält. Lesen Sie etwas über Array-Datentypen, um ein besseres Verständnis des Konzepts zu erhalten.

Quelle

2017-02-07 00:17:27

Der Punkt ist, dass getElementsByTagName immer eine HTMLCollection von Elementen zurückgibt, die meist als ein Array funktioniert. Wenn in dieser Auflistung nur ein Element vorhanden ist, lautet der Index 0.

Aus diesem Grund müssen Sie den Index angeben, auch wenn nur ein Element im Dokument vorhanden ist.

Klicken Sie auf here oder here, um weitere Dokumentation zu diesem Thema anzuzeigen.

Quelle

2017-02-07 00:20:14

Warum gibt getElementsByTagName() immer ein Array zurück?

Antwort

Verwandte Themen