从getElements中选择元素

Question

我有一个像这样的DOM结构：

<article class="detail">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
</article>

如果我选择使用

immagini = $$('article.detail').getElements('img')
console.log(immagini[0]) // returns Object { 0: <img>, 1: <img>, 2: <img> }

如果我选择使用

immagini = $$('article.detail img')
console.log(immagini[0]) // returns <img src="img1.jpg" />

我无法理解其中的差异，正如文档所说：

  

getElements收集标签名称与提供的标签匹配的所有后代元素。返回：（array）所有匹配元素的Elements数组。

感谢您的任何解释

Answer 1

当您使用$$时，您会获得一个类似数组的article.detail元素集合。因此，找到getElements的每个元素的将获得所有img。

这意味着您在getElements找到的数组中使用了类似于数组的集合的映射。

检查此示例：

<article class="detail" id="foo">
    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />
</article>
<article class="detail" id="bar">
    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />
</article>

和JS / MooTools：

var articles = $$('article.detail')
var img = articles.getElements('img')
console.log(articles, img);

这将打印：

[article#foo.detail, article#bar.detail], [Elements.Elements[3], Elements.Elements[3]]

jsFiddle：http://jsfiddle.net/akcvx8gL/

如果您只想要一个包含所有img元素的数组，您可以使用'article.detail img'中的整个选择器$$，就像您在其他示例中所建议的那样，或者最后使用.flatten()（{{ 3}}）。

有一个jsFiddle。

  

＆＃34; MooTools添加到Element native的所有方法也被添加到Elements类中。因此，你可以做一些非常漂亮的链接。这是因为你在Elements上调用的任何方法都将遍历数组并尝试在每个元素上调用方法[...]将返回每个元素的值数组。＆＃34; 。