javascript通过元素id和name直接取得元素的方法


Posted in Javascript onApril 28, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery 树形结构的选择器
Feb 15 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
javascript中in运算符用法分析
Apr 28 #Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 #Javascript
chrome不支持form.submit的解决方案
Apr 28 #Javascript
javascript截取字符串小结
Apr 28 #Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 #Javascript
jQuery通过Ajax返回JSON数据
Apr 28 #Javascript
javascript实现控制文字大中小显示
Apr 28 #Javascript
You might like
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python算法学习之基数排序实例
2013/12/18 Python
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Python中的urllib模块使用详解
2015/07/07 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
使用python+whoosh实现全文检索
2019/12/09 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
J2EE面试题大全
2016/08/06 面试题
2013年高中生自我评价
2013/10/23 职场文书
2015年春节标语口号
2014/12/09 职场文书
长城英文导游词
2015/01/30 职场文书
保管员岗位职责
2015/02/14 职场文书
遗失说明具结保证书
2015/02/26 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
人民检察院起诉书
2015/05/20 职场文书
在校生证明
2015/06/17 职场文书
欠款证明
2015/06/24 职场文书