`
toyota2006
  • 浏览: 552385 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

prototype.js 扩展 document.getElementsByName()

阅读更多

    最近做模具标套管理时,需要手动配置列的属性数目,导致在jsp页面上需要通过标签的name属性来获得一个数组标签对象,从而做些业务上的判断,公司经常用的prototype.js,随想在js上添加一个document.getElementsByName()的简写方式,类似$()。



Js代码
//此代码放入prototype.js中   
function $S() {    
  var results = [], element;     
  for (var i = 0; i < arguments.length; i++) { // 可以传入多个参数   
    element = arguments[i];      
    if (typeof element == 'string') // 如果参数的类型是字符串         
      element = document.getElementsByName(element);    
      results.push(Element.extend(element)); // 将得到的对象加入results数组   
  }   
  // 如果只返回一个对象,直接返回该对象,如果返回了多个对象,则返回包含所有这些对象的数组   
  return results.length < 2 ? results[0] : results;   
}  
//此代码放入prototype.js中
function $S() {	
  var results = [], element;  
  for (var i = 0; i < arguments.length; i++) { // 可以传入多个参数
    element = arguments[i];   
    if (typeof element == 'string')	// 如果参数的类型是字符串		
      element = document.getElementsByName(element); 
      results.push(Element.extend(element)); // 将得到的对象加入results数组
  }
  // 如果只返回一个对象,直接返回该对象,如果返回了多个对象,则返回包含所有这些对象的数组
  return results.length < 2 ? results[0] : results;
}

测试如下:



Js代码
<html>   
<script src="D:/test/prototype.js" type="text/javascript"></script>   
<SCRIPT language="JavaScript">   
  
function oncl(){   
    var e = $S('abc','abec');   
    for(i=0;i<e.length;i++){   
        for(j=0;j<e[i].length;j++)   
            alert(e[i][j].value);   
    }   //多个参数   
  
    var d = $S('abc');   
    for(i=0;i<d.length;i++){        
        alert(d[i].value);   
    }   //单个参数   
}   
</SCRIPT>   
<body>   
<form method="post" name="info">   
<input type="text" name="abc" id="abc1" value="11" />   
<input type="text" name="abc" id="abc2" value="12" />   
<input type="text" name="abc" id="abc2" value="13" />   
<input type="text" name="abc" id="abc2" value="14" />   
<input type="text" name="abc" id="abc2" value="15" />   
  
<input type="text" name="abec" id="abc2" value="105" />   
<input type="text" name="abec" id="abc2" value="150" />   
<input type="text" name="abec" id="abc2" value="1150" />   
<input type="text" name="abec" id="abc2" value="125" />   
<input type="text" name="abec" id="abc2" value="115" />   
<input type="text" name="abec" id="abc2" value="1855" />   
<input type="button" value="sub" onClick="oncl()" />   
</form>   
</body>   
</html>  
分享到:
评论

相关推荐

    document.getElementsByName()的用法

    ### document.getElementsByName() 的用法详解 在Web开发中,JavaScript提供了多种方法来选取HTML文档中的元素,以便开发者能够实现对页面动态操作的需求。其中`document.getElementsByName()`与`document....

    document.getElementsByName和document.getElementById 在IE与FF中不同实现

    ^) 但是对于document.getElementsByName 与document.getElementById 这个两个方法,IE中是并没有严格区分 ID 与 Name 的,比如: [removed] function useGetElementsByNameWithId(id) { var eles = d

    document.all还是document.getElementsByName?

    代码如下:(wuhen注:document.all是ie特有的属性,不是万维网标准) 当页面上的控件同名且多个的时候,你首先做的是什么?判断长度?的确,从程序的严密角度出发,我们是需要判断长度,而且有长度和没长度是两种引用方法....

    javascript document 对象的用法大全

    它属于浏览器的`window`对象的一个属性,可以通过`window.document`或者直接使用`document`来访问。`document`对象允许JavaScript开发者动态地访问并更新网页的内容、结构以及样式。 #### 二、Document 对象的属性 ...

    js document对象详解

    JS 的 document 对象详解 作为 JavaScript 脚本语言中最重要的对象之一,document 对象提供了大量的属性和方法来操作和控制 HTML 文档。下面是对 document 对象的详细介绍。 document 对象属性 1. document.title...

    javascript document对象详细介绍

    ### JavaScript Document对象详解 #### 一、概述 在Web开发中,`document`对象是浏览器提供的核心对象之一,它代表了当前加载的HTML文档,并且提供了访问和操作文档中的元素和内容的方法。通过`document`对象,...

    JS的document_详细介绍及用法

    此外,`document`对象还有许多其他属性和方法,如`document.forms`用于访问表单,`document.images`用于访问图像,以及`document.getElementsByName()`和`getElementsByTagName()`方法用于按名称或标签名查找元素。...

    innerHTML 和 getElementsByName 在IE下面的bug 的解决

    innerHTML和getElementsByName是JavaScript中用于操作和查询DOM(文档对象模型)的两个常用方法。这两个方法在不同的浏览器中可能会有不同的表现,尤其是在早期版本的Internet Explorer(IE)浏览器中,存在一些已知...

    JavaScript中document用法小结

    JavaScript 中 document 对象用法小结 JavaScript 中的 document 对象是一个非常重要的对象,它提供了大量的属性和方法来操作 HTML 文档。下面是对 document 对象的一些常用属性和方法的总结。 属性 1. `document...

    JAVASCRIPT-DOCUMENT方法大全.pdf

    4. `document.getElementsByName(Name)`: 根据Name属性值查找所有匹配的元素,返回一个NodeList集合。 5. `document.body.appendChild(oTag)`: 将一个元素添加到`&lt;body&gt;`元素的末尾。 6. `document.body`: 访问`...

    JavaScript的document方法汇总

    ### JavaScript的document方法汇总 在Web开发中,`document`对象是浏览器提供的核心对象之一,它代表当前加载的HTML文档,并提供了与文档交互的各种方法和属性。本文将详细介绍`document`对象的一些常用方法及其...

    document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById

    在编写JavaScript代码时,应尽量避免依赖`document.all`,并确保在跨浏览器环境中使用`getElementById()`时,元素ID是唯一的。如果需要根据`name`属性查找元素,应使用`getElementsByName()`,而如果需要按标签名...

    document属性和方法.txt

    var elements = document.getElementsByName("example"); ``` ##### 5. `document.body.appendChild(oTag)` 用于向文档的body元素添加新的子元素。 - **语法**: ```javascript document.body.appendChild(oTag...

    JS:document.all的用法

    然而,需要注意的是,`document.all`在标准浏览器中可能不受支持,因此在实际项目中,更推荐使用`document.getElementById`、`document.getElementsByName`等标准方法来访问DOM元素,以确保代码的兼容性和可维护性。

    IE中getElementsByName()对有些元素无效的解决方案

    document.getElementsByName(‘someName’) 返回一个节点列表(数组) 注意:在IE下有些节点是没有name 属性的,就是用document.getElementsByName获取不到的。只有下面的tag有name属性: A, APPLET, attribute, ...

    javascript 的Document属性和方法集合

    - `document.getElementsByName(Name)`: 根据指定的name属性值查找并返回一组元素对象。 - `document.body.appendChild(oTag)`: 向`&lt;body&gt;`元素添加一个新的子元素。 3. **body对象** - `document.body`: 表示...

    javasxript_document对象详解.txt

    ### JavaScript Document 对象详解 #### 一、Document 对象简介 在JavaScript中,`Document`对象是构成浏览器文档对象模型(DOM)的核心部分之一。它提供了对网页文档结构的访问和控制能力,允许开发者通过脚本...

    document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all第1/2页

    在JavaScript中,DOM(Document Object Model)是网页内容的结构化表示,允许我们通过编程方式访问和操作页面上的元素。本文将深入探讨`document.all`与`getElementById`、`getElementsByName`、`...

Global site tag (gtag.js) - Google Analytics