DOM とは何かについて

ドム

DOM: ドキュメントオブジェクトモデル一般的な
ドキュメントオブジェクトアプリケーション
: JS を使用して HTML を操作する

ウィンドウ.ドキュメント

HTML コード全体はブラウザによって
Document という名前の JS オブジェクトに解析され、グローバル領域のウィンドウに保存されます。

    <script>
      // 整个HTML代码会被浏览器解析为JS对象
      // 这个对象的名字就是Document，储存在全局区的window里面
      console.log(window);
      console.log(window.document);
    </script>

ここに画像の説明を挿入
現在、ログによって出力される表示の美化されたスタイルを使用しています。

console.dir(window);
console.dir(window.document);

ここに画像の説明を挿入

DOM ツリー

DOM を学ぶ前に、DOM ツリー HTML のタグ分解を知る必要があります。これを use で表現すると、レイヤーごとにネストされ、レイヤーごとにプログレッシブになります。この分解はツリーに似ています。
ここに画像の説明を挿入

DOMツリー制御図

<!DOCTYPE html>
<html lang="en">
  <body>
    <div>
      <h1>text1</h1>
      <h2>text2</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>2</li>
        <li>
          <em>01</em>
          <em>02</em>
          <em>03</em>
        </li>
      </ul>
      <script></script>
    </div>
  </body>
</html>

DOM操作:
ここに画像の説明を挿入
ドキュメントオブジェクトを操作してページのコンテンツを変更する
DOM 操作は 2 つのカテゴリに分けられます: 操作対象の要素 + 操作対象の要素の属性を検索し、それに
項目を追加する必要があります。 id=box の要素

<!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 id="box">

  </div>
  <script>
    box.innerHTML="hello DOM ！"
  </script>
</body>
</html>

ここに画像の説明を挿入
JS にはボックスがないのに、エラーを報告せずに使用できるのはなぜですか?
id: 固有の識別子: JS で変数を記述するとき、JS に何もない場合は ID を検索するため、
通常はこのプロパティを確認して再度使用します
。

<body>
  <div id="box"></div>
  <script>
    // get:获取
    // element:元素
    // id：唯一标识
    var box = document.getElementById("box");
    console.dir(box);
    console.log(box);
  </script>
</body>

印刷してみると、実はとても大きなオブジェクトであることがわかります。
ここに画像の説明を挿入
詳細に印刷してみるとわかります。

次に、色を変更して

結果を試してみましょう。

誰もがこう言います。「このように変更すると、これはこうなる」 CSS を直接記述する方が良いです。実際、それらの間には何か他のものがあります - 彼は動的です

DOM イベント

イベント操作: イベント終了後、ユーザーによるページ操作が可能になります
例えば、をクリックした後に色を変えるクリックイベントを追加する
ので、このように記述できます

<body>
  <div id="box" onclick="color()">master</div>
  <script>
    var box = document.getElementById("box");
    function color() {
      
      
      box.style.color = "red";
    }
  </script>
</body>

もちろん、コールバック関数の監視を通じて実装することもできます。

<body>
  <div id="box">master</div>
  <script>
    var box = document.getElementById("box");
    box.onclick = function color() {
    
    
      box.style.color = "red";
    };
  </script>
</body>

クリック前
ここに画像の説明を挿入
クリック後:

タグで物件を探す

要件: リストをクリックして色を変更します。
取得: 要素の取得
: 要素の取得
方法: 経由
タグ: ラベル
名前: 名前

ドム

ウィンドウ.ドキュメント

DOM ツリー

DOMツリー制御図

DOM イベント

タグで物件を探す

おすすめ