Question

我有以下结构：

<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>

我正在尝试提醒图片代码的src，但收到以下错误：

TypeError: e.firstChild.firstChild is null

以下是代码：

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

我没有使用JQuery。

Answer 1

检查.firstChild的类型，它可能是TextNode对应于代码之间的空白区域，而不是div代码。 TextNode没有firstChild。

你说你没有使用jQuery，但也许你可以使用element.querySelector。这样，即使有人在HTML中添加或删除某些节点，您也可以使用这种方式编写函数。

Answer 2

由于您的firstChild是TextNode，因此您无法访问img元素。相反，你有几个选择。首先，您可以使用firstElementChild：

function toggleThis(e){
    var elc = e.firstElementChild.firstElementChild.firstElementChild;
    alert(elc.src);
}

然后您可以使用children集合：

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

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

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

Answer 3

您的firstChild是一个带有aline break的文本节点，您可以通过执行console.log(e.firstChild)来看到这一点。

所以你需要继续前进到下一个兄弟姐妹。这有效，但很讨厌

function toggleThis(e){
  var elc = e.firstChild.nextSibling.firstChild.nextSibling.firstChild;
  console.log(elc.src);
}

<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.querySelector('div h3 img');
  console.log(elc.src)
}

<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>

Answer 4

你想要

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

要检索第一个Element子项（div），然后检索它的第一个Element子项（h3），然后检索它的第一个Element子项（img）。

然而，说起来可能更容易

e.querySelector('img')

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

Answer 5

你为什么要和第一个孩子一起忙碌？为什么不只是getElementsByTagName，或者添加一个类并按它选择？

function toggleThis(e){
  var elc = e.getElementsByTagName('img')[0];
  console.log(elc.src);
}

<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>

在DOM中横穿和横向移动

5 个答案: