Di chuyển đến một phần tử con cụ thể với Prototype

Question

Với đánh dấu sau đây.

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

Làm cách nào để nhanh chóng có được yếu tố đầu vào bị ẩn vì tôi có ID cho phần tử div cao nhất với ID 'example'?

Tôi có thể hack vào nó để tôi có thể lặp qua từng phần tử con cho đến khi tôi nhấn vào đầu vào, tuy nhiên, tôi muốn cải thiện và sử dụng Prototype và chỉ cần nhảy vào đầu vào ẩn đó cho div.

Cảm ơn!

Answer 1

$$('#example input[type=hidden]').first() 

Answer 2

Prototype cung cấp một bó toàn bộ các cách để làm điều này:

// 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'); 

Answer 3

Tôi thích cách tiếp cận trực tiếp

document.forms[0].fieldName.value 

Đó là mã ít hơn, không cần phải sử dụng jQuery và nhiều thân thiện với thiết kế mã.