HTML ドキュメント フローとドキュメント オブジェクト モデル DOM の理解_html/css_WEB-ITnose

まえがき

フローティングとポジショニングを理解すると、ドキュメントフローの概念に出会います。フローティングとポジショニングをより深く理解するために、ドキュメント フローと DOM (Document Object Model) を学びました。

Text

DOM (Document Object Model) を簡単に理解すると、書かれた HTML ページのすべてのコンテンツで構成されるツリー構造です。例:

W3C の HTML DOM 標準によれば、HTML ドキュメント内のすべてのコンテンツはノードです。

ドキュメント全体がドキュメント ノードです。

各 HTML 要素は要素ノードです。

HTML 要素内のテキストはテキスト ノードです。

各 HTML 属性は属性ノードです。

注釈は注釈ノードです。

ドキュメント フローは別の概念です。フローは実際には、ブラウザが HTML 要素をページに配置するために使用するメソッドです。デフォルトでは、ほとんどの要素がドキュメント フロー内にあります。ブラウザは HTML ファイルの先頭から開始し、上から下への要素フローに沿って、見つかった各要素を 1 つずつ表示します。つまり、要素は HTML で書かれた順序で上下左右に積み重ねられます。このうち、ブロックレベル要素は前後に改行があり、インライン要素は前後に改行がありません。

この記事は、ドキュメントフローとDOMについて新たな理解が得られたら更新され続けます。 🎈