首页 > 代码库 > 获取dom对象(1)

获取dom对象(1)

2024-07-09 21:50:19   227人阅读

<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="http://www.mamicode.com/mybtn1" /><input id="btn2" type="button" value="http://www.mamicode.com/mybtn2" /><input id="btn2" type="button" value="http://www.mamicode.com/mybtn22" /><input id="btn3" type="button" value="http://www.mamicode.com/mybtn3" /><input id="btn3" type="button" value="http://www.mamicode.com/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=btn33btn3.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>

 


联系
我们