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 浮点数运算 精度问题
Oct 06 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
js断点调试经验分享
Dec 08 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Django日志模块logging的配置详解
2017/02/14 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
Python实现手势识别
2020/10/21 Python
python excel多行合并的方法
2020/12/09 Python
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
幼儿园安全责任书
2014/04/14 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
CSS基础详解
2021/10/16 HTML / CSS
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL