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])//中
JavaScript 编程易错点整理的更多相关文章
- JavaScript易错知识点整理
前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...
- JavaScript 易错知识点整理
本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES ...
- JavaScript易错知识点整理[转]
前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...
- forEach、map、filter、find、sort、some等易错点整理
一.常用方法解析 说起数组操作,我们肯定第一反应就是想到forEach().map().filter()等方法,下面分别阐述一下各方法的优劣. 1.forEach 1.1 基础点 forEac ...
- javaScript初学者易错点
大家好,这是我在博客园写的第一篇博文.作为一名前端开发初学者,由于经验不足,水平有限,在做项目的过程中总会遇到这样或那样的问题,每每这时候,我都比较喜欢到博客园这里来寻求解决方案,结果也总是能找到满意 ...
- ps和AI使用过程中的易错点整理
ps:1.视图工具:1)标尺2)参考线3)网格:视图-->--显示>-->网格4)修改网格:编辑-->首选项>-->参考线.网格和切片 5)放大工具:画布中单击可放 ...
- java - 并发编程易错实例
生产者消费者问题 https://juejin.im/post/5aeec675f265da0b7c072c56 notify()发生在wait()之前会怎么样?怎么处理? wati()等待条件的变化 ...
- STM32串口编程易错点
注意 串口发送函数 使用STM官方的LIB 中的库函数发送之后 加一点延时 否则会错误 接收数据不正常 正确做法是 加上等待发送完成
- JavaScript易错知识点
JavaScript易错知识点整理1.变量作用域上方的函数作用域中声明并赋值了a,且在console之上,所以遵循就近原则输出a等于2. 上方的函数作用域中虽然声明并赋值了a,但位于console之下 ...
随机推荐
- St_geometry 初始用
数据准备 点表 CREATE TABLE point_stgeom tablespace UBOSS_STS_WAREHOUSE as select car_number, longid, latid ...
- centos7下安装docker（13.3volume生命周期管理）
本章讨论:volume的备份,恢复,迁移和销毁 1.备份 通过前面的大量的实验,我们知道volume 是依赖host存在的,是host中的文件或目录,所以volume 的备份实际是对文件系统的备份. ...
- UVA11988-Broken Keyboard（数组模拟链表）
Problem UVA11988-Broken Keyboard Accept: 5642 Submit: 34937 Time Limit: 1000 mSec Problem Descripti ...
- 【转】这五种方法前四种方法只支持IE浏览器，最后一个方法支持当前主流的浏览器（火狐，IE，Chrome，Opera，Safari）
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- laravel框架入门
本文摘自网络,个人感觉写的很不错,决定收藏一下纯属本人学习之用 本文介绍如何开始使用 Laravel. 读完本文,你将学到: 如何安装 Laravel,新建 Laravel 程序,如何连接数据库: L ...
- Linux下rz/sz安装及使用方法
新搞的云服务器用SecureCRT不支持上传和下载,没有找到rz命令.记录一下如何安装rz/sz命令的方法. 一.工具说明 在SecureCRT这样的ssh登录软件里, 通过在Linux界面里输入rz ...
- mac下安装nginx及相关配置
1. 安装 Homebrew 首先 homebrew是什么?它是Mac中的一款软件包管理工具,通过brew可以很方便的在Mac中安装软件或者是卸载软件.不了解的同学看以看官网(https://br ...
- Zephyr的Power Management
1 关于Zephyr Zephyr是Linux基金会维护的微内核项目,来源于WindRiver向Zephyr捐赠的Rocket RTOS内核.主要用于开发针对物联网设备的实时操作系统. Zephyr操 ...
- 微软被传证实收购 GitHub
GitHub 是一个庞大的代码库,已经有越来越多的公司使用这个网站来共享和查看代码,其中不乏苹果.亚马逊.谷歌等大型科技公司.微软则是该网站的最大贡献者,并有超过 1000 名员工长期地将代码推送到 ...
- OpenStack中的虚拟机(/dev/mapper/centos-root)进行磁盘扩容
一.虚拟机上先扩展分区: 二.centos系统root登入,新建分区 2.1 [fdisk -l] 最大分区为/dev/sda2,说明新创建的分区将会是sda3(在后面的步骤会进行选择) 2.2 输入 ...