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元素代码:

1 <input type="button" id="btn_ok" value="Ok" onclick="..." />

就可以这样引用它:

1 //可以这样引用
2 btn_ok.onclick = function(){};
3 //或者下面也是一样的
4 window.btn_ok.style = ...;

对于name属性来说,只有某些类型的html元素具有类似的方法,比如:form,img,iframe,applet,embed,object等。在这些元素中可以通过全局变量或者document的属性来访问特定name属性的元素;如果相同name属性的有多个元素,则返回一个NodeList的类似只读数组的对象,例如如下代码:

1 <div>
2   <img name="pic" src="#" alt="pic_0" />
3   <img name="pic" src="#" alt="pic_1" />
4   <img name="pic" src="#" alt="pic_2" />
5 </div>

我们可以这样引用name为pic的元素:

1 //我们可以这样引用name为pic的元素:
2 for(x in pic)
3  console.log(pic[x].alt);
4 //或者是非"标准"语法each语句方式
5 for each(img in pic)
6  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

时间: 2024-08-09 10:33:35

JavaScript通过元素id和name直接获取元素的方法的相关文章

name值与id值在Js获取元素时的区别

1.适用范围 除base.head.html.script.meta.title标签外,id都可以用:name只适用于select.form.frame.iframe.img.a.input等中. HTML元素Input type='radio'分组,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的. 2.获取方式 取得id:document.getElementById("id"); 取得name:document.getElementsByName(&qu

Javascript 洗牌算法,打乱数组,随机获取元素

//利用洗牌算法Array.prototype.shuffle=function(){ var i,t,m=this.length; while(m){ i=Math.floor(Math.random()*m--); t=this[m]; this[m]=this[i]; this[i]=t; } return this;} var arr=[1,2,3,4,5];console.log(arr.shuffle());console.log(arr.slice(0,2));

一个类,有新增元素(add)和获取元素数量(size)方法。 启动两个线程。线程1向容器中新增数据。线程2监听容器元素数量,当容器元素数量为5时,线程2输出信息并终止

方式一: /** * 两个线程要是可见的所以要加上votalile */public class Test_01 { public static void main(String[] args) { final Test_01_Container t = new Test_01_Container(); new Thread(new Runnable() { @Override public void run() { for(int i = 0; i < 10; i++){ System.out

获取元素节点(DOM基础 )

一.DOM 简介:以一种独立于平台和语言的方式访问和修改(添加.移动.改变或移除的方法和属性)一个文档(主要是网页)的内容和结构.是表示和处理一个HTML或XML文档的常用方法. 节点的定义:D(Web网页文档)O(document对象)M(网页文档的树形结构)M中树形结构可以理解为由节点组成.把每个标签看作一个节点.   节点的分类:以一个完成的标签为例<div id ="box">测试Div</div> 元素节点:是标签<div></div

获取元素父级方法

1:parent();//获取元素的父级元素 <script type="text/javascript" src="jquery-1.11.1.js"></script> <script> $(function(){ $('span').parent().css('border','2px solid red');//获取到div元素 }) </script> </head> <body> &

Js获取元素样式值(getComputedStyle&amp;currentStyle)兼容性解决方案

因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用getComputedStyle,以及currentStyle. IE下获取元素的实际属性值使用currentStyle属性,getComputedStyle同currentStyle作用相同,但是适用于FF.opera.safari.chrome.但用这种方法在IE7,IE8,IE9获取元素属性值

jquery如何获取元素的宽度和高度

jquery如何获取元素的宽度和高度: 这当然是比较基础的问题,不过有可能初学者还是不够明了,下面就简单介绍一下. 获取元素的宽度: $(selector).width() 获取元素的高度: $(selector).height() selector是选择器,例如id.类和元素选择器登登. 原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0613/4046.html 最为原始地址是:http://www.softwhy.com/forum.ph

【鬼脸原创】JQuery获取元素的方法总结

目录 一.说明 二.获取本身 三.获取同级元素 四.获取父级元素 五.获取子级元素 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器   选择器 实例 说明 #Id $('#myId') ID选择器: 可以获取到ID为“myId”的元素,区分大小写 2.多种jQuery选择器组合 分为两部分:前半部分获取到的是一个元素集合,后半部分可以精确为一个元素,两者相结合,可以获取到想要的元素. 1)前

jquery获取元素的宽度

jquery 是一个很好用的库,封装了很多易使用的简易 api,方便开发者进行 dom 操作. 今天讨论的是获取元素的宽度,有个小坑需要踩踩,这里记录下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <style