document获取对象的三种三方法
2017-07-31 10:21
387 查看
Document对象中有几个常用的方法,我们在Dom简介中提到过。说到获取JavaScript对象的方法,最常用的可能就是getElementById了,它是Document中最常用的获取对象的方式之一,另外还有两个常用的获取对象的方法是getElementsByTagName 和getElementsByName。其中getElementById获取到的是单对象,而getElementsByName和 getElementsByTagName 获取到的都是集合。
现在我们有一个form表单,内容为
接下来,我们通过三种方式来获取百度所对应的超链接地址。
假如上面的代码中不存在name 和 id 属性,那么我们只能通过tagName来判断了。
通过 document.getElementsByTagName(“A”);获取到元素集合hrefs,然后遍历hrefs,再去比较每一项的内容,是否为“百度”,判断到了后,break跳出循环。
hrefs 拥有length属性,指的是集合中包含的对象的个数,方法中一个比较有用的方法
通过getElementsByName 获取到的集合的处理方式同getElementsByTagName处理方式相同,这里就不再细述了。
这时候,我们可以一目了然的看到百度对应的超链接的id属性值为baidu,我们可以直接使用getElementById 来获取这个超链接对象。
此文转自:document获取对象三方法
现在我们有一个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">谷歌</a></br> <a href="http://www.gougou.com/" name="clj" id="gougou">狗狗</a></br> </form> <script> </script> </body> </html>
接下来,我们通过三种方式来获取百度所对应的超链接地址。
1. getElementsByTagName
根据标签元素名称获取对象集合。假如上面的代码中不存在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/" >谷歌</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跳出循环。
hrefs 拥有length属性,指的是集合中包含的对象的个数,方法中一个比较有用的方法
item(),是根据元素的序号获取元素的。
2. getElementsByName
根据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" >谷歌</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处理方式相同,这里就不再细述了。
3. getElementById
根据元素的id获取该对象。我们给上述的代码中的每个超链接都添加上id属性,代码就成了我们刚开始看到的示例代码了。这时候,我们可以一目了然的看到百度对应的超链接的id属性值为baidu,我们可以直接使用getElementById 来获取这个超链接对象。
<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">谷歌</a></br> <a href="http://www.gougou.com/" name="clj" id="gougou">狗狗</a></br> </form> <script> <!--getElementById--> var href1 = document.getElementById("baidu"); alert(href1.href); </script> </body> </html>
4. 总结
综上三种获取对象的方式,可以看出,getElementById 是获取对象最直接的方式,也是效率最高的方式;但是如果元素没有id属性,但有name属性,那么就使用getElementsByName 来获取对象的集合,再遍历集合中的每一个对象;如果元素也没有name属性呢,那就只有使用getElementsByTagName来获取对象了。此文转自:document获取对象三方法
相关文章推荐
- document对象+获取节点三种方法演示:
- 父窗口获取iframe子窗口window对象和document对象的方法
- 获取document对象除了getElement方法,居然还可以使用css选择器方法!!!
- 从jdbc中获取连接对象Connection的三种方法
- document.selection.createRange方法----获取选择对象文本
- document.selection.createRange方法----获取选择对象文本
- c++builder中使用TWebBrowser获取document对象的方法
- document获取对象三方法
- document对象通过节点的局次关系获取节点对象的方法演示:
- document.getElementById获取控件对象为空的解决方法
- 获取表单对象,得三种方法getElementById(), getElementsByName(), and getElementsByTagName() 和用法
- jQuery获取iframe的document对象的方法
- 获取表单对象,得三种方法getElementById(), getElementsByName(), and getElementsByTagName() 和用法
- 使用document对象获取html dom对象有多少种方法,都是哪些?它们有哪些异同?
- IE、FireFox、Opera三种浏览器Document对象的方法对比
- Java反射机制(获取Class对象的三种方式+获取Class中的构造函数进行对象的初始化+获取反射类的字段+获取反射类的一般方法)
- BOM__Document对象简介-三种获取节点方式,通过节点层次关系获取节点,以及对象中的属性操作
- 获取表单对象,得三种方法getElementById(), getElementsByName(), and getElementsByTagName() 和用法
- JavaSE8基础 Class 获取一个类的Class对象的三种方法
- jQuery获取iframe的document对象的方法