document擷取對象三方法，document擷取對象
Document對象中有幾個常用的方法，我們在Dom簡介中提到過。說到擷取javascript對象的方法，最常用的可能就是getElementById了，它是Document中最常用的擷取對象的方式之一，另外還有兩個常用的擷取對象的方法是getElementsByTagName 和getElementsByName。其中getElementById擷取到的是單對象，而getElementsByName和 getElementsByTagName 擷取到的都是集合。
現在我們有一個form表單，內容為
<html><head><title>Demo</title></head><body><form id="form1" action="#"><a href="http://www.baidu.com/" name="clj" id="baidu">百度</a></br><a href="http://www.google.cn/" name="clj" id="google">Google</a></br><a href="http://www.gougou.com/" name="clj" id="gougou">狗狗</a></br></form><script></script></body></html>
接下來，我們通過三種方式來擷取百度所對應的超連結位址。
根據標籤元素名稱擷取對象集合。
假如上面的代碼中不存在name 和 id 屬性，那麼我們只能通過tagName來判斷了。
看代碼
<html><head><title>getElementsByTagName</title></head><body><form id="form1" action="#"><a href="http://www.baidu.com/" >百度</a></br><a href="http://www.google.cn/" >Google</a></br><a href="http://www.gougou.com/" >狗狗</a></br></form><script><!--getElementsByTags-->debugger;var hrefs = document.getElementsByTagName("A");for (var i=0; i < hrefs.length; i++) {var aHref = hrefs[i]; // var aHref = hrefs.item(i);if (aHref.innerHTML == "百度") {alert(aHref.href);break;}}</script></body></html>
通過 document.getElementsByTagName("A");擷取到元素集合hrefs，然後遍曆hrefs，再去比較每一項的內容，是否為“百度”，判斷到了後，break跳出迴圈。
通過上一講的調試方法，可以看到getElementsByTagName方法擷取到的元素集合hrefs。
hrefs 擁有length屬性，指的是集合中包含的對象的個數，方法中一個比較有用的方法 item()，是根據元素的序號擷取元素的。
根據name屬性擷取對象集合。
這時候，擷取的對象必須要有name屬性。
<html><head><title>getElementsByName</title></head><body><form id="form1" action="#"><a href="http://www.baidu.com/" name="clj" >百度</a></br><a href="http://www.google.cn/" name="clj" >Google</a></br><a href="http://www.gougou.com/" name="clj" >狗狗</a></br></form><script><!--getElementsByName-->var hrefs = document.getElementsByName("clj");for (var i=0; i < hrefs.length; i++) {var aHref = hrefs[i]; // var aHref = hrefs.item(i);if (aHref.innerHTML == "百度") {alert(aHref.href);break;}}</script></body></html>
通過getElementsByName 擷取到的集合的處理方式同getElementsByTagName處理方式相同，這裡就不再細述了。
根據元素的id擷取該對象。
我們給上述的代碼中的每個超連結都添加上id屬性，代碼就成了我們剛開始看到的範例程式碼了。
<html><head><title>Demo</title></head><body><form id="form1" action="#"><a href="http://www.baidu.com/" name="clj" id="baidu">百度</a></br><a href="http://www.google.cn/" name="clj" id="google">Google</a></br><a href="http://www.gougou.com/" name="clj" id="gougou">狗狗</a></br></form><script></script></body>
這時候，我們可以一目瞭然的看到百度對應的超連結的id屬性值為baidu，我們可以直接使用getElementById 來擷取這個超連結對象。
<script><!--getElementById-->var href1 = document.getElementById("baidu");alert(href1.href);</script>
綜上三種擷取對象的方式，可以看出，getElementById 是擷取對象最直接的方式，也是效率最高的方式；但是如果元素沒有id屬性，但有name屬性，那麼就使用getElementsByName 來擷取對象的集合，再遍曆集合中的每一個對象；如果元素也沒有name屬性呢，那就只有使用getElementsByName 來擷取對象了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
