脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript通过元素id和name直接取得元素

javascript通过元素id和name直接取得元素的方法

 更新时间：2015年04月28日 12:18:32   作者：大熊猫侯佩  
这篇文章主要介绍了javascript通过元素id和name直接取得元素的方法,涉及javascript获取元素的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Avalonjs双向数据绑定与监听的实例代码

    Avalonjs双向数据绑定与监听的实例代码

    本文通过实例代码给大家介绍了Avalonjs双向数据绑定与监听的实现代码，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-06-06
  • JS求1到任意数之间的所有质数的方法详解

    JS求1到任意数之间的所有质数的方法详解

    这篇文章主要介绍了JS求1到任意数之间的所有质数，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • 纯css实现窗户玻璃雨滴逼真效果

    纯css实现窗户玻璃雨滴逼真效果

    css实现窗户上水珠效果，效果特别逼真，窗外的雨淅淅沥沥飘打在玻璃上，看起来很像模糊的窗外，斜滴的雨露，接下来给大家一起来用CSS技术实现这样一幅画面，下面给大家分享使用纯css实现窗户玻璃雨滴逼真效果，感兴趣的朋友快乐围观吧
    2015-08-08
  • 详解webpack的clean-webpack-plugin插件报错

    详解webpack的clean-webpack-plugin插件报错

    这篇文章主要介绍了详解webpack的clean-webpack-plugin插件报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • js setTimeout()函数介绍及应用以倒计时为例

    js setTimeout()函数介绍及应用以倒计时为例

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，下面有个倒计时的示例，需要的朋友可以学习下
    2013-12-12
  • webpack如何自动生成网站图标详解

    webpack如何自动生成网站图标详解

    这篇文章主要给大家介绍了关于webpack如何自动生成网站图标的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • JS技巧动手实现红包兔子雨效果示例详解

    JS技巧动手实现红包兔子雨效果示例详解

    这篇文章主要为大家介绍了JS技巧动手实现红包兔子雨效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • js瀑布流布局的实现

    js瀑布流布局的实现

    这篇文章主要为大家详细介绍了js瀑布流布局的实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • js中Array.sort()利用零值多维排序

    js中Array.sort()利用零值多维排序

    本文主要介绍了js中Array.sort()利用零值多维排序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • JS+CSS绘制棋盘格的示例代码

    JS+CSS绘制棋盘格的示例代码

    在这篇文章中，将为大家展示如何使用css Flex-box和一些JavaScript来设计棋盘。文中的示例代码讲解详细，感兴趣的可以了解一下
    2022-05-05

最新评论