1. ホーム
  2. javascript

[解決済み] クラスと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.getElementsByClassNamedocument.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>