web-dev-qa-db-ja.com

クラスとIDで要素内の要素を取得-JavaScript

申し分なく、私は以前JavaScriptに手を出したことがありますが、私が書いた最も有用なものはCSSスタイルスイッチャーです。だから私はこれにやや新しいです。次のようなHTMLコードがあるとします。

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

「Hello world！」をどのように変更しますか「さよならの世界」へ？ document.getElementByClassとdocument.getElementByIdがどのように機能するかは知っていますが、より具体的になりたいと思います。これが以前に尋ねられた場合は申し訳ありません。

javascriptgetelementbyidgetelementsbyclassname
101
Tanner Babcock

さて、最初にgetElementByIdのような関数を使用して要素を選択する必要があります。

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementByIdは1つのノードのみを返しますが、getElementsByClassNameはノードリストを返します。そのクラス名を持つ要素は1つだけなので（私が知る限り）、最初の要素を取得できます（これが[0]の目的です。これは配列のようなものです）。

その後、.textContentを使用してhtmlを変更できます。

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>
185
Joseph Marikle

次のようにできます：

var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
    list[0].innerHTML = "Goodbye world!";
}

または、エラーチェックを減らして簡潔にしたい場合は、次のように1行で実行できます。

document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";

説明で：

  1. id="foo"で要素を取得します。
  2. 次に、class="bar"を持つオブジェクト内に含まれるオブジェクトを見つけます。
  3. それは配列のようなnodeListを返すので、そのnodeListの最初の項目を参照します
  4. その後、そのアイテムのinnerHTMLを設定して、その内容を変更できます。

警告：一部の古いブラウザはgetElementsByClassNameをサポートしていません（例：IEの古いバージョン）。その関数は、欠落している場合は所定の位置にシムできます。

これは、自分でブラウザの互換性を心配するのではなく、組み込みのCSS3セレクターサポートを備えたライブラリーを使用することをお勧めする場所です（他の人にすべての仕事をさせてください）。ライブラリだけでそれが必要な場合は、Sizzleが最適です。 Sizzleでは、これは次のように行われます。

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

jQueryにはSizzleライブラリが組み込まれており、jQueryでは次のようになります。

$("#foo .bar").html("Goodbye world!");
13
jfriend00

これがIE 7以下で機能する必要がある場合は、getElementsByClassNameがすべてのブラウザーに存在するわけではないことを覚えておく必要があります。このため、独自のgetElementsByClassNameを作成するか、これを試すことができます。

var fooDiv = document.getElementById("foo");

for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
    childNode = fooDiv.childNodes[i];
    if (/bar/.test(childNode.className)) {
        childNode.innerHTML = "Goodbye world!";
    }
}
4
John Hartsock

再帰関数：

function getElementInsideElement(baseElement, wantedElementID) {
    var elementToReturn;
    for (var i = 0; i < baseElement.childNodes.length; i++) {
        elementToReturn = baseElement.childNodes[i];
        if (elementToReturn.id == wantedElementID) {
            return elementToReturn;
        } else {
            return getElementInsideElement(elementToReturn, wantedElementID);
        }
    }
}
3
Avi Shimshilashvili

最も簡単な方法は次のとおりです。

function findChild(idOfElement, idOfChild){
  let element = document.getElementById(idOfElement);
  return element.querySelector('[id=' + idOfChild + ']');
}

またはより読みやすい：

findChild = (idOfElement, idOfChild) => {
    let element = document.getElementById(idOfElement);
    return element.querySelector(`[id=${idOfChild}]`);
}
3
Benjamin Werner