<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>
