Inner text from selector

Question

I tried to take the inner text from this markup:

<span ng-if="vm.totalRecords > 1" class="ng-binding ng-scope">
    Displaying results 1-25 of 17,430
</span>

Using this selector:

document.querySelectorAll('div.Dashboard-section div.pure-u-1-1 span.ng-binding.ng-scope').innerText

It returns undefined. Any suggestions what am I doing wrong?

Answer 1

document.getElementsByTagName can be used to fetch the span elements and then select the first of them.

console.log(document.getElementsByTagName('span')[0].innerText);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<span ng-if="vm.totalRecords > 1" class="ng-binding ng-scope">Displaying results 1-25 of 17,430</span>

Answer 2

You need to do the following:

console.log(document.querySelectorAll('span')[0].innerText);

<span ng-if="vm.totalRecords > 1" class="ng-binding ng-scope">Displaying results 1-25 of 17,430</span>

This will log the innerText as opposed to the other code due to two reasons:

1. Using querySelectorAll returns a list of results, hence why we use [0] to reference the first found element.

2. The actual query from your querySelectorAll couldn't find the HTML element. Simply using span as the query is enough.