JavaScript 编程易错点整理

Case 1:

　　通过getElementById("id")获得是一个DOM元素节点对象；

　　通过getElementsByTagName("tagName")获得是包含多个DOM元素节点对象的数组；

　　通过getElementsByClassName("className")获得是包含多个DOM元素节点对象的数组；

　　通过getElementsByName("inputName")获得是包含多个DOM表单元素节点对象的数组；

Case 2：

　　通过各种方法获取DOM节点后，给该节点的各种属性赋值的属性的时候，赋的值要以字符串的形式，如果是赋以变量，那么这个变量的值必须是一个字符串。如下面的例子：

<body>
	<p id="p">hello world</p>	
	<button onclick="hide()">hide</button>
</body>
<script>
	function hide(){
		var p = document.getElementById("p").style.display = none;
		//注意上面的none是一个变量，但是none是undefined，所以并不能达到效果
	}
</script>

　　上面的错误可以使用下面方法改正：

<body>
	<p id="p">hello world</p>	
	<button onclick="hide()">hide</button>
</body>
<script>
	function hide(){
		//方法一 :直接给属性赋值字符串
		var p = document.getElementById("p").style.display = "none";

		//方法二 ：赋值一个值为字符串的变量给属性
		var none = "none";
		var p = document.getElementById("p").style.display = none;
		//将一个值为“none”的none变量赋值给display属性，可以达到效果
	}
</script>

Case3:

尽量使用方括号来访问对象的属性：假设有这么一段代码：

function setAttr( key, v){
	var p = document.getElementById("p1");
	p.key = v;
}
setAttr("title","this is title");

　　如果不手动测试一下，就只看代码，就很容易认为会正常运行，其实，这个代码也的确是正常运行了，也的确没报错，

　　但是，调用setAttri函数给title属性设置值并不会成功，

　　是因为传递的title或者值失败了吗？没有，参数传递是成功了的，问题就出在p.key = v; 这行代码上；

　　这是因为在调用setAttri函数的时候，虽然传递给函数的是title，但是代码执行到p.key = v的时候，会将 p节点对象里面的“key”属性的值设置为v，对的，是字符串“key”，而不是变量key，不信的话，可以在控制台打印一下 alert(document.getElementById("p1").key)，弹出内容就是“this is title”。

　　建议使用方括号来访问和操作对象属性

function setAttr( k, v){
	var p = document.getElementById("p1");
	p[k] = v;
}
setAttr("title","this is title");

Case 4:

　　JavaScript中的字符串在求长度，取某个位置的字符时，需要注意JavaScript默认使用utf-8编码：

var str = "hey中国";
console.log(str.length)//5
console.log(str.charAt(3)) //中
console.log(str[3])//中