prototype.js 扩展 document.getElementsByName()-优快云博客

本文链接：https://blog.youkuaiyun.com/manmonth2004/article/details/83492020

最近做模具标套管理时，需要手动配置列的属性数目，导致在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>