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')
