使用Javascript在TD內獲取div

Question

我想在“ atName”類的div中獲取文本。

我正在遍歷表td像這樣：

var searchString = document.getElementById("search").value;
if (searchString !== "") {
    var cols = document.querySelectorAll('#theTable td'),
        colslen = cols.length,
        i = -1;

    while (++i < colslen) {
        if (cols[i].id.indexOf(searchString) > -1) {
            cols[i].style.opacity = "1"
        } else {
            Here i want to access the text inside the div
        }

每個td都是這樣設置的：

<td id="H" class="element nonmetal gasI">
    <div class="atN">1</div>
    <div class="atS gas"><a class="gas" href="https://en.wikipedia.org/wiki/Hydrogen" target="_blank">H</a></div>
    <div class="atName">Hydrogen</div>
    <div class="atW">1.00794</div>
</td>

我想要“ atName” div中的文本。

有人知道嗎？

謝謝！

Answer 1

選擇td的方法相同：

cols[i].querySelector('.atName').textContent;

順便說一句 您應該給您的td使用不同的ID或使用類，因為ID應該是唯一的

---

更新

為了避免混淆，我已經假設我們正在循環td （來自您的代碼），此行在這里：

while (++i < colslen) {
    if (cols[i].id.indexOf(searchString) > -1) {
        cols[i].style.opacity = "1"
    } else {
        var divText = cols[i].querySelector('.atName').textContent;  // <--- here
    }
...
}

Answer 2

您可以通過類名稱獲取對象：

document.getElementsByClassName('atName')

但這會返回帶有此類的對象列表。

因此，您可以在一段時間內執行以下操作：

 while (++i < colslen) 
    {
        if (cols[i].id.indexOf(searchString) > -1) {
           cols[i].style.opacity = "1"
        } else {
           var text = cols[i].getElementsByClassName('atName')[0].textContent; 
        }
    }

Answer 3

也許這會有所幫助嗎？

var searchString = "Hy";
if (searchString !== "") {
var cols = document.querySelectorAll('#theTable tr td .atName');
  for (var i=0;i<cols.length;i++)
  {
    if (cols[i].innerHTML.indexOf(searchString)>-1)
    {
        alert(cols[i].innerHTML);
    }
  }
}

您正在尋找的是element.innerHTML，但希望這個選擇器技巧也會對您有所幫助。

編輯：element.textContent是不同的，但您可能希望改用它。