2017-02-16 9 views
3

体がロードされる前であってもそのlastChildとしての体を持っていますが、ここにある:は、私は、これはオブジェクト参照とは何かを持っているかもしれないという気持ちを持って

:私は次のコードしている

<html> 
    <head> 
     <script type="text/javascript"> 
      console.log(document.getElementsByTagName("html")); 
      console.log(document.getElementsByTagName("html")[0].lastChild); 
     </script> 
    </head> 

    <body><h1>Hello</h1></body> 
</html> 

コンソールで、最初のコレクションを展開すると、body要素がまだ解析されていなくても、その子ノード(lastChild)としてbodyがあることがわかります。しかし、2番目のオブジェクトでは、それは期待どおりのheadタグを示しています。

ここでこの質問を投稿していますが、私はこのpenを作成しましたが、そこには2番目のコンソールは本体タグであり、ヘッドではありません。

なぜ、最初のコンソール文がhtmlで本文を表示しているのですか?それともブラウザで何かをしなければならないのでしょうか?ありがとう

答えて

1

getElementsByTagNameはあなたにライブ HTMLCollectionを与えるでしょう。これは、基礎となるDOMが変更されたときに、関数によって返されるライブコレクションも変更されることを意味します。

HTML DOM内のHTMLCollectionは有効です。基礎となる文書が変更されたときに自動的に更新されます。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

ので、最初は、ロギングが発生した時点で、bodyタグは、まだ解析されません。本体が解析される前にコンソールの出力を確認できれば、そこには表示されません。

しかし、コンソールでHTMLCollectionを実際にチェックすると、bodyはすでに解析されているため(HTMLCollectionがライブであるため)表示されます。

あなたは「休憩」のライブ接続をする場合は、配列のスプレッド演算子使用して、標準的な配列にあなたのHTMLCollectionをキャストすることができます。

const collection = [...liveCollection]; 

、明らかに、第2 console.logprints headタグによって理由それが記録された時、それは本当に最後の子供でした。 getElementsByClassNameよう

FYI

他の一般的なDOMクエリー機能を使用すると、同様のコレクションを生きる与えます。

+0

あなたの答えは正しいと思います。あなたのことがちょっと混乱していたので私はちょうど私のことを追加しました。おそらくあなたはちょっとした説明であなたを更新するかもしれません –

+1

[querySelectorAll()](https://dom.spec.whatwg.org/#dom-parentnode-queryselectorall)は、静的なコレクションではなく、静的なコレクションを返します。 – Alohci

+0

@Alohciあなたは正しいです、私の答え、感謝を更新しました。 – Scarysize

1

最初のconsole.logにhtmlタグを記録すると、実際のHTMLCollectionが記録されます。

最初は、ロギングが発生した時点で、bodyタグはまだ解析されていません。したがって、本体が解析される前にコンソールの出力を確認できれば、そこには表示されません。

しかし、コンソールでHTMLCollectionを実際にチェックすると、bodyはすでに解析されているため、表示されます(HTMLCollectionがライブであるため)。

明らかに、第2のconsole.logは、ログされたときに実際に最後の子であったため、headタグを出力します。

関連する問題