document.getElementById("id").value与$("#id").val()之间的区别

....

今天在项目中遇到这么一个JS报错：

原因是代码中有这么一段：

对，就是

var otherWageChageType =document.getElementById( "otherWageChageType" ).value;

中 的 “ otherWageChageType ” 这个ID不存在导致的。

因为JS报错，导致页面死掉不动了。

如果把这句改为

$("# otherWageChageType ").val();

却不会报错 ，只是  var otherWageChageType

取得的值是 undefined ，页面不会报错，更不会死掉，只是后续用此值所要做的判断没法得到正确想要的结果而已。

就用户体验来说，用jquery的更好些。

其实 

document.getElementById("id") 得到 的是 [object HTMLDivElement] 一个DOM对象；

$("#id")  得到 的是 [object Object] 一个Jquery 对象。

明显经过封装后的jquery 对象对我们更友好点，中间经过判断优化 使得  $("#id").val() 这个方法一定不会报错。

另外再说一点，其实这两个对象是可以相互转换的哦

$( document.getElementById("id") ) 就可以由一个DOM对象变为一个Jquery 对象了；

$("#id")[0] 或是 $("#id").get(0) 就可以由一个jquery 对象变为一个DOM对象了。