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 白痴级入门教程
Nov 11 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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横向重复区域显示二法
2008/09/25 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
使用Python对SQLite数据库操作
2017/04/06 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
centos7之Python3.74安装教程
2019/08/15 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
党支部承诺书范文
2014/03/28 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
就业意向书
2014/07/29 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL