『根本シリーズ2』.DOMって何ですか?>
今回は、前に予告したように、DomeがWeb上でどのように機能しているかを理解します.
1. D.O.M.
1. D.O.M.
名前やウェブページを开発すると必ず出会うその名前...ドーム
DOMとは.DocumentofObject Modelの弱者は、開発を学んだ人なら誰でも少なくとも一度は聞いたことがある.
では、ここでこれらは何を意味しますか?
まず、基本的に画像を見て、私たちは通常知っています.htmlの基本的な骨格です.次に、上の一番上の一番上にドキュメントを表示します.
さあ.ここで待って!
上のコードを見てみましょう.htmlドキュメントを作成するときに、上部に設定するオプション...それがdoctypedocumentypeのオプションを設定します.
すなわち,Webブラウザでは,開発者がこれから作成するWebドキュメントがhtmlで作成される.
宣言だと思えばいい.最終的には、すべてのdomの始まりはこの小さなオプションから始まります.
私はモジラからdomの定義を持ってきました.
DOMとは?
ドキュメントオブジェクトモデルは、HTML、XMLドキュメントのプログラミングインターフェースです.DOMは、ドキュメントの構造化された表現(Structured Representation)を提供し、プログラミング言語でDOM構造にアクセスする方法を提供し、ドキュメントの構造、スタイル、コンテンツを変更するのに役立ちます.DOMは、ノードとオブジェクトを使用してドキュメントを表します.Webページをスクリプトまたはプログラミング言語にリンクする責任を負います.
Webページはドキュメントです.このドキュメントは、Webブラウザでその内容を解析してWebブラウザ画面に表示したり、HTMLソースコードそのものとして表示したりすることができます.同じドキュメントを使用すると、異なる形式で表示されることに注意してください.DOMは、同じドキュメントを表現、記憶、および操作する方法を提供する.DOMはWebページのオブジェクト向け表示であり、JavaScriptなどのスクリプト言語でDOMを変更できます.
=>要するに、要約すると、画面を描画するために、私たちが表示しているWebページの内部に複数のプログラミング言語を接続する接続体です.この点を完璧に理解するためには,ネットワークパケットと呼ばれる鮮やかさを理解する必要がある.ただし、WebPackについては後で詳しく説明します.今から簡単に理解しておきましょう.
2. DOM tree.
domの構造を理解する必要があります.正確にはdomのツリー構造を意味します.
では、domのツリー構造は?それは何を意味しますか?
HTMLドキュメントのモデルの構成
ブラウザはHTMLドキュメントをロードし、そのドキュメントのモデルをメモリに作成します.この場合、モデルはオブジェクトのツリーからなり、DOMツリーと呼ばれます.
最後~上の構造はdomのツリー構造次に、よくあるhtmlの構造を示します.実際に比較するとどう思いますか?そっくりですか?<!DOCTYPE html>
<html>
<head>
<style>
.red { color: #ff0000; }
.blue { color: #0000ff; }
</style>
</head>
<body>
<div>
<h1>Cities</h1>
<ul>
<li id="one" class="red">Seoul</li>
<li id="two" class="red">London</li>
<li id="three" class="red">Newyork</li>
<li id="four">Tokyo</li>
</ul>
</div>
</body>
</html>
そうですね.実際,domはhtmlコードの階層を意味すると簡単に考えられる.
つまり、整理して
DOMでは、すべての要素、コメント、テキストがオブジェクトであり、Documentオブジェクトのサブオブジェクトです.要素のオーバーラップ関係は、オブジェクトのツリー構造によって親子関係を表します.DOMツリーのエントリポイントはドキュメントオブジェクトで、終点は要素テキストを表すオブジェクトです.
3.DOMのノードコンポーネント。
さあ.上の例の図では、目が尖っている人であれば、いくつかの場所が見つかります.
これがノードです.domのツリー構造はほぼ4つのノードから構成されている.
1)文書ノード
ツリーの上部に存在し、各要素、ツリー、テキストノードにアクセスするには、ドキュメントノードを通過する必要があります.すなわち、DOMツリーの始点(entry point)にアクセスする.
2)要素ノード
要素ノードはHTML要素を表します.HTML要素は、親子関係を重ねて作成し、その親子関係によって情報を構築します.したがって,要素ノードは文書の構造を記述しているといえる.ドキュメントノード、テキストノードにアクセスするには、まず要素ノードを見つけてアクセスする必要があります.すべての要素ノードは、各要素の特性を表すためにHTML Elementオブジェクトを継承したオブジェクトで構成されます.
3）属性ノード
ツリーノードはHTML要素のツリーを表します.ツリーノードは、エレメントのサブアイテムではなく、エレメントの一部として表示されます.したがって、対応する要素ノードを参照してアクセスすることで、ドキュメントツリーを参照および変更できます.
4）テキストノード
テキストノードはHTML要素のテキストを表します.テキストノードは要素ノードのサブノードであり、独自のサブノードを持つことはできません.すなわち,テキストノードはDOMツリーの最端末である.
図を下にまとめる.
次の図に示すように、Chrome開発者ツールはhtmlファイルがどのノードから構成されているかを決定します.筆者が確認したように,ある要素のノードを確認することができる.ここから、これらのノードにどのサブノードがあるかがわかります.
4.次の予告と整理。
不思議ではないでしょうか.私たちはよくネットだと思っていますが、簡単そうに見えるものがこんなアーキテクチャで構成されているなんて......
もちろん、ここには理解しなければならないことがたくさんあります.基本中の基本だけを整理しました.筆者もその部分以外の詳細を学習・理解してから宣伝する.
次は、これらのノードを操作してdomを操作する方法について説明します.
長いコメントありがとうございます私たちが根を下ろす日まで、がんばってください.🙇🏻♂️
Reference
この問題について(『根本シリーズ2』.DOMって何ですか?>), 我々は、より多くの情報をここで見つけました
https://velog.io/@minsu8834/근본-시리즈-2탄.-DOM이란-무엇이란-말이냐
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
domの構造を理解する必要があります.正確にはdomのツリー構造を意味します.
では、domのツリー構造は?それは何を意味しますか?
HTMLドキュメントのモデルの構成
ブラウザはHTMLドキュメントをロードし、そのドキュメントのモデルをメモリに作成します.この場合、モデルはオブジェクトのツリーからなり、DOMツリーと呼ばれます.
最後~上の構造はdomのツリー構造次に、よくあるhtmlの構造を示します.実際に比較するとどう思いますか?そっくりですか?
<!DOCTYPE html>
<html>
<head>
<style>
.red { color: #ff0000; }
.blue { color: #0000ff; }
</style>
</head>
<body>
<div>
<h1>Cities</h1>
<ul>
<li id="one" class="red">Seoul</li>
<li id="two" class="red">London</li>
<li id="three" class="red">Newyork</li>
<li id="four">Tokyo</li>
</ul>
</div>
</body>
</html>つまり、整理して
DOMでは、すべての要素、コメント、テキストがオブジェクトであり、Documentオブジェクトのサブオブジェクトです.要素のオーバーラップ関係は、オブジェクトのツリー構造によって親子関係を表します.DOMツリーのエントリポイントはドキュメントオブジェクトで、終点は要素テキストを表すオブジェクトです.
3.DOMのノードコンポーネント。
さあ.上の例の図では、目が尖っている人であれば、いくつかの場所が見つかります.
これがノードです.domのツリー構造はほぼ4つのノードから構成されている.
1)文書ノード
ツリーの上部に存在し、各要素、ツリー、テキストノードにアクセスするには、ドキュメントノードを通過する必要があります.すなわち、DOMツリーの始点(entry point)にアクセスする.
2)要素ノード
要素ノードはHTML要素を表します.HTML要素は、親子関係を重ねて作成し、その親子関係によって情報を構築します.したがって,要素ノードは文書の構造を記述しているといえる.ドキュメントノード、テキストノードにアクセスするには、まず要素ノードを見つけてアクセスする必要があります.すべての要素ノードは、各要素の特性を表すためにHTML Elementオブジェクトを継承したオブジェクトで構成されます.
3）属性ノード
ツリーノードはHTML要素のツリーを表します.ツリーノードは、エレメントのサブアイテムではなく、エレメントの一部として表示されます.したがって、対応する要素ノードを参照してアクセスすることで、ドキュメントツリーを参照および変更できます.
4）テキストノード
テキストノードはHTML要素のテキストを表します.テキストノードは要素ノードのサブノードであり、独自のサブノードを持つことはできません.すなわち,テキストノードはDOMツリーの最端末である.
図を下にまとめる.
次の図に示すように、Chrome開発者ツールはhtmlファイルがどのノードから構成されているかを決定します.筆者が確認したように,ある要素のノードを確認することができる.ここから、これらのノードにどのサブノードがあるかがわかります.
4.次の予告と整理。
不思議ではないでしょうか.私たちはよくネットだと思っていますが、簡単そうに見えるものがこんなアーキテクチャで構成されているなんて......
もちろん、ここには理解しなければならないことがたくさんあります.基本中の基本だけを整理しました.筆者もその部分以外の詳細を学習・理解してから宣伝する.
次は、これらのノードを操作してdomを操作する方法について説明します.
長いコメントありがとうございます私たちが根を下ろす日まで、がんばってください.🙇🏻♂️
Reference
この問題について(『根本シリーズ2』.DOMって何ですか?>), 我々は、より多くの情報をここで見つけました
https://velog.io/@minsu8834/근본-시리즈-2탄.-DOM이란-무엇이란-말이냐
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
不思議ではないでしょうか.私たちはよくネットだと思っていますが、簡単そうに見えるものがこんなアーキテクチャで構成されているなんて......
もちろん、ここには理解しなければならないことがたくさんあります.基本中の基本だけを整理しました.筆者もその部分以外の詳細を学習・理解してから宣伝する.
次は、これらのノードを操作してdomを操作する方法について説明します.
長いコメントありがとうございます私たちが根を下ろす日まで、がんばってください.🙇🏻♂️
Reference
この問題について(『根本シリーズ2』.DOMって何ですか?>), 我々は、より多くの情報をここで見つけました https://velog.io/@minsu8834/근본-시리즈-2탄.-DOM이란-무엇이란-말이냐テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol