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. sql server 压缩备份数据库

    转自 https://www.cnblogs.com/527289276qq/p/6273291.html 今天需要把一个省外项目的数据库从服务器上备份.拷贝到本机(跨地域传输数据库备份文件). 连上 ...

  2. Arduino IDE for ESP8266 项目(2)wifi扫描

    #include "ESP8266WiFi.h" void setup() { Serial.begin(115200); //设定WiFi为STA模式,如果先前已连接上AP,则与 ...

  3. Spring配置跨域请求

    本文主要是Spring+SpringMVC+MyBatis/MyBatis Plus框架环境,包括SpringBoot同样适用. 1.编写拦截器 package com.interceptor; im ...

  4. NodeJS之path模块

    NodeJS之path模块 常用的主要有如下工具函数: 1. path.basename(path[, ext]) 2. path.extname(path) 3. path.dirname(path ...

  5. RF

    大家在日常工作中常常解除RF模块,RF的意思就是:radio frequency的意思,就是无线电波频率的意思. RF射频范围:300KHz-300GHz; 其中小于1000HZ以内的当然是低频: 大 ...

  6. 3.0+百度地图在地图初始化的时候就弹框展示一个信息框,而不是用户点击poi时才弹出

    有些时候我们会有这样的业务:当用户根据地址跳转到地图后,希望能够立即弹框展示该poi的地址信息. 实现方法: 百度地图3.0+的类BaiduMap中提供了一个方法showInfoWindow(Info ...

  7. javaweb1(小学生四则运算)

    一.设计思想 ①设计三个页面,分别为题数设置页面,题目显示页面以及结果显示页面. ②设计题数设置页面. ③从题数设置页面接收题数,作为循环次数. ④利用随机数生成相应符合条件表达式,并存入数据库. ⑤ ...

  8. 洛谷 P2835 刻录光盘

    题目链接 https://www.luogu.org/problemnew/show/P2835 题目描述 在JSOI2005夏令营快要结束的时候,很多营员提出来要把整个夏令营期间的资料刻录成一张光盘 ...

  9. Missing value auth-url required for auth plugin password

    在控制台输入openstack相关命令时提示如下: openstack user list Missing value auth-url required for auth plugin passwo ...

  10. you-get帮助使用手册

    you-get使用手册 可选参数:   -V, --version          查看版本并退出   -h, --help             查看帮助信息 不影响使用的选项:   -i, - ...