<html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>获取dom对象</title> <style> #btn3{ border:1px solid red; } #btn33{ border:1px solid blue; } </style> </head> <body> <input id="btn1" type="button" value="mybtn1" /> <input id="btn2" type="button" value="mybtn2" /> <input id="btn2" type="button" value="mybtn22" /> <input id="btn3" type="button" value="mybtn3" /> <input id="btn3" type="button" value="mybtn33" /> </body> </html> <script type="text/javascript"> //兼容ie浏览器测试 var console = console || {}; console.log = console.log || function(a){ alert(a); } /* 在js里面能获取dom对象的方法,常用的有三种, 分别是: document.getElementById(id); document.getElementsByName(name); document.getElementsByTagName(tag); */ /* getElementById(id); 获取文档中第一个匹配id属性的dom对象. */ var btn1 = document.getElementById("btn1"); //btn1就是获取到页面id=btn1的dom对象 //输出对象的value值, console.log(btn1.value);//mybtn1 /* 思考一下: 如果文档中有两个id属性一样的节点,那么会得到哪个对象呢? */ var btn2 = document.getElementById("btn2"); //输出对象的value值, console.log(btn2.value);//mybtn2 /* 我们发现得到的是第一个加载文档结构中的节点.在此之后就获取不到了. */ /* 得到上面的结论之后,有两个问题就呼之欲出了: 1.后面元素的id对象元素到底有没有作用? 2.如果我动态修改了前一个元素id,能获取到后一次元素对象吗? */ /* 第一个问题 我们通过给id为btn3的元素添加样式,可以发现两个元素都是有效的, 所以基本说明这个id应该是有用的,只是不能用来通过它获取元素. */ /* 第二个问题 我们通过js动态修改元素id属性测试 */ var btn3 = document.getElementById("btn3"); //动态修改第一个id=btn3元素的id=btn33 btn3.id = "btn33"; console.log(btn3.value);//mybtn3 //重新获取id=btn3的元素 var btn3 = document.getElementById("btn3"); //输出对象的value值, console.log(btn3.value);//mybtn33 /* 通过日志,我们可以看出动态修改id之后,成功的获取到后一个元素对象 这里需要说明一下 在网上有一种说法,这个id属性不要轻易去修改,因为修改之后通过id绑定的样式不会刷新. 这个说法是对的,因为在ie5的版本,id属性只是一直只读属性. 不过在21世纪的今天,ie5估计已经绝迹了吧. 不过话说回来,元素id这个属性不光可能跟样式绑定,更关键的是可能跟事件绑定在一起, 所以在团队开发中,还是不要轻易修改为好. */ /* 提一个问题 如果我们传入一个不存在的id,或者传一个空串,或者什么都不传,会得到一个什么值? */ </script>
原文：http://www.cnblogs.com/cxy020/p/3811253.html