使用javascript抓取類中的類

您好，這是我的第一個問題，我是業餘開發人員，請事先原諒我。我試圖抓住這個值類的特定實例。我正在處理的網站有數百個與值類關聯的不同值。使用javascript抓取類中的類

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

謝謝

2017-05-08 Brendan

雖然現有的答案已經涵蓋了「現代」的方式來做到這一點 - 你可以使用大部分getElementsBy ...（我想所有的東西 - 除了getElementById之外都會說，但是它的名字是單數的，，因爲所有元素都有id特殊的含義）。

的Element.getElementsByClassName()方法返回一個包含具有所有給定的類名稱的所有子元素活的HTMLCollection。在文檔對象上調用時，將搜索包括根節點在內的完整文檔。

因此，您可以使用兩次，先選擇一個具有一個特定類的元素，然後選擇另一個具有「其中」不同類的元素，在前者的後代中。（不是「子元素」，如所報MDN參考錯誤地把它。）

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

（對於是否存在的元素必要的檢查訪問之前，該怎麼做，如果（任一個）一個以上的元素存在，等等，爲簡潔起見而省略;-)

但是，簡單地致電querySelector當然是更快的方法。

2017-05-08 19:43:45 CBroe

嘗試

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

這樣做是因爲，而不是由類選擇你選擇具有span.value作爲一個孩子的li.vin元素。 vinNumber現在是一個節點元素。當你打電話給vinNum.innerText時，你應該得到正確的號碼。當你在你的例子中console.log（vinNum）時，你很可能會看到未定義或不正確的元素。

2017-05-08 19:19:06

您可以使用document.querySelector函數來根據類，ID或其他可以使用CSS選擇器選擇的元素來搜索頁面上的元素。

使用Mozilla的CSS Selector reference，我們可以看到CSS選擇器語法選擇是一些其他元素的直接子元素是A > B，其中A是匹配父選擇，並且B是相匹配的孩子選擇。

因此，要做到這一點的方法之一是使用：

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

的一個班輪上面會value類的第一span元素，它vin類的li元素的子元素相匹配。

但是，如果你有這種結構的多個實例（vin類帶內它value類的span一個li），使用這個選擇將無法正常工作。事實上，如果您想單獨訪問每個類別value的特定跨度，最好的方法可能是add a unique id attribute to each of them。

如果你的結構是這樣的：

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

然後，您可以使用以下方法：

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

因爲當你有嵌套的HTML元素的列表都具有相同的結構的一種最後的選擇將使用document.querySelectorAll，它將返回與您的查詢匹配的所有DOM節點，並允許您使用JavaScript來遍歷它們並選擇所需的值。

2017-05-08 19:25:25

回答