DOMとは?
7348 ワード
バニラコードの2週間のタスクを完了する際、DOMを使用してHTML Tagの要素を操作することが多い.DOMって何?
1. DOM?
1. DOM?
✳️ The Document Object Model, or the “DOM”, is an interface to web pages
勘定科目DOMは、「Document Object Model」の略で、Webページのインタフェースとして整理されています.DOMを使用すると、Webページの構造、コンテンツ、スタイルを操作できます.
DOMを理解する前に、まずページの表現過程を見てみましょう.
2.ウェブ表現の過程は?
ブラウザがWebページを構成するために必要なドキュメントを解釈し、ブラウザに表示するプロセスは大きく2つあります.
1▼DOMとCSSOMを使って「render tree」を作成.
2▼▼「render tree」を用いてウェブページに表現する.
3.DOMの作成方法
HTMLドキュメントとは少し違いますが、DOMはHTMLドキュメントに基づいて作成されたオブジェクトモデルです.
このようにして作成されたDOMは、DOMの各要素(ノード)が木の形式であるため、「node tree」とも呼ばれます.<html lang="kor">
<head>
<title>What is DOM?</title>
</head>
<body>
<h1>Render tree</h1>
<p>DOM</p>
<P>CSSOM</P>
</body>
</html>
例えば、上のHTMLファイル
htmlのルート
ヘッドとボディという大きな枝が2本あります
ヘッドという大きな茎にはtitleという小さな茎があります.
bodyという大きな茎にはh 1,pという小さな茎があります.
各茎にはノードツリーがあり、その葉をtextと言います.
3.1)DOMではないものがある。
上記のノードツリーの例では、DOMはHTMLドキュメントの要素と1対1で一致しているように見えますが、実際にはそうではありません.いくつかの例外があります.
19615;DOMは、有効なHTMLドキュメントにのみ提供されるインタフェースです.<html>
Hello, world!
</html>
上のhtmlドキュメントは不完全です.
必須要素headラベルとbodyラベルのドキュメントを省略します.
ブラウザはこの不完全なHTMLドキュメントを見逃さない.
DOMを作成するとき、ブラウザは不完全なHTMLコードを次のように変更します.
(もちろん、スケルトンとしてのHTMLファイルは変更されていません.HTMLは依然として存在します.ブラウザがDOMを生成する過程で、DOMとHTMLに差が生じました.)
ブラウザで修正したDOM node treeの外観.
29615;DOMはJavascriptによって動的に変更できます.var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);
DOMを作成する過程で、DOMの要素は上のJavaScriptで動的に追加できます.
4.ブラウザ画面に表示されるのはDOMではありません。
1𗞚DOMとCSSOMが作成した「Render tree」
2▼▼▼LayoutとPaintプロセスで生成された結果がブラウザ画面に表示されます.
レンダーツリー(Render Tree)は、レンダーされたものが何であるかにのみ関心があるため、表示されない部分はレンダーツリー(Render Tree)から除外されます.
ex)display:noneプロパティが存在する要素はDOMにありますが、表示されないため、レンダリングツリーに陥ります.
ソース:https://bitsofco.de/what-exactly-is-the-dom/?utm_source=CSS-Weekly&utm_campaign=Issue-341&utm_medium=email
https://velog.io/@yejineee/DOM%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-DOM-Node%EC%99%80-Element%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://webruden.tistory.com/634
ブラウザのレンダーパス。レンダーとは、開発者によって作成されたドキュメント(HTML、CSS、JavaScriptなど)…|by SeungwonGo|開発者の品格|Medium
How the browser renders a web page? — DOM, CSSOM, and Rendering | by Uday Hiwarale | JsPoint | Medium
DREAMコード:ブラウザ101:2で説明
Reference
この問題について(DOMとは?), 我々は、より多くの情報をここで見つけました
https://velog.io/@effort_jk/DOM이란
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
ブラウザがWebページを構成するために必要なドキュメントを解釈し、ブラウザに表示するプロセスは大きく2つあります.
1▼DOMとCSSOMを使って「render tree」を作成.
2▼▼「render tree」を用いてウェブページに表現する.
3.DOMの作成方法
HTMLドキュメントとは少し違いますが、DOMはHTMLドキュメントに基づいて作成されたオブジェクトモデルです.
このようにして作成されたDOMは、DOMの各要素(ノード)が木の形式であるため、「node tree」とも呼ばれます.<html lang="kor">
<head>
<title>What is DOM?</title>
</head>
<body>
<h1>Render tree</h1>
<p>DOM</p>
<P>CSSOM</P>
</body>
</html>
例えば、上のHTMLファイル
htmlのルート
ヘッドとボディという大きな枝が2本あります
ヘッドという大きな茎にはtitleという小さな茎があります.
bodyという大きな茎にはh 1,pという小さな茎があります.
各茎にはノードツリーがあり、その葉をtextと言います.
3.1)DOMではないものがある。
上記のノードツリーの例では、DOMはHTMLドキュメントの要素と1対1で一致しているように見えますが、実際にはそうではありません.いくつかの例外があります.
19615;DOMは、有効なHTMLドキュメントにのみ提供されるインタフェースです.<html>
Hello, world!
</html>
上のhtmlドキュメントは不完全です.
必須要素headラベルとbodyラベルのドキュメントを省略します.
ブラウザはこの不完全なHTMLドキュメントを見逃さない.
DOMを作成するとき、ブラウザは不完全なHTMLコードを次のように変更します.
(もちろん、スケルトンとしてのHTMLファイルは変更されていません.HTMLは依然として存在します.ブラウザがDOMを生成する過程で、DOMとHTMLに差が生じました.)
ブラウザで修正したDOM node treeの外観.
29615;DOMはJavascriptによって動的に変更できます.var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);
DOMを作成する過程で、DOMの要素は上のJavaScriptで動的に追加できます.
4.ブラウザ画面に表示されるのはDOMではありません。
1𗞚DOMとCSSOMが作成した「Render tree」
2▼▼▼LayoutとPaintプロセスで生成された結果がブラウザ画面に表示されます.
レンダーツリー(Render Tree)は、レンダーされたものが何であるかにのみ関心があるため、表示されない部分はレンダーツリー(Render Tree)から除外されます.
ex)display:noneプロパティが存在する要素はDOMにありますが、表示されないため、レンダリングツリーに陥ります.
ソース:https://bitsofco.de/what-exactly-is-the-dom/?utm_source=CSS-Weekly&utm_campaign=Issue-341&utm_medium=email
https://velog.io/@yejineee/DOM%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-DOM-Node%EC%99%80-Element%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://webruden.tistory.com/634
ブラウザのレンダーパス。レンダーとは、開発者によって作成されたドキュメント(HTML、CSS、JavaScriptなど)…|by SeungwonGo|開発者の品格|Medium
How the browser renders a web page? — DOM, CSSOM, and Rendering | by Uday Hiwarale | JsPoint | Medium
DREAMコード:ブラウザ101:2で説明
Reference
この問題について(DOMとは?), 我々は、より多くの情報をここで見つけました
https://velog.io/@effort_jk/DOM이란
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<html lang="kor">
<head>
<title>What is DOM?</title>
</head>
<body>
<h1>Render tree</h1>
<p>DOM</p>
<P>CSSOM</P>
</body>
</html><html>
Hello, world!
</html>var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);1𗞚DOMとCSSOMが作成した「Render tree」
2▼▼▼LayoutとPaintプロセスで生成された結果がブラウザ画面に表示されます.
レンダーツリー(Render Tree)は、レンダーされたものが何であるかにのみ関心があるため、表示されない部分はレンダーツリー(Render Tree)から除外されます.
ex)display:noneプロパティが存在する要素はDOMにありますが、表示されないため、レンダリングツリーに陥ります.
ソース:https://bitsofco.de/what-exactly-is-the-dom/?utm_source=CSS-Weekly&utm_campaign=Issue-341&utm_medium=email
https://velog.io/@yejineee/DOM%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-DOM-Node%EC%99%80-Element%EC%9D%98-%EC%B0%A8%EC%9D%B4
https://webruden.tistory.com/634
ブラウザのレンダーパス。レンダーとは、開発者によって作成されたドキュメント(HTML、CSS、JavaScriptなど)…|by SeungwonGo|開発者の品格|Medium
How the browser renders a web page? — DOM, CSSOM, and Rendering | by Uday Hiwarale | JsPoint | Medium
DREAMコード:ブラウザ101:2で説明
Reference
この問題について(DOMとは?), 我々は、より多くの情報をここで見つけました https://velog.io/@effort_jk/DOM이란テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol