脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Javascript数组及类数组相关原理详解

    Javascript数组及类数组相关原理详解

    这篇文章主要介绍了Javascript数组及类数组相关原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • 换肤测试程序js脚本

    换肤测试程序js脚本

    换肤测试程序js脚本...
    2007-01-01
  • 微信小程序实现表单验证

    微信小程序实现表单验证

    这篇文章主要为大家详细介绍了微信小程序实现表单验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript双问号(??)操作符用法详解

    JavaScript双问号(??)操作符用法详解

    在现代JavaScript开发中,处理变量默认值是一个常见但容易引发bug的操作,很多开发者可能都遇到过这样的问题：使用||设置默认值时,意外覆盖了0、''等合法值,这时候,ES2020引入的双问号操作符（??）就能完美解决这类问题,本文将带您全面掌握这个操作符的使用场景和高级技巧
    2025-04-04
  • 探讨：JavaScript ECAMScript5 新特性之get/set访问器

    探讨：JavaScript ECAMScript5 新特性之get/set访问器

    这篇文章主要介绍了探讨：JavaScript ECAMScript5 新特性之get/set访问器 的相关资料,需要的朋友可以参考下
    2016-05-05
  • JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    JS在TextArea光标位置插入文字+移动光标到文字末尾，Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性，具体实现如下，感兴趣的朋友可以参考下哈
    2013-06-06
  • JavaScript单一职责原则深入分析

    JavaScript单一职责原则深入分析

    这篇文章主要介绍了理解JavaScript单一职责原则，单一职责原则（SRP：Single responsibility principle）又称单一功能原则，面向对象五个基本原则（SOLID）之一，下文更多相关介绍感兴趣的小伙伴可以参考一下
    2022-08-08
  • egg.js的基本使用实例

    egg.js的基本使用实例

    本文主要介绍了egg.js的基本使用实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 浅谈javascript函数式编程

    浅谈javascript函数式编程

    你是否知道JavaScript其实也是一个函数式编程语言呢？本文将教你如何利用JavaScript的函数式特性。
    2015-09-09
  • javascript for循环从入门到偏门(效率优化+奇特用法)

    javascript for循环从入门到偏门(效率优化+奇特用法)

    for循环是非常基础的javascript知识，但由于JS太灵活了，所以可能出现一些让初学者崩溃的写法。我决定由浅入深的解释一下for循环，算是给比我还新手的新手解惑吧，少走弯路
    2012-08-08

最新评论