今天发现一个奇怪的js写法

html代码

范围选择：<input type="range" name="range" id="r1"/><br/>

js代码

    r1.onchange = function(){    //直接这种写法都可以？为什么
      console.log(this.value);
    }

居然可以执行，那么document.getElementById("r1")的作用不是大打折扣了，起码在这个位置如此。

神奇~~~  原来如此，呵呵

我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化，貌似十分高深莫测，其实也不然。而且js本身自带了对于特殊元素的简便选取的方法，下面就为大家简单介绍下。

在html中，一般最直接的辨别html元素使用的是name和id属性，两者有着细微的不同：id必须页面唯一，但name可以有重复。

在js中如果id名称不和内置属性或全局变量重名的话，该名称自动成为window对象的属性，而在一个html页面中的最顶层环境中有:

?

1	this === window

所以如果我们写一个如下的html元素代码就可以这样引用它：

?

1 2 3 4 5

<input type= "button" id= "btn_ok" value= "Ok" onclick= "..." /> //可以这样引用 btn_ok.onclick = function (){}; //或者下面也是一样的 window.btn_ok.style = ...;

对于name属性来说，只有某些类型的html元素具有类似的方法，比如：form,img,iframe,applet,embed,object等。在这些元素中可以通过全局变量或者document的属性来访问特定name属性的元素；如果相同name属性的有多个元素，则返回一个NodeList的类似只读数组的对象,例如如下代码:

?

1 2 3 4 5 6 7 8 9 10 11

<div>    <img name= "pic" src= "#" alt= "pic_0" />    <img name= "pic" src= "#" alt= "pic_1" />    <img name= "pic" src= "#" alt= "pic_2" /> </div> //我们可以这样引用name为pic的元素： for (x in pic)   console.log(pic[x].alt); //或者是非"标准"语法each语句方式 for each(img in pic)   console.log(img.alt);

希望本文所述对大家的javascript程序设计有所帮助。

点击打开链接