JavaScript WebAPI、DOM、イベント、操作要素例の詳しい説明

ウェブAPI

API : アプリケーション プログラミング インターフェイス。特定の機能を開発者が実装できるように、特定のソフトウェアによって開発者に公開されている定義済み関数のセットです。開発者はソース コードにアクセスしたり、内部の動作メカニズムの詳細を理解したりする必要はなく、使用方法を知るだけで済みます。

簡単に理解: API は、プログラマーが実行したい機能を簡単に実現できるようにするために提供されるツールです。

WebAPI : JavaScript言語でオブジェクトとしてカプセル化された、主にブラウザ向けのAPI。オブジェクトのプロパティやメソッドを呼び出すことでWeb APIを利用できる。

簡単に理解する：Web APIは、ブラウザの機能やページ要素を操作するためにブラウザが提供するAPI（BOMとDOM）のセットです。

DOM

ドキュメント オブジェクト モデルは、 W3C 組織によって推奨されている拡張マークアップ言語 (HTML または XML) を処理するための標準プログラミング インターフェイスです。

DOMツリー

DOM はHTML ドキュメントをツリーとして扱い、HTML ドキュメントをツリー (反転) 構造に処理します。ドキュメント内のタグ、属性、およびタグの内容はすべてノードです。

DOMツリーの最上部はドキュメントであり、BOMの最上部はウィンドウです。

• ドキュメント: ページはドキュメントとして扱われます
• 要素ページ内のすべてのタグ要素
• Web ページ内のすべてのコンテンツは、ドキュメント ツリー内のノード (要素ノード、属性ノード、テキスト ノード、コメント ノードなど) です。各ノードは、プロパティとメソッドを持つオブジェクトです。

DOM要素取得方法

ドキュメントオブジェクトのプロパティ

イベント

イベント: ユーザーがアクション (JavaScript で検出できる動作) を実行します。これは「トリガー応答」メカニズムであり、ページ インタラクションを実現する方法です。

イベントの 3 つの要素:

イベントソース: イベントをトリガーした人物 イベントタイプ: どのイベントがトリガーされたか イベントハンドラー: イベントがトリガーされた後に実行されるコード (関数形式)

イベントの利用手順

<本文>
  <button id="btn">クリック</button>
  <スクリプト>
    var btn = document.getElementById('btn') // ステップ 1: イベント ソースを取得する // ステップ 2: イベントを登録する btn.onclick
    btn.onclick = function () { // ステップ3: イベントハンドラーを追加する（関数割り当ての形式で）
        アラート('ポップアップ')
    }
  </スクリプト>
</本文>

イベント名 = 関数名 ([パラメータ])

注: ボタンを作成するには 2 つの方法があります。

<input type="button" value="ボタンの表示テキスト">
<button type="button">ボタンの表示テキスト</value>

イベントの種類

操作要素

操作要素の内容

DOM によって提供される属性は、要素コンテンツの操作メソッドを実装します。

• innerHTML (W3C) は HTML タグを識別します。使用時に文章のフォーマットとラベルスタイルは保持されます
• innerText (非標準) は HTML タグを認識しません。書式やタグを一切除いたプレーンテキスト
• textContentプロパティは、タグを削除した後もテキストの書式を保持します。

<本文>
    <div id="ボックス">
        最初の段落...
        <p>
            2番目の段落...
            <a href="#">3番目</a>
        </p>
    </div>
</本文>
<スクリプト>
    var ボックス = document.getElementById('ボックス')
    コンソールログ(ボックス内HTML)
    コンソールログ(ボックスの内側のテキスト)
    コンソールログ(ボックスのテキストコンテンツ)
</スクリプト>

操作要素の属性

DOM では、HTML 属性の操作とは、JavaScript を使用して要素の HTML 属性を操作することを指します。

• 要素: src、href など。
• 形式: id、alt、title など。

操作要素スタイル

①スタイル属性を操作する：要素オブジェクト.style.style属性名

スタイル属性名は CSS スタイル名に対応しますが、CSS スタイル名のハイフン「-」を削除し、ハイフンの後の英語の単語の最初の文字を大文字にする必要があります。

