开发者社区> 大熊猫侯佩> 正文

javascript中通过元素id和name直接取得元素

简介:
+关注继续查看

我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然。而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下。
在html中,一般最直接的辨别html元素使用的是name和id属性,两者有着细微的不同:id必须页面唯一,但name可以有重复。
在js中如果id名称不和内置属性或全局变量重名的话,该名称自动成为window对象的属性,而在一个html页面中的最顶层环境中有:

this === window

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

<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的类似只读数组的对象,例如如下代码:

<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】input加上disabled可以不提交name值
【JavaScript】input加上disabled可以不提交name值
64 0
js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交
js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交
266 0
从零开始学_JavaScript_系列(十一)——dojo(5)(GRID表格进阶:更新值,name,重置表结构/缓存,重绘表格)
如果没接触过dojo,或者是dojo的gridx控件,请查看我之前几篇博客,写的已经非常详细了 最重要的,更新grid中指定单元格的值,请拉到最后看(59) 至此,grid表格日常所需的常见功能已经基本完结。如果有其他功能需求,请评论提出。 (54)获得某列的name属性 代码: grid.column(2).name(); 效果: ①获得第2+1=3列的na
1162 0
js通过class name获得元素
//原理: 用document.getElementsByTagName('*');来获取所有元素,然后取得相同Class的元素。function getElementsByClassName(n) { var classElements = [], allElements = document.
688 0
学习JavaScript笔记
学习JavaScript笔记
7 0
学习JavaScript笔记
学习JavaScript笔记
6 0
+关注
大熊猫侯佩
贪吃贪睡的大熊猫侯佩
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载