如何使用嵌套代码中的Javascript定位特定元素？

Question

我刚刚开始学习JS（和DOM），但遇到了针对不同嵌套级别的问题。

我读过可以使用.children功能+进行循环，但是我没有这样做。

比方说，我想拥有一个传递嵌套级别的函数，它将仅更改该级别上的<li>元素的某些属性。

I wrote this function to add classes to all last <li> 

  function changeElement(){ 
  var lastLi = document.querySelectorAll('li:last-child'); 
    for(i = 0; i < lastLi.length; i++){ 
     lastLi[i].classList.add('last'); 
     lastLi[i].style.background = 'green'; 
    } 
  } 

But now I need to target <li> elements on specific nested level

  function changeElementOnLevel(level) {
  var lastLi = document.querySelectorAll('li:last-child');

  for (i = 0; i < lastLi.length; i++) {
    //if level is 1 than we should change ul.root > li:last-child
    //if level is 3 than we should change ALL <li:last-child> inside ul.root 
> li > ul > 
  }

}
changeElementOnLevel(3)

<ul class='root'>
  <li>Cat
    <ul>
      <li>Eats1</li>
      <li>Sleeps</li>
      <li>Snuggles</li>
      <li>Plays</li>
      <li>Meows</li>
    </ul>
  </li>
  <li>Dog
    <ul>
      <li>Eats2</li>
      <li>Sleeps</li>
      <li>Snuggles</li>
      <li>Plays</li>
      <li>Barks</li>
    </ul>
  </li>
  <li>Fish
    <ul>
      <li>Eats3</li>
      <li>Sleeps</li>
      <li>Swims</li>
      <li>Plays</li>
      <li>Swims</li>
    </ul>
  </li>

将不胜感激！

Answer 1

我认为您有一些嵌套的ul标签，因此在您的示例中，ul.root是1级，而内部ul是2级，如果您使用ul标签而不是'Eats1'，则它将是3级， ...使用此功能：

function changeElementOnLevel(level){
    let query = 'ul.root>li';
    for (let i = 1; i < level; i++) {
        query += '>ul>li'
    }
    query += ':last-child'
    var lastLi = document.querySelectorAll(query);
    for(i = 0; i < lastLi.length; i++){
        // your code 
    }
 }

Answer 2

尚不清楚要实现什么：)但是您可以尝试:nth-child()-CSS伪类选择器，该选择器允许您根据容器内的索引（源顺序）选择元素。

这只是一个例子：

function find(n) {
    // returns NodeList
    var liNodeList = document.querySelectorAll('li:nth-child(' + n + ')');
    console.log(li);

    // if you need to do something with those elements, you can iterate
    for (var i = 0; i < liNodeList.length; ++i) {
        var item = liNodeList[i];
        // do what you need with particular item
    }
}

此外，正确的方法是querySelectorAll(...)。您正在使用的querySelectAll不存在。

Answer 3

尝试如下，

我使用了查询选择器和遍历的混合来实现这一目标，

function changeElementOnLevel(level) {
        var rootElement = document.querySelector(".root");

        let targetLi;
        if (level === 1) {
          targetLi = rootElement.children[rootElement.children.length - 1];
          let ul = targetLi.querySelector("ul"); // Since a ul is also there in level 1, I am expecting we need to change only li value not the ul
          targetLi.textContent = "changed Value";
          targetLi.append(ul);
        } else if (level === 3) {
          targetLi = rootElement.querySelector(
            "li:last-child ul li:last-child"
          );
          targetLi.textContent = "changed Value";
        }
      }

      changeElementOnLevel(3);

<ul class="root">
      <li>
        Cat
        <ul>
          <li>Eats1</li>
          <li>Sleeps</li>
          <li>Snuggles</li>
          <li>Plays</li>
          <li>Meows</li>
        </ul>
      </li>
      <li>
        Dog
        <ul>
          <li>Eats2</li>
          <li>Sleeps</li>
          <li>Snuggles</li>
          <li>Plays</li>
          <li>Barks</li>
        </ul>
      </li>
      <li>
        Fish
        <ul>
          <li>Eats3</li>
          <li>Sleeps</li>
          <li>Swims</li>
          <li>Plays</li>
          <li>Swims</li>
        </ul>
      </li>
    </ul>

Answer 4

这取决于您到底想做什么。您要更改点击的内部HTML吗？你说第三级是什么意思？您有3个级别和3个列表。需要更多信息以帮助您。

                var lastLi = document.getElementsByTagName('li');
         
                lastLi[3].innerHTML = "TEST FOR 3rd element";
                lastLi[17].innerHTML = "Who are you???";
                lastLi[6].innerHTML = "I am dog!!!"
              

 <ul class='root'>
                <li>Cat
                  <ul>
                    <li>Eats1</li>
                    <li>Sleeps</li>
                    <li>Snuggles</li>
                    <li>Plays</li>
                    <li>Meows</li>
                  </ul>
                </li>
                <li>Dog
                  <ul>
                    <li>Eats2</li>
                    <li>Sleeps</li>
                    <li>Snuggles</li>
                    <li>Plays</li>
                    <li>Barks</li>
                  </ul>
                </li>
                <li>Fish
                  <ul>
                    <li>Eats3</li>
                    <li>Sleeps</li>
                    <li>Swims</li>
                    <li>Plays</li>
                    <li>Swims</li>
                  </ul>
                </li>
            </ul>