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])//中

　　

JavaScript 编程易错点整理的更多相关文章

  1. JavaScript易错知识点整理

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  2. JavaScript 易错知识点整理

    本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES ...

  3. JavaScript易错知识点整理[转]

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  4. forEach、map、filter、find、sort、some等易错点整理

    一.常用方法解析   说起数组操作,我们肯定第一反应就是想到forEach().map().filter()等方法,下面分别阐述一下各方法的优劣. 1.forEach 1.1 基础点   forEac ...

  5. javaScript初学者易错点

    大家好,这是我在博客园写的第一篇博文.作为一名前端开发初学者,由于经验不足,水平有限,在做项目的过程中总会遇到这样或那样的问题,每每这时候,我都比较喜欢到博客园这里来寻求解决方案,结果也总是能找到满意 ...

  6. ps和AI使用过程中的易错点整理

    ps:1.视图工具:1)标尺2)参考线3)网格:视图-->--显示>-->网格4)修改网格:编辑-->首选项>-->参考线.网格和切片 5)放大工具:画布中单击可放 ...

  7. java - 并发编程易错实例

    生产者消费者问题 https://juejin.im/post/5aeec675f265da0b7c072c56 notify()发生在wait()之前会怎么样?怎么处理? wati()等待条件的变化 ...

  8. STM32串口编程易错点

    注意   串口发送函数 使用STM官方的LIB 中的库函数发送之后 加一点延时   否则会错误  接收数据不正常 正确做法是  加上等待发送完成

  9. JavaScript易错知识点

    JavaScript易错知识点整理1.变量作用域上方的函数作用域中声明并赋值了a,且在console之上,所以遵循就近原则输出a等于2. 上方的函数作用域中虽然声明并赋值了a,但位于console之下 ...

随机推荐

  1. P1019 单词接龙

    单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合部分合为一 ...

  2. Expires和Cache-Control的理解

    最近在学Nginx,学到有个地方式设置响应头信息,其中有两项是设置Expires和Cache-Control,来设置缓存时间,后来发现"并没有什么卵用",于是就搜了下资料,把整个思 ...

  3. POJ 2828 Buy Tickets（单点更新） 详细题解和思路

    题意:给n个人插队,输出最后的队伍情况(题意写的有些粗糙) 思路:第一点:在最后的队伍中,我们唯一能确定的是最后一个人一定能排到指定位置.那么,倒数第二个是在最后一个基础上确定位置的,这样一层一层的倒 ...

  4. P2626 斐波那契数列（升级版）（合数的质数分解， 大数为素数的概率十分小的利用）

    题目背景 大家都知道,斐波那契数列是满足如下性质的一个数列: f(1)=1f(1) = 1 f(1)=1 f(2)=1f(2) = 1f(2)=1 f(n)=f(n−1)+f(n−2)f(n) = f ...

  5. python中.py和.pyw文件的区别

    :本文为博主原创文章,未经博主允许不得转载. 以下是摘录自百度问题的答案: 严格来说,它们之间的不同就只有一个:视窗运行它们的时候调用不同的执行档案. 视窗用 python.exe 运行 .py ,用 ...

  6. ARM汇编语言基础

    ARM 与 Thumb 寄存器对应关系 PC寄存器: ARM状态为R15,Thumb状态为PC LR寄存器: ARM状态为R14,Thumb状态为LR SP寄存器: ARM状态为R13,Thumb状态 ...

  7. oracle 把查询结果插入到表中几种方式

    转载:Oracle中把一个查询结果插入到一张表中 以下是信息留存: 一.Oracle数据库中,把一张表的查询结果直接生成并导入一张新表中. 例如:现有只有A表,查询A表,并且把结果导入B表中.使用如下 ...

  8. Foreach循环输出索引值

    循环输邮索引值,使用for是没有任何问题: class Bh { public string[] str { get; set; } public void TestFor() { ; i < ...

  9. kafka学习2：kafka集群安装与配置

    在前一篇:kafka学习1:kafka安装 中,我们安装了单机版的Kafka,而在实际应用中,不可能是单机版的应用,必定是以集群的方式出现.本篇介绍Kafka集群的安装过程: 一.准备工作 1.开通Z ...

  10. java.lang.IllegalStateException: Failed to load property source from location 'classpath:/application-dev.yml'

    如果你的项目没有配置错误,配置文件名称也正常,还出现这个问题,那一定是你的yml文件编码的问题 先附上一张项目架构图 当我启动服务器寻找配置文件的时候,服务器提示这样的错误信息 java.lang.I ...