<本文>
    <div id="box"></div>
    <スクリプト>
        var ele = document.querySelector('#box'); // 要素オブジェクトを取得します ele.style.backgroundColor= 'red';
        ele.style.width = '100px';
        ele.style.height = '100px';
        ele.style.transform = 'rotate(7deg)';
    </スクリプト>
    <!-- 上記の 3 行のコードは、CSS に次のスタイルを追加することと同じです: -->
    <スタイル>
        ＃箱 {
            背景色: 赤;
            幅: 100ピクセル;
            高さ: 100px;
            変換: 回転(7度);
        }
    </スタイル>
</本文>

②className属性を操作する:要素object.className

• 開発中にスタイルの変更が多い場合は、クラス名を操作することで要素のスタイルを変更できます。
• className 属性の値にアクセスすると、要素のクラス名が取得され、className 属性に値を割り当てると、要素のクラス名が変更されます。
• classNameは要素のクラス名を変更し、元のクラス名を上書きします。
• 要素に複数のクラス名がある場合は、className でスペースで区切ります。

排他的な考え方

同じ要素セットがあり、特定の要素で特定のスタイルを実現したい場合は、循環排他的アイデア アルゴリズムを使用する必要があります。

• すべての要素のスタイルをクリアする（他の要素を削除する）
• 現在の要素のスタイルを設定します（お任せください）
• 順序を逆にすることはできないので注意してください。まず他の人を殺し、それから自分を準備します。

H5カスタム属性

カスタム属性の目的は、データを保存して使用することです。一部のデータはデータベースではなくページに保存できます

一部のカスタム属性は曖昧になりやすく、要素の組み込み属性なのかカスタム属性なのかを判断するのは簡単ではありません。 HTML5ではカスタム属性の新しい仕様が追加されました。HTML5では、カスタム属性は「データ属性名」で設定できることが規定されています。

プロパティ値を設定します:

①HTMLにカスタム属性を設定する

データ属性名='値'

// div 要素に data-index 属性を設定します <div data-index="2"></div>

②JavaScriptでカスタムプロパティを設定する

• 要素.setAttribute('属性', 値)
• element.dataset.attribute 名 = '値'

<div></div>
<スクリプト>
    var div = document.querySelector('div');
    div.dataset.index = '2';
     div.setAttribute('データ名', 'andy');
</スクリプト>

プロパティ値を取得します。

• 要素.getAttribute()
• 要素.データセット.プロパティ
• element.dataset['attribute'] (互換性の問題)

注:データセットは、データで始まるすべてのカスタム属性を格納するコレクションです。カスタム属性に複数のハイフン (-) が含まれている場合、取得時にキャメルケースの命名が使用されます。

<div getTime="20" データインデックス="2" データリスト名="アンディ"></div>
<スクリプト>
  var div = document.querySelector('div');
  console.log(div.getAttribute('data-index')); // 結果: 2
  console.log(div.getAttribute('data-list-name')); // 結果: andy
  // HTML5 でカスタム属性を取得するための新しいメソッド。取得できるのは「data-」で始まる属性のみです。 console.log(div.dataset); // DOMStringMap {index:"2",listName:"andy"}
  console.log(div.dataset.index); // 結果: 2
  console.log(div.dataset['index']); // 結果: 2
  console.log(div.dataset.listName); // 結果: andy
  console.log(div.dataset['listName']); // 結果: andy
</スクリプト>

プロパティ値を削除するには:

要素.removeAttribute('属性')

<div id="test" class="footer" ></div>
<スクリプト>
    var div = document.querySelector('div');   
    div.removeAttribute('id'); // div 要素の id 属性を削除します。 div.removeAttribute('class'); // div 要素の class 属性を削除します。</script>

具体的な操作要素のケースについては、次の記事を参照してください: JavaScript 操作要素のケース演習

要約する

これで、JavaScript WebAPI、DOM、イベント、操作要素に関するこの記事は終了です。より関連性の高いjs WebAPI、DOM、イベント、操作要素については、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。