[Webプログラミングベース]JSドキュメントオブジェクトモデル

17944 ワード
CSS JavaScript html テキストリンク

1.文書オブジェクトモデルの基本用語

  • 文書オブジェクトモデル(DOM):WebブラウザがHTMLページを識別する;WebブラウザがHTMLファイル
    • を分析し表示する
  • ドキュメントオブジェクトは、タグ(または要素)をJavaScriptで使用可能なオブジェクト
    • にする.
    アクション
  • ドキュメントオブジェクト=アクションタグ.
    • 要素ノード<h1>タグ、<script>タグなどの要素を生成するノード
    テキストノード
    画面に出力される文字列
    静的作成
    Webページの最初の実行時にHTMLタグのドキュメントオブジェクトを生成します.
    動的作成
    Webページの実行時にJavaScriptを使用してドキュメントオブジェクトを作成する

    2.ドキュメントオブジェクトを実行順で使用中にエラーが発生しました

    <!DOCTYPE html>
<html lang="en">
<head>
    ...
    <script>
        document.querySelector('h2').style.color='red';
    </script>
</head>
<body>
    <h1>h1 첫 번째</h1>    
    <h2>h2 두 번째</h2>
</body>
</html>
    Web実行は上から下へ実行されるため、スクリプトタグを読み込む際にh 1とh 2タグが生成されず、エラーが発生します.
    解決策1)scriptタグの位置を移動する.
    <body>
    <h1>h1 첫 번째</h1>    
    <h2>h2 두 번째</h2>
    <script>
        document.querySelector('h2').style.color='red';
    </script>
</body>
    解決策2)利用イベント
    onload(メソッド/匿名関数):Webブラウザのすべてのコンテンツを読み、実行します.
        <script>
        window.onload=function(){
        document.querySelector('h2').style.color='red';
        };
    </script>

    3.文書オブジェクトの選択


    document
  • オブジェクト
    • 最上位htmlを含む
  • 、すなわち、文書全体を表すオブジェクト
    • 文書オブジェクトの選択
    既存のHTMLタグをJavaScriptからドキュメントオブジェクトに変換
    つまり、JavaScriptを使用して、実行時に内部文字を変更したり、スタイルを変更したりすることができます.
    ドキュメントの区切り方法を選択します.documentとしてgetElementById(アイデンティティー)IDを選択します.querySelector(選択者)複数選択ドキュメントを選択します.getElementsByName(名前)nameプロパティを使用して、複数のドキュメントを選択します.getElementsByClassName(クラス)classプロパティ複数選択ドキュメント.querySelector All(選択者)選択者として複数選択
    例1)getElementById()メソッドを使用してドキュメントオブジェクトを選択
    <head>
	...
    <script>
        window.onload=function(){
        document.getElementById('header').style.color='red';
        };
    </script>
</head>
<body>
    <h1 id="header">header</h1>    
</body>

    例2)querySelector()メソッドを使用してドキュメントオブジェクトを選択
    <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>
    <script>
        window.onload=function(){
        document.querySelector('h1').style.color='blue';
        };
    </script>
</head>
<body>
    <h1 id="header">header</h1>    
</body>
    例3)querySelector All()メソッドを使用して複数のドキュメントオブジェクトを選択
    ドキュメントオブジェクトは配列で返されます
    <head>
     ...
    <script>
        window.onload=function(){
            var headers = document.querySelectorAll('h1')
            for (var i =0;i<headers.length;i++)
                headers[i].style.color='green'

        };
    </script>
</head>
<body>
    <h1>header</h1>    
    <h1>header</h1>    
    <h1>header</h1>    
</body>

    4.文書オブジェクトの操作


    字をつくる
    属性説明テキスト内容ドキュメントオブジェクトのテキストが、内部HTMLドキュメントオブジェクトのテキストのHTMLタグを反映するために純粋なテキスト形式でインポートされるように変更されました.
    操作スタイル
    Javaスクリプトを使用したCSS属性値の追加/削除/変更
    スタイルシートのスタイルプロパティJavaScriptのスタイル識別子back-imagebackgroundImageback-icolorbackgroundColorbox sizingboxSizinglist-style
    操作のプロパティ
    メソッド説明setAttribute(属性名、属性値)属性指定getAttribute(属性名)属性抽出
    [JPA]持続性管理-持続性コンテキスト
    Visual StudioコードでPython 3のvenvを使用