Javascript - 获取孩子的孩子答案

【问题标题】：Javascript - get child of childJavascript - 获取孩子的孩子
【发布时间】：2017-04-12 19:04:33
【问题描述】：

如何在li>a> 下的dom 中设置span 元素的内部html？

        <li class="first">
          <a>
            <span aria-hidden="true">1</span>
          </a>
        </li>

我试过这样的东西，但什么都没写：

element[i].childNodes[1].children.innerHTML = number;

【问题讨论】：

【解决方案1】：

children is an HTMLCollection。 innerHTML 仅适用于 HTML 元素。在使用innerHTML之前，您需要在children中找到HTML元素。

混合使用childNodes 和children 没有多大意义。使用前者以获得更好的跨浏览器兼容性，使用后者以获得更简单的方法，让您只考虑元素节点。

var li = document.querySelector("li");
var number = 13;
li.children[0].children[0].innerHTML = number;

<ul>
  <li class="first">
    <a>
      <span aria-hidden="true">1</span>
    </a>
  </li>
</ul>

或者，您可以只使用querySelector：

var li = document.querySelector("li");
var number = 13;
li.querySelector("a").innerHTML = number;

<ul>
  <li class="first">
    <a>
      <span aria-hidden="true">1</span>
    </a>
  </li>
</ul>

【讨论】：

还要注意li.querySelector 将匹配li 范围之外的元素。 stackoverflow.com/questions/26068390/…
@evolutionxbox — 它会在 li 的范围内找到一个匹配选择器的元素。它不会匹配 li 范围之外的元素，尽管它可能会将此类元素用于组合子左侧的事物。

【解决方案2】：

我推荐使用 jQuery (http://jquery.com) 然后使用可以简单地做

$('li > a > span').html('THE INNER HTML HERE');

或

$('li > a').find('span').html('THE INNER HTML HERE');

你可以使用.first()对find()函数的结果来获取第一个元素

【讨论】：