ウェブAPIAPI : アプリケーション プログラミング インターフェイス。特定の機能を開発者が実装できるように、特定のソフトウェアによって開発者に公開されている定義済み関数のセットです。開発者はソース コードにアクセスしたり、内部の動作メカニズムの詳細を理解したりする必要はなく、使用方法を知るだけで済みます。 簡単に理解: API は、プログラマーが実行したい機能を簡単に実現できるようにするために提供されるツールです。 WebAPI : JavaScript言語でオブジェクトとしてカプセル化された、主にブラウザ向けのAPI。オブジェクトのプロパティやメソッドを呼び出すことでWeb APIを利用できる。 簡単に理解する:Web APIは、ブラウザの機能やページ要素を操作するためにブラウザが提供するAPI(BOMとDOM)のセットです。 DOMドキュメント オブジェクト モデルは、 W3C 組織によって推奨されている拡張マークアップ言語 (HTML または XML) を処理するための標準プログラミング インターフェイスです。 DOMツリーDOM はHTML ドキュメントをツリーとして扱い、HTML ドキュメントをツリー (反転) 構造に処理します。ドキュメント内のタグ、属性、およびタグの内容はすべてノードです。 DOMツリーの最上部はドキュメントであり、BOMの最上部はウィンドウです。
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 によって提供される属性は、要素コンテンツの操作メソッドを実装します。
<本文> <div id="ボックス"> 最初の段落... <p> 2番目の段落... <a href="#">3番目</a> </p> </div> </本文> <スクリプト> var ボックス = document.getElementById('ボックス') コンソールログ(ボックス内HTML) コンソールログ(ボックスの内側のテキスト) コンソールログ(ボックスのテキストコンテンツ) </スクリプト> 操作要素の属性DOM では、HTML 属性の操作とは、JavaScript を使用して要素の HTML 属性を操作することを指します。
操作要素スタイル①スタイル属性を操作する:要素オブジェクト.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
排他的な考え方同じ要素セットがあり、特定の要素で特定のスタイルを実現したい場合は、循環排他的アイデア アルゴリズムを使用する必要があります。
H5カスタム属性カスタム属性の目的は、データを保存して使用することです。一部のデータはデータベースではなくページに保存できます 一部のカスタム属性は曖昧になりやすく、要素の組み込み属性なのかカスタム属性なのかを判断するのは簡単ではありません。 HTML5ではカスタム属性の新しい仕様が追加されました。HTML5では、カスタム属性は「データ属性名」で設定できることが規定されています。 プロパティ値を設定します: ①HTMLにカスタム属性を設定する データ属性名='値' // div 要素に data-index 属性を設定します <div data-index="2"></div> ②JavaScriptでカスタムプロパティを設定する
<div></div> <スクリプト> var div = document.querySelector('div'); div.dataset.index = '2'; div.setAttribute('データ名', 'andy'); </スクリプト> プロパティ値を取得します。
注:データセットは、データで始まるすべてのカスタム属性を格納するコレクションです。カスタム属性に複数のハイフン (-) が含まれている場合、取得時にキャメルケースの命名が使用されます。 <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をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu 18.04 では、すべてのサードパーティ製 Python パッケージのワンクリック アップグレードと Python パッケージのインストールが可能になりました。
目次Tomcat8のインストールと設定方法tomcat ダウンロードTomcat マネージャーを有効...
有線ネットワーク: イーサネット 無線ネットワーク: 4G、WiFi、Bluetooth、5G 概要...
プロジェクトでは、SQL を使用してデータ分析を実行するために、大量のデータをデータベースにインポー...
この記事では、MySQL 5.7.21のインストールに関する注意事項をまとめ、皆さんと共有します。 ...
1. 動的パラメータ2.6.0 以降では、角括弧で囲まれた JavaScript 式をディレクティブ...
目次Object.defineProperty メソッドのレビューデータブローカーとは何ですか? V...
目次1. Dockerをインストールする2. influxDBをインストールして設定する3. Gra...
1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
CentOS6 インストール ディスク (任意のバージョン) を準備するか、別の pnux インスト...
以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の...
tbody 要素は、thead 要素および tfoot 要素と組み合わせて使用する必要があります...
目次1. プロジェクト要件次にコーディングを始める1. フロントエンドページを作成する(CSSスタイ...
今日は、ネイティブ JS で実装された見栄えの良いカウンターを紹介します。効果は次のとおりです。 以...
会社のビジネスシナリオでは、WeChat アカウント分割機能を使用する必要があります。公式 Web ...
次に、2 つのテーブルを作成し、一連の SQL 文を実行します。SQL 文の実行後にテーブル内のデー...