[解決済み】JavaScriptでクラスごとに要素を取得する方法は?
2022-04-05 06:06:50
質問
html要素内の内容を置換したいので、以下の関数を使用しています。
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
ReplaceContentInContainer('box','This is the replacement text');
<div id='box'></div>
上記はうまくいくのですが、問題は、1つのページに複数のhtml要素があり、その内容を置き換えたい場合です。そのため、IDを使用することはできませんが、代わりにクラスを使用することができます。javascriptは、クラスによる要素の取得機能をサポートしていないと言われました。そこで、上記のコードをどのように修正すれば、idの代わりにclassで動作するようになるのでしょうか?
追伸:このためにjQueryを使いたくありません。
どのように解決するのですか?
このコードはすべてのブラウザで動作するはずです。
function replaceContentInContainer(matchClass, content) {
var elems = document.getElementsByTagName('*'), i;
for (i in elems) {
if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
> -1) {
elems[i].innerHTML = content;
}
}
}
その仕組みは、ドキュメント内のすべての要素をループし、そのクラスリストにある
matchClass
. 一致するものがあれば、その内容が置き換えられます。
関連
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み】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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】XMLHttpRequestモジュールが定義されていない/見つからない
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み】react router v^4.0.0 Uncaught TypeError: 未定義のプロパティ'location'を読み取れない
-
[解決済み] Uncaught (in promise) TypeError: フェッチに失敗してCorsエラー
-
[解決済み] クラス名で要素を取得するには?重複