li标签之间无法获取价值

Question

I am trying to get value between two li tags but unfortunately it is saying my undefined.

In details, I want a script which automatically clicks on next page and get your current page (on linkedin Page)

So this is what our DOM initially looks like

<li class="page-list">
      <ol>
            <li class="active">1</li>
            <li><button data-ember-action="" data-ember-action-2354="2354">2</button></li>
            <li><button data-ember-action="" data-ember-action-2356="2356">3</button></li>
            <li><button data-ember-action="" data-ember-action-2358="2358">4</button></li>
            <li><button data-ember-action="" data-ember-action-2360="2360">5</button></li>
            <li><button data-ember-action="" data-ember-action-2362="2362">6</button></li>
            <li><button data-ember-action="" data-ember-action-2364="2364">7</button></li>
            <li><button data-ember-action="" data-ember-action-2366="2366">8</button></li>
            <li><button data-ember-action="" data-ember-action-2368="2368">9</button></li>
            <li><button data-ember-action="" data-ember-action-2370="2370">10</button></li>
      </ol>
    </li>

Now to select the nested things I am doing something Like this

`var x = document.getElementsByClassName("page-list")[0];` 

Value of the x on console.log is same as what is pasted above

Then I do something like this to select active class

x = x.querySelector('li[class="active"]')

this console logs this

<li class="active">1</li>

Now Here I want to get that value 1, On the inspect element of chrome, while on the linkedin page (to simulate the event) i have tried tried things like

currentPageValue = x.querySelector('li[class="active"]').value;
currentPageValue = x.getElementsByClassName('active')[0].innerHTML

These throws an error saying that cannot read property value/InnerHTML of null.

currentPageValue = x.getElementsByClassName('active').value

This shows the value of null (and many other things)

What I want to have here is the integer value (which would be 1 here) in

<li class="active">1</li>

Can anyone please help me in knowing how can I get that value?

Answer 1

document.querySelector('.page-list li.active').textContent should do the trick. Provided that you call it when DOM is ready.

Or var menu = document.querySelector('.page-list); menu.querySelector('li.active') var menu = document.querySelector('.page-list); menu.querySelector('li.active')

 var menu = document.querySelector('.page-list'); console.log( document.querySelector('.page-list li.active').textContent, menu.querySelector('li.active').textContent ) 

 <li class="page-list"> <ol> <li class="active">1</li> <li><button data-ember-action="" data-ember-action-2354="2354">2</button></li> <li><button data-ember-action="" data-ember-action-2356="2356">3</button></li> <li><button data-ember-action="" data-ember-action-2358="2358">4</button></li> <li><button data-ember-action="" data-ember-action-2360="2360">5</button></li> <li><button data-ember-action="" data-ember-action-2362="2362">6</button></li> <li><button data-ember-action="" data-ember-action-2364="2364">7</button></li> <li><button data-ember-action="" data-ember-action-2366="2366">8</button></li> <li><button data-ember-action="" data-ember-action-2368="2368">9</button></li> <li><button data-ember-action="" data-ember-action-2370="2370">10</button></li> </ol> </li>