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 構文の簡単な分析

推薦する

Tomcat の設定と Eclipse での起動方法

目次Tomcat8のインストールと設定方法tomcat ダウンロードTomcat マネージャーを有効...

Linux デバイス用ネットワーク ドライバーの紹介

有線ネットワーク: イーサネット 無線ネットワーク: 4G、WiFi、Bluetooth、5G 概要...

大量のデータをMySQLにインポートする際に発生する問題と解決策の分析

プロジェクトでは、SQL を使用してデータ分析を実行するために、大量のデータをデータベースにインポー...

MySQL 5.7.21 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.21のインストールに関する注意事項をまとめ、皆さんと共有します。 ...

Vue で動的パラメータと計算プロパティを使用する方法

1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ...

VUEのデータプロキシとイベントの詳細な説明

目次Object.defineProperty メソッドのレビューデータブローカーとは何ですか? V...

Docker 環境で JMeter+Grafana+influxdb ビジュアル パフォーマンス監視プラットフォームを構築するチュートリアル

目次1. Dockerをインストールする2. influxDBをインストールして設定する3. Gra...

フォーム送信の更新ページはソースコード設計にジャンプしません

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

VMware Esxi のルート パスワードを忘れた後に正常に取得する方法

CentOS6 インストール ディスク (任意のバージョン) を準備するか、別の pnux インスト...

CSS でフローティングにより親要素の高さが崩れる問題を解決するいくつかの方法

以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の...

HTML タグ tbody の使い方と説明

tbody 要素は、thead 要素および tfoot 要素と組み合わせて使用​​する必要があります...

Node.js のフロントエンドとバックエンドのインタラクションによるユーザーログインの実装の実践

目次1. プロジェクト要件次にコーディングを始める1. フロントエンドページを作成する(CSSスタイ...

ネイティブJSは非常に見栄えの良いカウンターを実装します

今日は、ネイティブ JS で実装された見栄えの良いカウンターを紹介します。効果は次のとおりです。 以...

Nodejs で WeChat アカウント分割を実装するためのサンプルコード

会社のビジネスシナリオでは、WeChat アカウント分割機能を使用する必要があります。公式 Web ...

Mysql 更新マルチテーブル共同更新方法の概要

次に、2 つのテーブルを作成し、一連の SQL 文を実行します。SQL 文の実行後にテーブル内のデー...