序文: 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...
目次chmod例権限に関する特別な注意分析するチョーンchgrp umask Linux オペレーテ...
W3C では、さまざまなタグの規定を設定するだけでなく、Web ページの作成者が実際に W3C 規...
メインのオペレーティング システムを Windows から Ubuntu に切り替えたとき、最初に考...
この記事では、シンプルな画像カルーセル効果を実現するためのJSの具体的なコードを参考までに紹介します...
Vueは宮殿グリッド回転抽選(CrossFireのxx転生に似ている)を実装しています。参考までに、...
目次1. 関連するbinlog設定2. binlogに関する詳細設定2.1 バイナリログモードの変更...
JavaScript では、要素の removeAttribute() メソッドを使用して、指定され...
背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...
Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...
まとめDocker-compose は複数の Docker コンテナ サービスを簡単に組み合わせるこ...
1. 背景1. フロントエンドはvue + vuex + socket.io-clientを使用しま...
この記事はCentOS 7.3システム環境をベースに、MySQLとRedisのインストールと使用につ...
目次1. 組み込みオブジェクトの紹介1.1 数学オブジェクト1.2 数学における方法1.3 日付オブ...
サーバーとデータベースの構築方法を学ぶ必要があるため、最近は SQL 言語を独学で学び始めました。デ...