DOM
😝 今日のテーマDOM
まず、JavaScriptの立場でHTMLはどう見えますか?
意味のない文字列に見えるのではないでしょうか.
では、どんな仕事ができますか??
文字列のメソッドslice、substr、length...
だからね.HTMLをJavaScriptで理解できる資料型に変換する必要があります!
DOM(Document Object Model)!! 簡単に言えば、HTMLなどの文字列だけのドキュメントをJavaScriptで理解できるオブジェクトに変換!このプロセスをPARSEと呼ぶ.
では、どんな相手に変えますか.対象にもいろいろな種類が…
ノード対象!それぞれの要素をNodeと考えるのは簡単でしょうか?
ノードオブジェクト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="node">
<div>안녕 나는 요소야</div>
<button>클릭</button>
<div>
<div>하하하</div>
호호호
</div>
</div>
</body>
</html>
JavaScriptそのHTMLを操作するにはどうすればいいですか?
classまたはidおよび要素名でdocumentを表します.querySelectorで要素を指定します.
誰がその方法を提供しますか?DOM.const node = document.querySelector('.node')はこのように特定化する、node.nodeType // 1 node.nodeName // divすなわち,我々が選択したノードタイプは1であり,名前はdivである.node.parentNodeはbodynode.parentNode.childNodesはNodeList(7) [text, div.node, text, comment, text, script, text]
これに加えて、DOMは、ノードオブジェクトに変換し、それらの関係または属性を操作する方法またはpropertyを提供します.JavaScriptを理解させる責任を負う!
ノードの対象にもいろいろな種類があります!たくさん言います.
-Document Nodes
-Element Nodes
などなど.
これは後で処理しましょう.
いずれにしても、DOMは再びHTMLをNodeオブジェクトに変換し、JavaScriptが理解できるようにします!
DOMはブラウザに表示されますか?
いいえ.ブラウザビューポートには、レンダリングツリー、DOM、CSSOMの組み合わせが表示されます.
CSSOMは大まかな感じがします.CSSも文字列なので、それを変えたはずです.
だからどうして見えないの.
HTMLでp Element display: noneを使うと消えてしまうのでしょうか?
画面から消えるはずですが、まだあるのではないでしょうか.だから見えない!
p Elementに名前を付けて呼ぶと出てくるでしょう?
要約の整理
DOMはHTMLドキュメントのインタフェースです.まず、ビューポートで何をレンダリングするかを決定します.
2つ目の方法は、JavaScriptプログラムを使用してページの内容と構造、スタイルを変更することです.
DOMは元のHTMLドキュメントの形式に似ていますが、いくつかの違いがあります.
常に有効なHTML形式.
JavaScriptで変更できる動的モデルである必要があります.
仮想要素は含まれません.(Ex.::after)
非表示要素が含まれます.(Ex. display: none)
関連項目:
https://wit.nts-corp.com/2019/02/14/5522
https://www.youtube.com/watch?v=CFgXIJ3RZ50
✍🏻🙆🏻♂️
Reference
この問題について(DOM), 我々は、より多くの情報をここで見つけました
https://velog.io/@make_w/DOM
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="node">
<div>안녕 나는 요소야</div>
<button>클릭</button>
<div>
<div>하하하</div>
호호호
</div>
</div>
</body>
</html>Reference
この問題について(DOM), 我々は、より多くの情報をここで見つけました https://velog.io/@make_w/DOMテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol