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 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
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实现长连接的方法与注意事项的问题
2013/05/10 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP查询分页的实现代码
2017/06/09 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
react-router中的属性详解
2017/06/01 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
vue实现简单图片上传
2020/06/30 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Python如何绘制日历图和热力图
2020/08/07 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
保荐人的岗位职责
2013/11/19 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
项目合作意向书范本
2014/04/01 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
股东授权委托书范文
2014/09/13 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
升职自荐书
2019/05/09 职场文书
大学生创业计划书
2019/06/24 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书