Question 45271 in Html Question posted in
Some basic documentation can be found here.

How to loop through the inner elements within 'document.querySelector' – Html

I am using chrome devtools to inspect html. I have this code where I apply querySelector for inner elements:

var x = document.querySelectorAll(".search__results-list li");
var myarray = []
for (var i=0; i<x.length; i++){
    const href = x[i].querySelector('.ahchor[href]');
    const text = x[i].querySelector('.text-field');

    myarray.push([href, text]);
};

The querySelector does not exists on x[i], getting an error Uncaught TypeError: [...].querySelector is not a function how to fix that?

here is the html sample, in reality there is a lot of li’s wthin:

<ul class="search__results-list">
  <li class="search__result-container">
    <div class="search-result">
      <div class="search-result__item">
        <div class="search-result_block">
          <div class="center">
            <a class="ahchor" href="somesite.com/a">
              <div>
                <div class="wrapper">
                  <div class="entity">
                    <div class="text-field">content here</div>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>
Tags:

2

Answers


  1. 0

    In your code syntax errors

    Should be:

    var x = document.querySelectorAll(".search__results-list li");
var myarray = []
for (var i = 0; i < x.length; i++) {
    const href = x[i].querySelector('.ahchor[href]');
    const text = x[i].querySelector('.text-field');

    myarray.push([href, text]);
};

    This code should work if you wrote classes correctly and accordingly to your html

    You can check this code even in console there, works fine. But I didn’t find wrappers with 2 elements and use .m6 twice

    enter image description here

    Login or Signup to reply.
  2. 0

    enter image description here

    I used the Chrome development tool to achieve this. I found that according to your code, you can achieve logic without error. You can run the code several times.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search