序文: Web ページが読み込まれると、ブラウザはそのページの 1. JavaScriptはページ内のすべてのHTML要素を変更できる1. IDでHTML要素を検索する特定のHTMLタグを見つけて変更する <本文> <div calss="001">私は誰なのか</div> <スクリプト> var x = document.getElementById("001"); x.innerHTML = "私は困難を恐れない勇敢な雄牛です"; </スクリプト> </本文> <本文> <p id="intro">こんにちは、Niu Niu!</p> <p>この例では、<b>getElementById</b> メソッドを示します。</p> <スクリプト> x = document.getElementById("イントロ"); document.write("<p>ID intro の段落からのテキスト: " + x.innerHTML + "</p>"); </スクリプト> </本文> 2. タグ名でHTML要素を検索するvar x = document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('id="main"要素の最初の段落は:' + y[0].innerHTML);
// 最初の書き方 var x = document.getElementById("main"); var y = x.getElementsByTagName("p")[0]; //HTML 内のすべての p タグを検索し、最初のタグの内容を置き換えます var y = document.getElementsByTagName("p"); y[0].innerHTML = "困難を恐れない勇敢な雄牛" <スクリプト> var x = document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('id="main"要素の最初の段落は:' + y[0].innerHTML); </スクリプト> 3. クラス名でHTML要素を検索する<本文> <p class="intro">こんにちは、Niu Niu!</p> <p>この例では、<b>getElementsByClassName</b> メソッドを示します。</p> <スクリプト> x = document.getElementsByClassName("intro"); document.write("<p>クラスの紹介段落からのテキスト: " + x[0].innerHTML + "</p>"); </スクリプト> </本文> このようなタグの要素コンテンツを変更します。 <本文> <p class="intro">こんにちは、Niu Niu!</p> <p>この例では、<b>getElementsByClassName</b> メソッドを示します。</p> <スクリプト> ドキュメントの要素をクラス名で取得します。 x.innerHTML = "タグコンテンツを変更する"; // document.write("<p>クラスの紹介段落からのテキスト: " + x[0].innerHTML + "</p>"); </スクリプト> </本文> 4. JavaScriptはページ内のすべてのHTML属性を変更することができますHTML 要素の属性を変更するには、次の構文を使用します。 document.getElementById(id).attribute=新しい属性値 <img id="image" src="smiley.gif" width="160" height="120"> <スクリプト> document.getElementById("画像").src="landscape.jpg"; </スクリプト> <p>元の画像は smiley.gif ですが、スクリプトによって landscape.jpg に変更されます。</p> 5. JavaScriptはページ上のすべてのCSSスタイルを変更できます
HTML 要素のスタイルを変更するには、次の構文を使用します。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>タイトル</title> </head> <本文> <p id="p1">こんにちは世界!</p> <p id="p2">こんにちは世界!</p> <スクリプト> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="大きい"; </スクリプト> <p>上記の段落はスクリプトによって変更されています。 </p> </本文> </html> 6. JavaScriptはページ上のすべてのイベントに応答できるイベントをディスパッチする HTML DOM:
<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> </head> <本文> <p>ボタンをクリックすると、<em>displayDate()</em> 関数が実行されます。 </p> <button id="myBtn">クリックしてください</button> <スクリプト> document.getElementById("myBtn").onclick=関数(){ 表示日付()}; 関数 displayDate() { document.getElementById("demo").innerHTML=日付(); } </スクリプト> <p id="デモ"></p> </本文> </html> 次のように: onmouseover イベントと onmouseout イベントを使用すると、マウス ポインターが要素に移動したり要素から離れたりしたときに関数をトリガーできます。 <!DOCTYPE html> <html><head> <メタ文字セット="utf-8"> </head> <本文> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">マウスオーバー</div> <スクリプト> 関数 mOver(obj) { obj.innerHTML="ありがとう" } 関数 mOut(obj) { obj.innerHTML="マウスオーバー" } </スクリプト> </本文> </html> JavaScript ドキュメント オブジェクト モデル DOM に関するこの記事はこれで終わりです。JavaScript ドキュメント オブジェクト モデルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
元のコードは次のとおりです。 <div class='コントロールグループ'&...
目次導入クロージャの使用カレー作りパブリック変数の実装キャッシュカプセル化(属性のプライベート化)閉...
グローバル ID を生成する方法は多数あります。ここでは簡単な解決策を紹介します。MySQL の自動...
Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...
背景: 最近、資産報告関連の機能に取り組んでおり、中国語入力をサポートする必要があります。通常のショ...
テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...
目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...
序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...
1. 動的コンポーネント <!DOCTYPE html> <html> &l...
目次背景1. 思考分析2. ページ構成2.1 HTML レイヤー2.2 CSS レイヤー2.3 JS...
目次プラン依存関係をインストールする依存関係の導入pxをremに変換するFlexible.jsを変更...
nginx は弊社で最もよく使用されるサーバーで、コンテンツ配信やリバース プロキシによく使用されま...
1. サーバー ホストをクリックし、右側の操作リストで [仮想スイッチ管理] をクリックして、仮想...
随分前に「Patterns for Sign Up & Ramp Up」を読み終えました。今...
目次1. はじめに2. 使用方法ステートレスコンポーネントステートフルコンポーネント制御コンポーネン...