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

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

ウェブAPI

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

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

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

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

DOM

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

DOMツリー

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

4Mg==、サイズ_16、カラー_FFFFFF、t_70)

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

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

DOM要素取得方法

入手方法使用法戻り値
IDで取得ドキュメントの要素IDを取得します。指定された ID を持つ要素オブジェクトを返します。見つからない場合は null を返します。ID が複数ある場合は undefined を返します。
タグ名によるとdocument.getElementsByTagName('タグ名')返されるのは、指定されたタグの動的なコレクションです。これは配列のようなオブジェクト、疑似配列ですが、配列ではありません。添え字インデックスでアクセスできる
名前で取得document.getElementByName('name 属性値')指定された名前の要素オブジェクトのコレクションを返します
ClassName で取得 (HTML5 の新機能) document.getElementByClassName('クラス属性値')指定されたクラス名の要素オブジェクトのコレクションを返します
セレクターで取得 (新規) document.querySelector('セレクタ')指定されたセレクタ要素を取得し、指定されたセレクタの最初の要素のみを返すことができます。
セレクターで取得 (新規) document.querySelectorAll('セレクタ')指定されたセレクタ要素を取得し、要素のコレクションを返します。

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

方法効果
文書本体ドキュメントのbody要素を返します
ドキュメントタイトルページのタイトルを示すドキュメントのタイトル要素を返します。
ドキュメント.documentElementドキュメントのHTML要素、つまりHTMLページのすべての情報を返します(これにより、ドキュメントのすべての要素を文字列に入れて、他の人が読み取って分析できるようになります)。
ドキュメント.fromsドキュメント内のすべてのFromオブジェクトへの参照を複数形で返します。複数の形式を返すこともできます。
ドキュメント.画像上記と同様に、ドキュメント内のすべての画像オブジェクトを返します。

イベント

イベント: ユーザーがアクション (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をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明
  • JavaScript 操作要素の例
  • jsは2つのjson配列を操作して、マージ、重複の削除、特定の要素の削除を行います。
  • vue.jsのクリックイベントは現在の要素オブジェクトの操作を取得します
  • JavaScript HTML DOM要素(ノード)の追加、編集、削除操作例の分析
  • JS ドキュメント フォーム フォーム要素操作の完全な例
  • JavaScript操作要素の共通メソッドのまとめ
  • JavaScript操作要素は、ページコンテンツのスタイルを変更する方法を教えます

<<:  Ubuntu 18.04 では、すべてのサードパーティ製 Python パッケージのワンクリック アップグレードと Python パッケージのインストールが可能になりました。

>>:  MySQL PHP 構文の簡単な分析

推薦する

MySQL バックアップ スクリプトの書き方

序文:データベースのバックアップの重要性は、特にデータの損失が深刻な結果を招く可能性がある実稼働環境...

MySQL マスタースレーブレプリケーションの原理と注意点

前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...

ネイティブ js はカスタム スクロール バー コンポーネントを実装します

この記事の例では、カスタムスクロールバーコンポーネントを実装するためのjsの具体的なコードを参考まで...

MySQLが内部一時テーブルを使用するタイミングについて簡単に説明します。

組合執行分析を簡単にするために、次のSQLを例として使用します。 テーブル t1 を作成します ( ...

Vue の計算プロパティ

目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...

JavaScript プリミティブデータ型シンボルの詳細な説明

目次導入説明名前の競合私有財産要約する導入シンボル変数を作成する最も簡単な方法は、Symbol() ...

MySQL 実践演習 シンプルなライブラリ管理システム

目次1. ソート機能2. データベースを準備する3. データベースに関連するエンティティクラスの構築...

Docker イメージの作成、アップロード、プル、およびデプロイ操作 (Alibaba Cloud を使用)

学習プロセス中にプッシュ イメージが常にタイムアウトすることがわかったため、Alibaba Clou...

Vueドロップダウンメニューのコンポーネント開発の詳細説明

この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...

Ubuntuがネットワークに接続できない場合の解決策

仮想マシン内の Ubuntu がネットワークに接続できない場合の効果的な解決策: 1. Ubuntu...

WindowsにOpenSSHをインストールし、SSHキーを生成してLinuxサーバーにログインします。

SSH の正式名称は Secure SHell です。 SSH を使用すると、送信されるすべてのデ...

Dockerデータストレージのバインドマウントの詳細な説明

この記事を読む前に、Volumes について予備知識を身に付けておいてください。詳細については、こち...

実用的なクイックスタートReactルーティング開発

インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...

CentOS インストール mysql5.7 詳細チュートリアル

この記事では、参考までに、centOSにmysql5.7をインストールする詳細な手順を紹介します。具...

ホバードロップダウンメニューを実装するためのネイティブJS

JS はホバー ドロップダウン メニューを実装します。これは、フロントエンドの面接で遭遇するシナリ...