Js中id和document.getElementById的使用误区

2019独角兽企业重金招聘Python工程师标准>>>

        用原生js获取某个元素经常要用document.getElementById方法，先要给需要获取的元素设定id值，比如“box”,然后再用document.getElementById方法，于是经常这样写代码：

<div id="box">123</div>

<script type="text/javascript">
var a=document.getElementById('box');
alert(a.innerHTML);
</script>

        预览页面，会有一个alert弹窗弹出来，内容就是123。然而在类似上述的情景里，document.getElementById其实是完全多余的，我们只用这样写就可以达到相同目的：

<div id="box">123</div>

<script type="text/javascript">
alert(box.innerHTML);
</script>

        因为id本身就代表了那个文本值为123的html对象，不用通过document.getElementById来返回对象。

        但是，document.getElementById也并非是多余的！

        比如，有的时候可能要动态处理很多规律性很强的id，比如如下代码：

<div id="box0">aaa</div>
<div id="box1">bbb</div>
<div id="box2">ccc</div>
<div id="box3">ddd</div>
<div id="box4">eee</div>

<script type="text/javascript">
for(var i=0;i<5;i++){
	alert(document.getElementById('box'+i).innerHTML);
}
</script>

        这时一个循环语句就可以搞定所有元素，此时如果直接使用id获取对象的值就显得笨拙而不合时宜了。

        这也解释了，为啥很多人的私家js库，通过id获取对象的方法都是这样写了：

    byId:function(id){
        return typeof id === "string" ? document.getElementById(id) : id
    }

        这样封装的byId方法既可以给它直接传对象作为参数，也可以传字符串，可以同时解决上述的两种id使用情景。

---

直接使用id访问对象的兼容性也是很好的，目前在ie6~10，谷歌，火狐都是无问题的。但在一种情况下要特备小心，就是在表单中获取input对象时：

<form>
	<input type="text" name="" value="123" id="J_it" class="" />
</form>


<script type="text/javascript">
var a= J_it.value;
alert(a);
</script>

上述代码，在Firefox、chrome下都会正常弹出alert，但如果是ie，包括高版本的ie10等，就会：

解决办法就是不使用form标签，或者使用getElementById来返回对象

转载于:https://my.oschina.net/710409599/blog/300445