JavaScriptでクラス内のクラスを取得する

Question

こんにちは、これは私の最初の質問です。私は素人開発者ですので、前もって私を許してください。私は価値クラスのこの特定のインスタンスを取得しようとしています。私が取り組んでいるウェブサイトには、価値クラスに関連する数百の異なる価値があります。

<li class = "vin"> 
    <strong class = "title">VIN:</strong> 
    <span class="value">121212121212121212</span> 
</li> 

以下は私がやってきたことであり、それは機能していません。

var vinNum = document.getElementsByClassName('li.vin','span.value'); 
console.log(vinNum.innerText); 

Answer 1

既存の答えはすでにこれを行うには、「現代」の道をカバーしますが - あなたはすべての（... getElementsByのほとんどを使用することができ、私は思う - つもりはgetElementByIdを除い言ったが、それが理由で、単数形で命名されました、およびidの意味のために特別な）すべての要素のメソッド。

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName：

Element.getElementsByClassName()メソッドは、指定されたクラス名のすべてを持っているすべての子要素を含むライブHTMLCollectionを返します。ドキュメントオブジェクトに対して呼び出されると、ルートノードを含む完全なドキュメントが検索されます。

このように2回使用すると、ある特定のクラスを持つ要素を最初に選択し、別のクラスを「その中に」、前者の子孫の中から選択することができます。 （）のいずれか1つ以上の要素が存在する場合（ない「子要素は」引用MDNの参照が誤ってそれを置くよう。）

var vinNumContainer = document.getElementsByClassName('vin')[0], 
    vinNumElement = vinNumContainer.getElementsByClassName('value')[0]; 

（要素が存在するかどうかのために必要なチェックをそれらにアクセスする前に、何をすべきか簡潔さのために除外されました;-)

しかし、querySelectorへの簡単な呼び出しは、もちろんそれを行うより速い方法です。

Answer 2

ではなく、クラスによって選択するよりも、あなたは子としてspan.valueを持ってli.vin要素を選択しているので、これは動作します

var vinNum = document.querySelector('li.vin span.value'); 
console.log(vinNum.innerText); 

を試していただき、ありがとうございます。 vinNumberはノード要素になりました。 vinNum.innerTextを呼び出すときに正しい番号を取得する必要があります。例でconsole.log（vinNum）を実行すると、未定義または不正な要素が表示される可能性が高くなります。

Answer 3

CSSセレクタを使用して選択できるクラス、ID、またはその他の要素に基づいてページ上の要素を検索するには、document.querySelector関数を使用できます。 MozillaのCSS Selector referenceを使用して

、我々はCSSのセレクタの構文は、いくつかの他の要素の直接の子である要素を選択することがわかりますAが親に一致するセレクタで、Bが子供に一致するセレクタであり、A > Bです。

だから、これを行うための一つの方法は、使用することです。

var vinNum = document.querySelector('li.vin > span.value') 

上記ワンライナーは、クラスvinのli要素の子であるクラスvalueの最初のspan要素にマッチします。あなたは、複数のこのような構造の例（その内のクラスvalueのspanを持つクラスvinのli）を持っている場合

しかし、このセレクタを使用すると、動作しません。実際、クラスvalueの個々のスパンに個別にアクセスしたい場合は、おそらく最も良い方法はadd a unique id attribute to each of themです。

あなたの構造はこのように見えた場合：あなたはすべて同じ構造を持つネストされたHTML要素のリストを持っているときのため

var vinNum = document.querySelector('#v25') 

最後の一つの代替：あなたは、次を使用することができ

<li class = "vin"> 
    <strong class = "title">VIN:</strong> 
    <span class="value" id="v25">121212121212121212</span> 
</li> 

document.querySelectorAllを使用すると、クエリに一致するすべてのDOMノードが返され、JavaScriptを使用して実行して必要な値を選択できるようになります。