javascript 入门 (3)getElementByName, getElementById等用法_

......。所以返回唯一元素句柄或者null。对于表单控件

等，在不指定id的时候，name也会被视作id，比如</p><p style="text-indent: 2em;font-size:18px;"><input type="text" name="abc" value="123">也可以用</p><p style="text-indent: 2em;font-size:18px;">mentByIdx("abc")来获取 </p><p style="text-indent: 2em;font-size:18px;">而byName，从名字上看，就可以知道，它返回的是复数个对象。它根据name属性</p><p style="text-indent: 2em;font-size:18px;">（name可以重复），得到所有name属性与参数相同的控件组成的数组，不存在时，返回</p><p style="text-indent: 2em;font-size:18px;">0长度数组(.length == 0,而不是null) </p><p style="text-indent: 2em;font-size:18px;">比如 </p><p style="text-indent: 2em;font-size:18px;"><input type="text" name="abc" value="1"> </p><p style="text-indent: 2em;font-size:18px;"><input type="text" name="abc" value="2"> </p><p style="text-indent: 2em;font-size:18px;"><input type="text" name="abc" value="3"> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">var array = mentsByName("abc"); </p><p style="text-indent: 2em;font-size:18px;">if ( == 0) { </p><p style="text-indent: 2em;font-size:18px;">alert("Error"); </p><p style="text-indent: 2em;font-size:18px;">return; </p><p style="text-indent: 2em;font-size:18px;">} </p><p style="text-indent: 2em;font-size:18px;">for (var i = 0; i < ; i++) { </p><p style="text-indent: 2em;font-size:18px;">alert(array[i].value); </p><p style="text-indent: 2em;font-size:18px;">} </p><p style="text-indent: 2em;font-size:18px;">当页面上的控件同名且多个的时候,你首先做的是什么?判断长度?的确,从程序的严密</p><p style="text-indent: 2em;font-size:18px;">角度出发,我们是需要判断长度,而且有长度和没长度是两种引用方法.我们来看: </p><p style="text-indent: 2em;font-size:18px;">oEle= ;//这里有一个aaa的对象,但我们不知道它现在长度是多少,</p><p style="text-indent: 2em;font-size:18px;">所以没办法对它操作.因此,我们要先做判断长度的过程.如下: </p><p style="text-indent: 2em;font-size:18px;">if(){}else{}; </p><p style="text-indent: 2em;font-size:18px;">在两种情况下,花括号里面的内容写法也是不一样的: </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">if(){ </p><p style="text-indent: 2em;font-size:18px;">for(var i = 0 ;i<;i++){ </p><p style="text-indent: 2em;font-size:18px;"> oEle[i]. </p><p style="text-indent: 2em;font-size:18px;">} </p><p style="text-indent: 2em;font-size:18px;">} </p><p style="text-indent: 2em;font-size:18px;">else{ </p><p style="text-indent: 2em;font-size:18px;"> ........ </p><p style="text-indent: 2em;font-size:18px;">}; </p><p style="text-indent: 2em;font-size:18px;">但是这样写是不是太复杂了点?而且当花括号里面的代码比较多的时候,我们要写两遍</p><p style="text-indent: 2em;font-size:18px;">代码,晕了先~ </p><p style="text-indent: 2em;font-size:18px;">还好有mentsByName()这个方法.它对一个和多个的处理是一样的,</p><p style="text-indent: 2em;font-size:18px;">我们可以用: </p><p style="text-indent: 2em;font-size:18px;">oEle = mentsByName('aaa')来引用 </p><p style="text-indent: 2em;font-size:18px;">当oEle只有1个的时候,那么就是oEle[0],有多个的时候,用下标法oEle[i]循环获取,</p><p style="text-indent: 2em;font-size:18px;">是不是很简单? </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">值得一提的是它对Name和ID的同样有效的. </p><p style="text-indent: 2em;font-size:18px;">但是它只能应用到document对象.相对应的,还有另一个方法,可以应用的对象会更广</p><p style="text-indent: 2em;font-size:18px;">一点: </p><p style="text-indent: 2em;font-size:18px;">getElementsByTagName,比如我知道了一个<DIV </p><p style="text-indent: 2em;font-size:18px;">ID='aaa'><input/><input/>......</DIV> </p><p style="text-indent: 2em;font-size:18px;">我要取DIV里面的所有input,这样写就可以</p><p style="text-indent: 2em;font-size:18px;">了:mentsByTagName_r('INPUT'),这样就有效的可以和别的DIV(比如说有个</p><p style="text-indent: 2em;font-size:18px;">叫bbb的DIV,里面的也是一样的input)相区别. </p><p style="text-indent: 2em;font-size:18px;">同getElementsByTagName相对应,还有一个(),能用这个</p><p style="text-indent: 2em;font-size:18px;">方法的对象比getElementsByTagName要小得多.但比getElementsByName要多. </p><p style="text-indent: 2em;font-size:18px;">到这里我们还要提一下getElementById,它也是只有document对象才能使用,而且</p><p style="text-indent: 2em;font-size:18px;">返回的是数组的第一个元素,呵呵,它的方法名都写明了是getElement而不是</p><p style="text-indent: 2em;font-size:18px;">getElements,所以,千万不要搞浑了 </p><p><p><h2></h2></p></img></p></div></article></div><div class="fzithome-com info"><div><span>本文发布于:2024-06-07，感谢您对本站的认可！</span></div><div><span>本文链接:</span><a href="https://www.fzithome.com/xitong/1717729678a668762.html" title="javascript 入门 (3)getElementByName, getElementById等用法_">https://www.fzithome.com/xitong/1717729678a668762.html</a></div><div><span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div></div><span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="/tag/1178.html" target="_blank">长度</a><a href="/tag/158.html" target="_blank">方法</a><a href="/tag/460.html" target="_blank">对象</a><a href="/tag/308.html" target="_blank">控件</a><a href="/tag/1810.html" target="_blank">返回</a></span></div><div class="fzithome-com post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论 <span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4><form action="/comment/create/668762.html?safe_token=mW7EXqP_2FMEBwJxzssV65M7FG7h6CPeqPFENZCSQDnoJniCmqF34DTlFxlow_2BfxiZ73jWQl_2B2abq_2FEEudTKI3Iw_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="fzithome-com tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5">