如何使用纯javascript选择嵌套的ul元素

Question

For something seemingly simple, it's causing me some trouble.

I have the following pattern:

    <div className="row">
      <ul className="col-md-4 options-ul">

Question is how do i select the nested ul using plain javascript? I've tried various renditions of querySelector and querySelectorAll to no avail. tia

Answer 1

You can use document.querySelector(".options-ul") after you switch your className attribute to class .

If, for some reason, you need to use classname (HTML attributes are lower case):

document.querySelector("[classname ~= 'options-ul']");

Answer 2

You would use:

document.querySelectorAll(".row > ul")

to get the immediate ul child of every .row element. Use document.querySelector instead of querySelectorAll if you just want the first result.