http://www.blogjava.net/supercrsky/articles/217167-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_6934/article/details/81618245

本文通过实例展示了Prototype.js库中的DOM操作方法，包括获取元素的子元素、定位相邻元素及遍历元素的后续兄弟节点等。这些方法简化了JavaScript中常见的DOM操作任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

< HTML >
< HEAD >
   < TITLE > Element 02 </ TITLE >
   < script src ="prototype.js" type ="text/javascript" ></ script >
   < script >
       // Element.childElements() 返回该元素的所有子元素(并按顺序)
       function childElementsTest()
       {
           var ul = $('ul1').childElements();
          ul.each( function (o,index)
           {
            alert( " index: " + index + " value: " + o.outerText);
          } );
      }
       // previous() 方法返回上一个html元素的对象(注意是同级)
       function previousTest()
       {
          alert($('saying').previous().outerText);
      }
       // 里面可以传参数,从0开始，0代表向上一个,以此类推
        function previousTest1()
       {
          alert($('saying').previous( 1 ).outerText);
           // 当然也可以直接指定$('saying').previous('h3'); 向上移动到h3元素
           // 也可以指定class选择器
          alert($('ida - red').previous('.yummy').outerText);
      }

       function myNextSibling()
       {
           // 注意返回的是一个数组
           var li = $('mutsu').nextSiblings();
          li.each( function (i)
           {
            alert(i.outerText);
          } );
      }
   </ script >
</ HEAD >
< BODY >
     < ul id ="ul1" >
         < li > a </ li >
         < li > b </ li >
         < li > c </ li >
     </ ul >

     < br />
     < input type ="button" onclick ="childElementsTest();" value ="ChildElements test" />
< hr />
     < ul id ="fruits" >
         < li id ="apples" >
             < h3 > Apples </ h3 >
             < ul id ="list-of-apples" >
                 < li id ="golden-delicious" class ="yummy" > Golden Delicious </ li >
                 < li id ="mutsu" class ="yummy" > Mutsu </ li >
                 < li id ="mcintosh" > McIntosh </ li >
                 < li id ="ida-red" > Ida Red </ li >
             </ ul >
             < p id ="saying" > An apple a day keeps the doctor away. </ p >
         </ li >
     </ ul >
     < br />
     < input type ="button" value ="previous test" onclick ="previousTest();" />
     < input type ="button" value ="向上找２个" onclick ="previousTest1();" />
     < input type ="button" value ="被观察者" id ="b1" />
     < br />
     < input type ="text" id ="t1" />
     < br />
     < input type ="button" id ="b2" value ="li的兄弟" onclick ="myNextSibling();" />
         < input type ="button" value ="我在这" />
</ BODY >
< script >
    ( function () {
         // 有点像观察者模式
        $('b1').observe('click', function (event)
         {
            alert('您已经被监视');
             // Event.element(event) 表示被观察者对象
            Event.element(event).value = " 完了 " ;
        } );

        $('t1').observe('change', function (event)
         {
            alert('值已经改变');
            Event.element(event).value = "" ;
        } );
      } )();
</ script >
</ HTML >