2017-07-27 3 views
2

Es könnte eine dumme Frage für einige sein, aber ich bin neugierig zu wissen, warum document.body.p nicht funktioniert, aber document.body funktioniert und anstelle von document.body.getElementById('mypara').Warum können Elementobjekte nicht genauso wie document.body nach Tagnamen ausgewählt werden?

In document.body beziehen wir Körper durch seine tagName: body also, warum document.body.p nicht funktioniert.

Dank

+0

Ich sehe den Punkt dieser Frage nicht, da Javascript die Verwendung von 'document.getElementsByTagName ('p')' bietet Wird eine Knotenliste zurückgegeben, müsste die Rückgabe von 'document.body.p' auch das gleiche Ergebnis liefern, wenn mehrere Absatzelemente gefunden werden. – NewToJS

+0

Ein Grund dafür ist, dass "document.body" mehrere Absatzelemente enthalten kann. –

+0

Sie haben nur ein Körperelement in einer Seite, wie Kopf oder Titel. Es ist offensichtlich, dass diese Elemente Eigenschaften anstelle von p oder div haben ... –

Antwort

5

Da sichergestellt ist, dass nur ein Körper in einem Dokument gibt es (zumindest im Idealfall). Wenn Sie document.body.p tun, gibt es keine Garantie, dass es nur ein p-Element im Dokument gibt. Welches p-Element sollte zurückgegeben werden, wenn mehrere ps vorhanden sind? Kein Recht.


Frage von Kommentar:

aber dann haben Sie auch nur eine HTML-Element (im Idealfall) und das, aber es gibt keine document.html. Recht??

Ja, es gibt.

Document.documentElement 

Gibt das Element, das ein direktes Kind des Dokuments ist. Bei HTML-Dokumenten ist dies normalerweise das Element.

https://developer.mozilla.org/en/docs/Web/API/Document

Beachten Sie, dass documentElement nur gelesen wird.

+0

aber Sie haben auch nur ein 'html' Element (im Idealfall) und das, aber es gibt keine' document.html'. Recht?? – appu

+0

@appu In meiner Antwort hinzugefügt. –

+0

Ich denke, dass Sie den Punkt meiner Frage vermissen. Ich beziehe mich auf Tagnamen, nicht auf APIs ('getElementsByTagName') oder Eigenschaftsnamen (' documentElement'), die normalerweise für den Zugriff auf DOM-Elemente verwendet werden. 'documentElement' ist nicht der Tag-Name von' 'sondern' html'. Wenn es also "document.body" gibt, warum gibt es dann nicht "document.html", da es nur einen von beiden gibt. – appu

0

document.body gibt einen Verweis auf das body-Element einer Webseite zurück. Dieses Element kann ein Elternteil für andere Elemente sein, die als Kinder bezeichnet werden. In diesem Fall ist das erste Kind das Absatzelement, das der Code liest durch einen Index von null auf Kinder Anwendung, wie folgt:

console.log(document.body.children[0]); 
 
console.log(document.body.children[0].textContent);
<body> 
 
<p>text</p>

Wenn Sie den Inhalt des Absatzes lesen möchten Sie müssen nur auf "textContent" oder "innerText" verweisen.

0

Weil document ein HTMLDocument Objekt mit den Eigenschaften aufgeführt ist here, und eine dieser Eigenschaften ist body, die eine Instanz von HTMLElement ist. Sie können versuchen, diese in der Konsole Ihres Browsers:

  • document instanceof HTMLElement wird false zurück.
  • document instanceof HTMLDocument wird true zurückgeben.
  • document.body instanceof HTMLElement wird true zurückgeben.

So, jetzt wissen wir, dass document und document.body verschiedene Arten von Objekten sind. Sie können die Dokumentation von Mozilla unter den obigen Links durchsuchen, um die für jeden Objekttyp verfügbaren Eigenschaften und Methoden zu sehen.Zum Beispiel ist getElementById nur auf document verfügbar und getElementsByTagName ist auf jedem Element Objekt, wie body (Element die Schnittstelle das Elternteil HTMLElement ist, und so werden auch Methoden aus HTMLElementElement Verfügung haben).

Wenn auf alle Tagnamen wie eine Eigenschaft wie document.body.p zugegriffen werden könnte, würde ein Namenskonflikt auftreten. document.body.style gibt eine CSSStyleDeclaration zurück, aber wenn style als ein Tagname behandelt wurde, wie Sie vorschlagen, dann müsste es eine HTMLCollection von <style> Elemente zurückgeben. (Obwohl technisch <style> Elemente im Körper ungültig ist, wird der Browser es immer noch analysieren.)

Verwandte Themen