document获取对象三方法

叁歲伎倆 2022-08-07 02:40 281阅读 0赞 
  1. Document对象中有几个常用的方法，我们在[Dom简介][Dom]中提到过。说到获取javascript对象的方法，最常用的可能就是getElementById了，它是Document中最常用的获取对象的方式之一，另外还有两个常用的获取对象的方法是getElementsByTagName 和getElementsByName。其中getElementById获取到的是单对象，而getElementsByName和 getElementsByTagName 获取到的都是集合。
  6. 现在我们有一个form表单，内容为
  8. <html>
  9.     <head>
  10.         <title>Demo</title>
  11.     </head>
  12.     <body>
  13.         <form id="form1" action="#">
  14.             <a href="http://www.baidu.com/" name="clj" id="baidu">百度</a></br>
  15.             <a href="http://www.google.cn/" name="clj" id="google">谷歌</a></br>
  16.             <a href="http://www.gougou.com/" name="clj" id="gougou">狗狗</a></br>
  17.         </form>
  19.         <script>
  21.         </script>
  22.     </body>
  23. </html>
  28. 接下来，我们通过三种方式来获取百度所对应的超链接地址。

getElementsByTagName

  1. 根据标签元素名称获取对象集合。
  3. 假如上面的代码中不存在name 和 id 属性，那么我们只能通过tagName来判断了。
  5. 看代码
  7. <html>
  8.     <head>
  9.         <title>getElementsByTagName</title>
  10.     </head>
  11.     <body>
  12.         <form id="form1" action="#">
  13.             <a href="http://www.baidu.com/" >百度</a></br>
  14.             <a href="http://www.google.cn/" >谷歌</a></br>
  15.             <a href="http://www.gougou.com/" >狗狗</a></br>
  16.         </form>
  18.         <script>
  19.             <!--getElementsByTags-->
  20.             debugger;
  21.             var hrefs = document.getElementsByTagName("A");
  22.             for (var i=0; i < hrefs.length; i++) {
  23.                 var aHref = hrefs[i];  // var aHref = hrefs.item(i);
  24.                 if (aHref.innerHTML == "百度") {
  25.                     alert(aHref.href);
  26.                     break;
  27.                 }
  28.             }            
  29.         </script>
  30.     </body>
  31. </html>
  36. 通过 document.getElementsByTagName("A");获取到元素集合hrefs，然后遍历hrefs，再去比较每一项的内容，是否为“百度”，判断到了后，break跳出循环。
  40. 通过上一讲的[调试方法][Link 1]，可以看到getElementsByTagName方法获取到的元素集合hrefs。

SouthEast

  1. hrefs 拥有length属性，指的是集合中包含的对象的个数，方法中一个比较有用的方法 item()，是根据元素的序号获取元素的。

getElementsByName

  1. 根据name属性获取对象集合。
  3. 这时候，获取的对象必须要有name属性。
  5. <html>
  6.     <head>
  7.         <title>getElementsByName</title>
  8.     </head>
  9.     <body>
  10.         <form id="form1" action="#">
  11.             <a href="http://www.baidu.com/" name="clj" >百度</a></br>
  12.             <a href="http://www.google.cn/" name="clj" >谷歌</a></br>
  13.             <a href="http://www.gougou.com/" name="clj" >狗狗</a></br>
  14.         </form>
  16.         <script>
  17.             <!--getElementsByName-->
  18.             var hrefs = document.getElementsByName("clj");
  19.             for (var i=0; i < hrefs.length; i++) {
  20.                 var aHref = hrefs[i]; // var aHref = hrefs.item(i);
  21.                 if (aHref.innerHTML == "百度") {
  22.                     alert(aHref.href);
  23.                     break;
  24.                 }
  25.             }
  26.         </script>
  27.     </body>
  28. </html>
  33. 通过getElementsByName 获取到的集合的处理方式同getElementsByTagName处理方式相同，这里就不再细述了。

getElementById

  1. 根据元素的id获取该对象。
  3. 我们给上述的代码中的每个超链接都添加上id属性，代码就成了我们刚开始看到的示例代码了。
  5. <html>
  6.     <head>
  7.         <title>Demo</title>
  8.     </head>
  9.     <body>
  10.         <form id="form1" action="#">
  11.             <a href="http://www.baidu.com/" name="clj" id="baidu">百度</a></br>
  12.             <a href="http://www.google.cn/" name="clj" id="google">谷歌</a></br>
  13.             <a href="http://www.gougou.com/" name="clj" id="gougou">狗狗</a></br>
  14.         </form>
  16.         <script>
  18.         </script>
  19.     </body>
  24. 这时候，我们可以一目了然的看到百度对应的超链接的id属性值为baidu，我们可以直接使用getElementById 来获取这个超链接对象。
  26. <script>
  27.     <!--getElementById-->
  28.     var href1 = document.getElementById("baidu");
  29.     alert(href1.href);
  30. </script>
  38. 综上三种获取对象的方式，可以看出，getElementById 是获取对象最直接的方式，也是效率最高的方式；但是如果元素没有id属性，但有name属性，那么就使用getElementsByName 来获取对象的集合，再遍历集合中的每一个对象；如果元素也没有name属性呢，那就只有使用getElementsByTagName来获取对象了。

发表评论

表情：
评论列表 （有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

    相关 document对象

    一 document对象概述 文档对象（document）代表浏览器窗口中的文档，该对象是window对象的子对象，由于window对象是DOM对象模型中的默认对象，因此wi

    向右看齐向右看齐/ 0 赞/ 342 阅读