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

      

  • 相关阅读:
    ffmpeg合并视频+音频
    You-Get和youtube-dl
    【会声会影】初装会声会影时,必要的设置
    【会声会影】视频导出、输出时,如何设置参数
    【会声会影】导入的srt字幕文件,如何快速批量调整字体及大小
    把h264文件快速包装成mp4格式
    Notepad++正则表达式——去掉srt字幕文件的时间轴
    百度地图API的网页使用
    ASPCMS_判断语句if标签的使用
    Grid布局
  • 原文地址:https://www.cnblogs.com/-beyond/p/7707376.html
Copyright © 2020-2023  润新知