javascript - 使用 Prototype 遍历到特定的子元素

Question

给定以下标记。

<div id="example">
  <div>
    <div>
      <input type='hidden'></input>
    </div>
  </div>
</div>

如果我拥有 ID 为“example”的最顶层 div 元素的 ID，我如何才能快速获取隐藏的输入元素？

我可以破解它，这样我就可以遍历每个子元素，直到我点击输入，但是，我想改进它并利用 Prototype 并简单地跳转到给定 div 的隐藏输入。

谢谢!

Answer 1

Prototype 提供了一大堆方法来做到这一点:

// This, from Bill's answer, is probably the fastest, since it uses the 
// Browser's optimized selector engine to get straight to the element
$$('#example input[type=hidden]').first();

// This isn't bad either. You still use the browser's selector engine 
// To get straight to the #example element, then you must traverse a 
// (small) DOM tree.
// 
// element.down(selector) selects the first node matching the selector which 
// is an decendent of element
$('example').down('input');

// Here, you'll get an array containing all the inputs under 'example'. In your HTML
// there is only one. 
$('example').select('input')

// You can also use element.select() to combine separate groups of elements,
// For instance, if you needed all the form elements:
$('example').select('input', 'textarea', 'select');