[解決済み] クラスとIDで要素の中の要素を取得する - JavaScript
2022-05-02 13:38:45
質問
さて、私は以前JavaScriptに手を出したことがありますが、最も有用なのはCSSスタイルスイッチャーを書いたことです。だから、私はこのことについて多少新しいです。例えば、こんなHTMLコードがあったとしよう。
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>
をどのように変更すればよいのでしょうか?
Hello world!
を
Goodbye world!
?
私はどのように知っている
document.getElementsByClassName
と
document.getElementById
が動作するのですが、もっと具体的に知りたいのです。以前にも質問されていたらすみません。
どのように解決するのですか?
さて、まず要素を選択するには、以下のような関数が必要です。
getElementById
.
var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
getElementById
は1つのノードを返すだけですが
getElementsByClassName
はノードリストを返します。 そのクラス名を持つ要素は(私が知る限り)ひとつしかないので、最初のものを取得すればいいのです(それが
[0]
は、ちょうど配列のようなものです)。
そして、htmlを
.textContent
.
targetDiv.textContent = "Goodbye world!";
var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>
関連
-
JavaScriptのStringに関する共通メソッド
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] ループ内のJavaScriptクロージャ - シンプルな実用例
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vueが定義するプライベートフィルタと基本的な使い方
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
[解決済み】JavaScriptで親の子要素を探す