JavaScript通过元素id和name直接获取元素的方法
概览:
偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用。
虽然说这种用法不是标准用法,推荐使用 document.getElementById(id);document.getElementByName(name); ,但也是一种新发现,先记录下来,以备后用。
本文讲述了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的元素:
//我们可以这样引用name为pic的元素:
for(x in pic)
console.log(pic[x].alt);
//或者是非"标准"语法each语句方式
for each(img in pic)
console.log(img.alt);
其他同行的观点:
①这个最初是 IE
里面的,后来 firefox
chrome
好像也支持了。不建议使用,这个不是标准里面的,将来不一定支持。
②可以直接这样写的id.style.display="inline"
;使用id
相当于直接成为了window
对象的属性,使用window.id
可以获取,但是不推荐这种写法,还是用getElementById
或者querySelector
好。
③getElementById getElementByTagName等方法都是DOM Core的组成部分,并不专属于js,支持DOM的任何一种程序设计语言都支持他们,比如XML编写出来的文档。还有HTML-DOM,比如onclick属性,他们在DOM Core出现很久之前就为人们所熟悉了。你举的这个例子就是属于HTML-DOM,比如,我们可以把下面的语句:document.getElementById('form')
简化为 document.form
,类似的element.getAttribute('src')
简化为element.src
.HTML-DOM通常更短,但是只能用来处理web文档。
我在实践过程中发现的问题:
①在HTML元素属性如onclick的JavaScript中直接用id获取元素没有问题;
②在<script></script>内的JavaScript中直接使用id获取元素:如果被引用HTML元素在form窗体标记内,解析用id获取的元素时报异常undefined;如果被引用HTML元素不在form窗体标记内,则解析没有问题。
参考链接:http://www.jb51.net/article/65099.htm
JavaScript通过元素id和name直接获取元素的方法的更多相关文章
- name值与id值在Js获取元素时的区别
1.适用范围 除base.head.html.script.meta.title标签外,id都可以用:name只适用于select.form.frame.iframe.img.a.input等中. H ...
- javascript中通过元素id和name直接取得元素
我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下. 在html中,一般最直接的 ...
- 一个类,有新增元素(add)和获取元素数量(size)方法。 启动两个线程。线程1向容器中新增数据。线程2监听容器元素数量,当容器元素数量为5时,线程2输出信息并终止
方式一: /** * 两个线程要是可见的所以要加上votalile */public class Test_01 { public static void main(String[] args) { ...
- javascript获取元素的计算样式
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
- JavaScript的DOM操作获取元素的大小
通过 style 内联获取元素的大小 需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高,如果有获取:如果没有则返回空. <!DOCTYPE html> ...
- JavaScript中的获取元素的方法
通过id获取元素 document.getElementById(id名字) 通过标签获取元素 document/元素.getElementsByTagName(标签名) 通过css选择器获取元素 d ...
- Js获取元素样式值(getComputedStyle¤tStyle)兼容性解决方案
因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用 ...
- 各浏览器对使用 document.id 和 document.name 获取对象的支持存在差异
标准参考 无. 问题描述 各浏览器使用 document.id 和 document.name 方法获取对象引用的支持存在差异. 造成的影响 某些浏览器中通过 document.id 和 docume ...
- JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
随机推荐
- Atitit sql计划任务与查询优化器--统计信息模块
Atitit sql计划任务与查询优化器--统计信息模块 每一个统计信息的内容都包含以上三部分的内容. 我们依次来分析下,通过这三部分内容SQL Server如何了解该列数据的内容分布的. a.统计信 ...
- 2017预防bug的重要性
Bug,中文名缺陷.一个让软件测试员兴奋,让开发人员头疼的词.来源二次大战期间,一个称为"马克二型"的计算机,由于天气过热,硬件跟不上导致死机.最后发现是因为飞蛾,被继电器电死,将 ...
- Package Configurations的使用示例
SSIS提供Package Configurations功能,能够动态修改配置数据,使package执行不同的变量,从不同的connection中获取数据,而这些变化,不需要修改Package,不需要 ...
- WPF绘制折线
WPF后台绘制折线,填充到一个GRID下 private void btnPreview_Click(object sender, RoutedEventArgs e) { GridImg.Child ...
- 谈谈基于OAuth 2.0的第三方认证 [上篇]
对于目前大部分Web应用来说,用户认证基本上都由应用自身来完成.具体来说,Web应用利用自身存储的用户凭证(基本上是用户名/密码)与用户提供的凭证进行比较进而确认其真实身份.但是这种由Web应用全权负 ...
- 创建 VXLAN - 每天5分钟玩转 OpenStack(111)
前面我们讨论了 VXLAN 的理论知识,并且在 ML2 中完成了相关配置.今天将通过 Web UI 创建 vxlan100_net 并观察节点网络结构的变化. 打开菜单 Admin -> Net ...
- 创建第一个 local network(I) - 每天5分钟玩转 OpenStack(80)
在 ML2 配置文件中 enable local network 后,本节将开始创建第一个 local network. 我们将通过 Web GUI 创建第一个 local network. 首先确保 ...
- 交叉验证(Cross Validation)原理小结
交叉验证是在机器学习建立模型和验证模型参数时常用的办法.交叉验证,顾名思义,就是重复的使用数据,把得到的样本数据进行切分,组合为不同的训练集和测试集,用训练集来训练模型,用测试集来评估模型预测的好坏. ...
- 前端编码风格规范之 JavaScript 规范
JavaScript 规范 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域.这 ...
- 基于keepalived搭建MySQL的高可用集群
MySQL的高可用方案一般有如下几种: keepalived+双主,MHA,MMM,Heartbeat+DRBD,PXC,Galera Cluster 比较常用的是keepalived+双主,MHA和 ...