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 相关文章推荐
setTimeout和setInterval的深入理解
Nov 08 Javascript
javascript中的事件代理初探
Mar 08 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
简单的js计算器实现
Oct 26 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
React 路由懒加载的几种实现方案
Oct 23 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 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
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
php中错误处理操作实例分析
2019/08/23 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
python常用函数详解
2016/09/13 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python对List中的元素排序的方法
2018/04/01 Python
Python格式化日期时间操作示例
2018/06/28 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
大学同学聚会邀请函
2014/01/29 职场文书
料理师求职信
2014/01/30 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
会计学毕业生求职信
2014/06/25 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
python中pymysql包操作数据库方法
2022/04/19 Python
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技