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之下 ...
随机推荐
- Mac OS 安装Fiddler
Mono安装 首先,Mac下需要使用.Net编译后的程序,需要用到跨平台的方案Mono(现阶段微软已推出跨平台的方案.Net Core,不过暂时只支持控制台程序).安装程序可以从http://www. ...
- Iris框架源码阅读和分析
iris包结构简介 iris包含了很多包,下面这些是分析过程中接触到的东西. 能力有限,多多包涵,欢迎联系QQ:2922530320 一起交流 context包包含: Context (接口) con ...
- go标准库的学习-strings-字符串操作
参考https://studygolang.com/pkgdoc 导入方式: import "strings" strings包实现了用于操作字符的简单函数. 常用的几个函数: f ...
- Matlab计算的FFT与通过Origin计算的FFT
实验的过程中,经常需要对所采集的数据进行频谱分析,软件的选择对计算速度影响挺大的.我在实验过程中,通常使用Origin7.5来进行快速傅里叶变换,因为方便快捷,计算之后,绘出来的图也容易编辑.但是当数 ...
- MATLAB卷积运算(conv、conv2、convn)解释
1 conv(向量卷积运算) 所谓两个向量卷积,说白了就是多项式乘法.比如:p=[1 2 3],q=[1 1]是两个向量,p和q的卷积如下:把p的元素作为一个多项式的系数,多项式按升幂(或降幂)排列, ...
- 如何利用Skyline的TerraExplorer Pro 6.5提供的API接口实现矢量图层数据的动态投影
Skyline 支持国内常见的地图投影坐标系,包括WGS84.Beijing54.西安80.2000坐标系等,也可以自定义坐标系,比如一些做过参数变换加密的坐标系等. <!DOCTYPE htm ...
- [03] Spring "Hello World"
0.写在前面的话 本篇以一个简单的示例,描述了Spring通过容器对于Java类的装载和获取.在以下我们可以看到,有一个Java类Coder,我们全程并没有手动调用new来进行实例化,而是从Sprin ...
- PHP实现栈数据结构
利用php面向对象思想,栈的属性有top.最大存储数.和存储容器(这里利用了php数组). 代码如下:实现了入栈.出栈.遍历栈的几个方法: <?php class Stack{ const MA ...
- C#析构函数 (转载)
一.C#析构函数 1. 析构函数的定义与注意的问题析构函数用于释放被占用的系统资源.析构函数的名字由符号“-”加类名组成.使用析构函数时,应该注意下面的问题: 只能在类中使用析构函数,不能在结构中使用 ...
- NowCoder110E Pocky游戏 状压DP
传送门 题意:给出$N$个数和一个长为$M$.所有数在$[1,N]$范围之内的正整数序列$a_i$,求出这$N$个数的一种排列$p_1...p_N$使得$\sum\limits_{i=2}^M |p_ ...