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

Question

さてさて、私は前にJavaScriptで手を出してきましたが、私が書いた最も有用なものは、CSSスタイル・スイッチャーです。だから私はこれに幾分新しいです。のは、私はこのようなHTMLコードを持っているとしましょう：

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

どのようにして変化するであろう「こんにちは、世界を！」 「さようなら！」 ？私はどのようにdocument.getElementByClassとのdocument.getElementByIdの仕事を知っているが、私はより具体的な取得したいと思います。申し訳ありませんがこれまでに尋ねられている場合。

Answer 1

さて、まずあなたがする必要がありますgetElementByIdのような機能を持つ要素を選択します。

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

getElementByIdつのみのノードを返すが、ノードリストをgetElementsByClassName返します。そのクラス名（私の知る限り）で一つだけの要素があるので、あなただけの最初のものを（それはそれがために、単にアレイのようなものだ[0]が何であるかだ）を取得することができます。

その後、あなたは.innerHTMLでHTMLを変更することができます。

targetDiv.innerHTML = "Goodbye world!"; 

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

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

Answer 2

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

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のシズルライブラリーを内蔵していとjQueryで、これは次のようになります：シズルでは、これは次のように行われることになる

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

Answer 3

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

Answer 4

あなただけのIDが固定されているクライアント側のコントロールのためにその作業ためのdocument.getElementByIdを使用してはなりません。代わりに以下の例のように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 

あなたがどんな操作はその後、ちょうど追加した削除編集をしたい場合背後や操作

Answer 5

再帰関数を実行します。そうするための最も簡単な方法がある

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

Answer 6

を：

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