DOM

5214 ワード
WIL テキストリンク

😝 今日のテーマ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
✍🏻🙆🏻‍♂️
[プログラマ]文字列のpとyの個数
テストコード-ワード変換の準備