クラスとIDによって要素内の要素を取得する-JavaScript

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

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

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

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

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

getElementById1つのノードのみを返しますgetElementsByClassNameが、ノードリストを返します。そのクラス名の要素は1つしかないため（私が知る限り）、最初の要素を取得できます（これ[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>

あなたはこのようにそれを行うことができます：

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("#foo .bar")[0].innerHTML = "Goodbye world!";

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

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

これが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!";
    }
}

再帰関数：

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);
        }
    }
}

これを行う最も簡単な方法は次のとおりです。

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}]`);
}

document.getElementByIDはクライアント側でのみ機能するため、IDが固定されているため、使用しないでください。以下の例のように、代わりにjqueryを使用する必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                                                                                             
<div id="foo">
   <div class="bar"> 
          Hello world!
     </div>
</div>

これを使って ：

$("[id^='foo']").find("[class^='bar']")

// do not forget to add script tags as above

削除したい操作があれば、 "。"を追加します。背後にあり、操作を行います