I want to get the text inside the div in the class "atName".

I am looping though the table td's like this:

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
        }

Every td is set up like this:

<td id="H" class="element nonmetal gasI">
    <div class="atN">1</div>
    <div class="atS gas"><a class="gas" href="" target="_blank">H</a></div>
    <div class="atName">Hydrogen</div>
    <div class="atW">1.00794</div>
</td>

I want the text inside the "atName" div.

Does anyone know how?

Thanks!

I want to get the text inside the div in the class "atName".

I am looping though the table td's like this:

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
        }

Every td is set up like this:

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

I want the text inside the "atName" div.

Does anyone know how?

Thanks!

• javascript
• html

• Have you tried using getElementsByClassName(). – UndoingTech Commented Mar 3, 2016 at 13:31
• 1 Array.prototype.map.call(document.querySelectorAll(".atName"), function(element) {return element.textContent}) – GottZ Commented Mar 3, 2016 at 13:33
• 1 Just a ment on your code, are you always going to have only one row in your table? Or are you trying to loop through all the cells in your table? I ask just because your variable name cols sounds like you might be thinking you're just looping over the columns of a single row – Ken Bellows Commented Mar 3, 2016 at 13:34

3 Answers 3

The same way you selected the tds:

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

btw. you should give different IDs to your tds or use classes because IDs should be unique

UPDATE

To avoid any confusion, I'm already assuming we're looping the tds (from your code), and this line goes here:

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

You can get the object by class name :

document.getElementsByClassName('atName')

But this return you a list of object with this class.

So you can do in your while:

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

Maybe this will help?

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

What you're looking for is element.innerHTML but hopefully this selector trick will help you too.

Edit: element.textContent is different but you might desire to use it instead.