ウェブ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 パッケージのインストールが可能になりました。
序文:データベースのバックアップの重要性は、特にデータの損失が深刻な結果を招く可能性がある実稼働環境...
前面に書かれた最近、Mycat で特別なトピックを書いています。最近、多くの友人が面接に出かけている...
この記事の例では、カスタムスクロールバーコンポーネントを実装するためのjsの具体的なコードを参考まで...
組合執行分析を簡単にするために、次のSQLを例として使用します。 テーブル t1 を作成します ( ...
目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...
目次導入説明名前の競合私有財産要約する導入シンボル変数を作成する最も簡単な方法は、Symbol() ...
目次1. ソート機能2. データベースを準備する3. データベースに関連するエンティティクラスの構築...
学習プロセス中にプッシュ イメージが常にタイムアウトすることがわかったため、Alibaba Clou...
この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...
仮想マシン内の Ubuntu がネットワークに接続できない場合の効果的な解決策: 1. Ubuntu...
SSH の正式名称は Secure SHell です。 SSH を使用すると、送信されるすべてのデ...
この記事を読む前に、Volumes について予備知識を身に付けておいてください。詳細については、こち...
インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...
この記事では、参考までに、centOSにmysql5.7をインストールする詳細な手順を紹介します。具...
JS はホバー ドロップダウン メニューを実装します。これは、フロントエンドの面接で遭遇するシナリ...