Javascript简写为getElementById

有没有JavaScript的document.getElementById的简写? 或者有什么办法可以定义一个? 它重复重复键入一遍一遍

 var $ = function( id ) { return document.getElementById( id ); }; $( 'someID' ) 

这里我用$ ,但是你可以使用任何有效的variables名。

 var byId = function( id ) { return document.getElementById( id ); }; byId( 'someID' ) 

要保存一个额外的字符,你可能会像这样污染String原型:

 pollutePrototype(String, '绎', { configurable: false, // others must fail get: function() { return document.getElementById(this); }, set: function(element) { element.id = this; } }); function pollutePrototype(buildIn, name, descr) { var oldDescr = Object.getOwnPropertyDescriptor(buildIn.prototype, name); if (oldDescr && !oldDescr.configurable) { console.error('Unable to replace ' + buildIn.name + '.prototype.' + name + '!'); } else { if (oldDescr) { console.warn('Replacing ' + buildIn.name + '.prototype.' + name + ' might cause unexpected behaviour.'); } Object.defineProperty(buildIn.prototype, name, descr); } } 

它可以在一些浏览器中使用,你可以这样访问元素:

 document.body.appendChild( 'footer'.绎 = document.createElement('div') ); 'footer'.绎.textContent = 'btw nice browser :)'; 

我几乎随机select了房产的名称。 如果你真的想要使用这个简写,我会build议提供一些更容易input的东西。

您可以轻松地轻松创build简写:

 function getE(id){ return document.getElementById(id); } 

快速替代贡献:

 HTMLDocument.prototype.e = document.getElementById 

然后只是做:

 document.e('id'); 

有一个问题,它不适用于不允许你扩展原型的浏览器(例如IE6)。

(不仅是通过ID获取元素的速记,而且还通过类获取元素:P)

我使用类似的东西

 function _(s){ if(s.charAt(0)=='#')return [document.getElementById(s.slice(1))]; else if(s.charAt(0)=='.'){ var b=[],a=document.getElementsByTagName("*"); for(i=0;i<a.length;i++)if(a[i].className.split(' ').indexOf(s.slice(1))>=0)b.push(a[i]); return b; } } 

用法: _(".test")返回类名为test所有元素, _("#blah")返回id为blah的元素。

这里有几个很好的答案,其中有几个是围绕类似jQuery的语法跳舞,但没有一个提到实际使用jQuery。 如果您不反对尝试,请查看jQuery 。 让你select这样的元素非常容易

按ID :

 $('#elementId') 

通过CSS类 :

 $('.className') 

按元素types :

 $('a') // all anchors on page $('inputs') // all inputs on page $('p a') // all anchors within paragaphs on page 
 <script> var _ = function(eId) { return getElementById(eId); } </script> <script> var myDiv = _('id'); </script> 

没有内置的

如果你不介意污染全局命名空间,为什么不:

 function $e(id) { return document.getElementById(id); } 

编辑 – 我改变了函数的名称是不寻常的 ,但短,而不是与jQuery或其他任何使用裸$符号冲突。

ID的保存到window

HTML

  <div id='logo'>logo</div> 

JS

 logo.innerHTML; 

和写作一样:

 document.getElementById( 'logo' ).innerHtml; 

我不build议使用以前的方法,因为这不是一般的做法。

是的,它重复使用相同的函数,每次都有不同的参数:

 var myImage = document.getElementById("myImage"); var myDiv = document.getElementById("myDiv"); 

所以一个好的东西是一个函数,它同时需要所有的参数:

 function getElementsByIds(/* id1, id2, id3, ... */) { var elements = {}; for (var i = 0; i < arguments.length; i++) { elements[arguments[i]] = document.getElementById(arguments[i]); } return elements; } 

然后你可以引用你存储在一个对象中的所有元素:

 var el = getElementsByIds("myImage", "myDiv"); el.myImage.src = "test.gif"; 

但是你仍然需要列出所有这些ID。

如果你想要所有带有ID的元素,你可以更简化它:

 function getElementsWithIds() { var elements = {}; var elementList = document.querySelectorAll("[id]"); for (var i = 0; i < elementList.length; i++) { elements[elementList[i].id] = elementList[i]; } return elements; } 

但是如果你有很多元素,调用这个函数将会非常昂贵。


所以,理论上,如果你使用with关键字,你可以这样写代码:

 with (getElementsByIds('myButton', 'myImage', 'myTextbox')) { myButton.onclick = function() { myImage.src = myTextbox.value; }; } 

但我不想推广使用。 可能有更好的方法来做到这一点。

那么,你可以创build一个速记function,这就是我所做的。

 function $(element) { return document.getElementById(element); } 

然后当你想得到它,你只是做

 $('yourid') 

此外,我发现另一个有用的技巧是,如果你想获得一个项目ID的值或innerHTML,你可以做这样的function:

 function $val(el) { return $(el).value; } function $inner(el) { return $(el).innerHTML; } 

希望你喜欢!

我实际上是基于这个想法制作了一个迷你的JavaScript库。 在这里 。

我经常使用:

 var byId='getElementById' var byClass='getElementsByClass' var byTag='getElementsByTag' var mydiv=document[byId]('div') /* as document["getElementById"] === document.getElementById */ 

我认为它比外部函数(例如$()byId()byId()因为你可以这样做:

 var link=document[byId]('list')[byClass]('li')[0][byTag]('a')[0] 

顺便说一句,不要使用jQuery,jQuery比document.getElementById()慢得多,像$()byId()这样的外部函数,或者我的方法: http : byId() -VS-的jquery / 5

如果这是你自己的网站,可以考虑使用像jQuery这样的库来为你提供这个以及许多其他的有用的简写,这些简写同样能够抽象出浏览器的差异。 就个人而言,如果我写了足够的代码被慢慢困扰,我会包括jQuery。

在jQuery中,语法是$("#someid") 。 如果你想要的是实际的DOM元素而不是jQuery包装器,那么它就是$("#someid")[0] ,但是你可能会用jQuery包装器来做任何事情。

或者,如果您在浏览器开发人员控制台中使用此function,请研究其内置实用程序。 正如别人提到的,Chrome浏览器JavaScript控制台包含一个$("someid")方法,您也可以在开发人员工具“元素”视图中单击一个元素,然后从控制台用$0引用它。 先前选定的元素变成$1等等。

如果这里唯一的问题是键入,也许你应该让自己的智能感知JavaScript编辑器。

如果目的是为了获得较短的代码,那么你可以考虑一个JavaScript库,如jQuery,或者你可以写自己的速记function,如:

 function byId(string) {return document.getElementById(string);} 

我曾经做过以上的更好的performance。 我去年学到的是使用压缩技术,服务器自动为你做,所以我的缩短技术实际上使我的代码更重。 现在我只是打字整个document.getElementById感到高兴。

如果您要求速记function…

 <!DOCTYPE html> <html> <body> The content of the body element is displayed in your browser. <div id="d1">DIV</div> <script> var d=document; dg=document.getElementById; dg("d1").innerHTML = "catch"; </script> </body> </html> 

要么

 <!DOCTYPE html> <html> <body> The content of the body element is displayed in your browser. <div id="d1">DIV</div> <script> var w=window; w["d1"].innerHTML = "catch2"; </script> </body> 

箭头function使得更短。

 var $id = (id) => document.getElementById(id); 

那么,如果元素的id不与全局对象的任何属性竞争,则不必使用任何函数。

 myDiv.appendChild(document.createTextNode("Once I was myDiv. ")); myDiv.id = "yourDiv"; yourDiv.appendChild(document.createTextNode("But now I'm yourDiv.")); 

编辑:但你不想利用这个“function”。

包装document.querySelectorAll …像一个jQuery的select

 function $(selector){ var s = document.querySelectorAll(selector); return s.length > 1 ? s : s[0]; } // usage: $('$myId')