在DOM中向下和横向移动

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

你想要

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

检索第一个元素子元素 （div

），然后检索其第一个元素子元素 （h3 ），然后检索其第一个元素子元素 （img ）。

但是，只是说可能更容易

e.querySelector('img')

当HTML因任何原因更改时，这也将不那么脆弱。

Answer 4

你为什么要和所有第一个孩子一起忙碌？为什么不直接获取ElementsByTagName，或者添加一个类并通过它进行选择？

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>

Answer 5

您的firstChild是一个带有换行符的文本节点，您可以通过执行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>