Javascript 在DOM中向下和横向遍历

我的结构如下：

<a href="#" onclick="toggleThis(this); return false;">
   <div style="width:100%;">
     <h3 style="display:inline-block"><img src="/assets/images/plus_qty.png" class="faqPlusMinus">Where is my order?</h3>
   </div>
</a>

代码如下：

function toggleThis(e){
    var elc = e.firstChild.firstChild.nextSibling;
    alert(elc.src);/
}

我没有使用JQuery。

检查.firstChild的类型，它可能是对应于标记之间空白的TextNode，而不是div标记。TextNodes没有第一个子节点

您说过您没有使用jQuery，但也许您可以使用。这将允许您以这样一种方式编写函数，即使有人在HTML中添加或删除某些节点，该函数仍然可以工作。

您的第一个孩子是一个带有aline break的文本节点，您可以通过执行console.loge.firstChild看到这一点

所以你需要转到下一个兄弟姐妹。这很管用，但很讨厌

函数切换{ var elc=e.firstChild.nextSibling.firstChild.nextSibling.firstChild； console.logelc.src； } 因为firstChild在您的情况下是TextNode，所以您不能访问img元素。相反，你有几个选择。首先，您可以使用firstElementChild：

然后您可以使用子集合：

function toggleThis(e){
    var elc = e.children[0].children[0].children[0];
    alert(elc.src);
}

函数切换{ var elc=e.children[0]。children[0]。children[0]； alertelc.src； //…或 var elc=e.firstElementChild.firstElementChild.firstElementChild； alertelc.src } 你想要

e.children[0].children[0].children[0]

要检索第一个元素子元素div，然后检索第一个元素子元素h3，然后检索第一个元素子元素img

然而，仅仅说出来可能更容易

e.querySelector('img')

---

当HTML因任何原因发生变化时，这也会变得不那么脆弱。

你为什么要和所有的第一个孩子纠缠在一起？为什么不直接使用getElementsByTagName，或者添加一个类并按其选择

函数切换{ var elc=e.getElementsByTagName'img'[0]； console.logelc.src； } 那不是一个兄弟姐妹，而是一个孩子。试试e.firstChild.firstChild.firstChild.firstChild将返回文本节点，包括空白节点，这些节点显然没有自己的子节点。看见您可能需要子项[0]。为什么不使用e.getElementsByTagNameimg[0].src

e.children[0].children[0].children[0]

e.querySelector('img')