blocks|key|3171402|text|var+$+=+function(+id+)+{+return+document.getElementById(+id+);+};

$(+'someID'+)|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3171403|这里我使用了$，但是您可以使用任何有效的变量名。|unstyled|offset|length|style|CODE|3171404|var+byId+=+function(+id+)+{+return+document.getElementById(+id+);+};

byId(+'someID'+)|3171405|entityMap^0|0|6|1|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@$G|Q|H|R|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>var $ = function( id ) { return document.getElementById( id ); };

$( 'someID' )
</code></pre>

Here I used <code>$</code>, but you can use any valid variable name.

<pre><code>var byId = function( id ) { return document.getElementById( id ); };

byId( 'someID' )
</code></pre>

blocks|key|2957426|text|<script>
var+_+=+function(eId)
{
++++return+getElementById(eId);
}
</script>

<script>
var+myDiv+=+_('id');
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2957427|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script&gt;
var _ = function(eId)
{
 return getElementById(eId);
}
&lt;/script&gt;

&lt;script&gt;
var myDiv = _('id');
&lt;/script&gt;
</code></pre>

blocks|key|2957451|text|没有内置的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2957452|如果您不介意污染全局名称空间，为什么不：|2957453|function+$e(id)+{
++++return+document.getElementById(id);
}|code-block|syntax|javascript|2957454|编辑-我将函数名改为不寻常的名称，但要简短，否则不会与jQuery或任何使用裸露$符号的其他名称冲突。|offset|length|style|CODE|2957455|entityMap^0|0|0|0|14|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

There's none built-in.

If you don't mind polluting the global namespace, why not:

<pre><code>function $e(id) {
 return document.getElementById(id);
}
</code></pre>

EDIT - I changed the function name to be something unusual, but short and not otherwise clashing with jQuery or anything else that uses a bare <code>$</code> sign.

blocks|key|264186|text|你可以很容易地自己创建速记：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|264187|function+getE(id){
+++return+document.getElementById(id);
}|code-block|syntax|javascript|264188|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can easily create shorthand easily yourself:

<pre><code>function getE(id){
 return document.getElementById(id);
}
</code></pre>

blocks|key|3171542|text|这里有几个很好的答案，有几个绕过了类似jQuery的语法，但没有一个提到实际使用jQuery。如果您不反对尝试，请查看jQuery。它让您可以像这样非常容易地选择元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3171543|By+ID|3171544|$('#elementId')|code-block|syntax|javascript|3171545|By+CSS+class：|3171546|$('.className')|3171547|By+element+type：|3171548|$('a')++//+all+anchors+on+page+
$('inputs')++//+all+inputs+on+page+
$('p+a')++//+all+anchors+within+paragaphs+on+page+|3171549|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.com/|1|http://api.jquery.com/id-selector/|2|http://api.jquery.com/class-selector/|3|http://api.jquery.com/element-selector/^0|1N|6|0|0|0|5|1|0|0|0|C|2|0|0|0|F|3|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|F|3|G|5|H|7|1E|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|M|3|N|5|H|7|1J|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|Q|3|R|5|H|7|1O|8|@]|9|@]|C|$I|J]]|$1|S|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]|12|$5|V|W|X|C|$Y|13]]|14|$5|V|W|X|C|$Y|15]]]]

There are several good answers here and several are dancing around jQuery-like syntax, but not one mentions actually using jQuery. If you're not against trying it, check out <a href="http://jquery.com/">jQuery</a>. It let's you select elements super easy like this.. 

<a href="http://api.jquery.com/id-selector/">By ID</a>:

<pre><code>$('#elementId')
</code></pre>

<a href="http://api.jquery.com/class-selector/">By CSS class</a>: 

<pre><code>$('.className')
</code></pre>

<a href="http://api.jquery.com/element-selector/">By element type</a>: 

<pre><code>$('a') // all anchors on page 
$('inputs') // all inputs on page 
$('p a') // all anchors within paragaphs on page 
</code></pre>

blocks|key|262039|text|要保存额外的字符，可能会污染字符串原型，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|262040|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+'+%2B+buildIn.name+%2B+'.prototype.'+%2B+name+%2B+'!');
++++}+else+{
++++++++if+(oldDescr)+{
++++++++++++console.warn('Replacing+'+%2B+buildIn.name+%2B+'.prototype.'+%2B+name+%2B+'+might+cause+unexpected+behaviour.');
++++++++}
++++++++Object.defineProperty(buildIn.prototype,+name,+descr);
++++}
}|code-block|syntax|javascript|262041|它可以在某些浏览器中工作，您可以通过以下方式访问元素：|262042|document.body.appendChild(
++++'footer'.绎+=+document.createElement('div')
);
'footer'.绎.textContent+=+'btw+nice+browser+:)';|262043|我几乎是随机选择了属性的名称。如果你真的想使用这个速记，我建议你想出一些更容易打字的东西。|262044|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

To save an extra character you could pollute the String prototype like this:

<pre><code>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 &amp;&amp; !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);
 }
}
</code></pre>

It works in some browsers and you can access elements this way:

<pre><code>document.body.appendChild(
 'footer'.绎 = document.createElement('div')
);
'footer'.绎.textContent = 'btw nice browser :)';
</code></pre>

I have chosen the name of the property almost randomly. If you actually wanted to use this shorthand I would suggest coming up with something easier to type.

blocks|key|3171577|text|一种快速的贡献方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3171578|HTMLDocument.prototype.e+=+document.getElementById|code-block|syntax|javascript|3171579|那就这样做：|3171580|document.e('id');|3171581|有一个问题，它不能在不允许你扩展原型的浏览器中工作(例如IE6)。|3171582|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

A quick alternative to contribute:

<pre><code>HTMLDocument.prototype.e = document.getElementById
</code></pre>

Then just do:

<pre><code>document.e('id');
</code></pre>

There's a catch, it doesn't work in browsers that don't let you extend prototypes (e.g. IE6).

blocks|key|3171597|text|(不仅按ID获取元素，而且按类获取元素的简写:P)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3171598|我使用的东西是|3171599|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%2B%2B)if(a[i].className.split('+').indexOf(s.slice(1))>=0)b.push(a[i]);
++++++++return+b;
++++}
}|code-block|syntax|javascript|3171600|用法：_(".test")返回类名为test的所有元素，_("#blah")返回id为blah的元素。|offset|length|style|CODE|3171601|entityMap^0|0|0|0|3|A|I|4|S|A|17|4|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]|$K|Y|L|Z|M|N]|$K|10|L|11|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

(Shorthand for not only getting element by ID, but also getting element by class :P)

I use something like

<pre><code>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&lt;a.length;i++)if(a[i].className.split(' ').indexOf(s.slice(1))&gt;=0)b.push(a[i]);
 return b;
 }
}
</code></pre>

Usage : <code>_(".test")</code> returns all elements with class name <code>test</code>, and <code>_("#blah")</code> returns an element with id <code>blah</code>.

blocks|key|3171620|text|如果这是在您自己的站点上，可以考虑使用像jQuery这样的库来为您提供这个和许多其他有用的速记，这些速记也可以抽象出浏览器之间的差异。就我个人而言，如果我写了足够多的代码，我会包括jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3171621|在jQuery中，语法应该是$("#someid")。如果您想要实际的DOM元素而不是jQuery包装器，那么它就是$("#someid")[0]，但是您很可能需要使用jQuery包装器来做任何事情。|style|CODE|3171622|或者，如果您在浏览器开发人员控制台中使用此工具，请研究其内置实用程序。正如其他人提到的，Chrome+JavaScript控制台包含一个$("someid")方法，您也可以在开发人员工具的“元素”视图中单击元素，然后在控制台中使用$0引用它。之前选择的元素变为$1，依此类推。|3171623|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.com/^0|K|6|0|0|E|C|1M|F|0|1W|B|37|2|3M|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@$A|W|B|X|F|G]|$A|Y|B|Z|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|10|8|@$A|11|B|12|F|G]|$A|13|B|14|F|G]|$A|15|B|16|F|G]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

If this is on your own site, consider using a library like <a href="http://jquery.com/" rel="nofollow">jQuery</a> to give you this and many other useful shorthands that also abstract away browser differences. Personally, if I wrote enough code to be bothered by the longhand, I would include jQuery.

In jQuery, the syntax would be <code>$("#someid")</code>. If you then want the actual DOM element and not the jQuery wrapper, it's <code>$("#someid")[0]</code>, but you could most likely do whatever you're after with the jQuery wrapper.

Or, if you're using this in a browser developer console, research their built-in utilities. As someone else mentioned, the Chrome JavaScript console includes a <code>$("someid")</code> method, and you can also click an element in the developer tools "Elements" view and then reference it with <code>$0</code> from the console. The previously selected element becomes <code>$1</code> and so on.

blocks|key|3171651|text|如果元素的id不与全局对象的任何属性竞争，那么就不需要使用任何函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3171652|myDiv.appendChild(document.createTextNode("Once+I+was+myDiv.+"));
myDiv.id+=+"yourDiv";
yourDiv.appendChild(document.createTextNode("But+now+I'm+yourDiv."));|code-block|syntax|javascript|3171653|编辑:但是you+‘t想要使用这个’特性‘。|offset|length|style|BOLD|3171654|entityMap^0|0|0|9|2|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Well, if the id of the element does not compete with any properties of the global object, you don't have to use any function.

<pre><code>myDiv.appendChild(document.createTextNode("Once I was myDiv. "));
myDiv.id = "yourDiv";
yourDiv.appendChild(document.createTextNode("But now I'm yourDiv."));
</code></pre>

edit: But you don't want to make use of this 'feature'.

blocks|key|2957647|text|如果这里唯一的问题是打字，也许你应该给自己弄一个带有智能感知的JavaScript编辑器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2957648|如果其目的是获得更短的代码，那么您可以考虑使用像jQuery这样的JavaScript库，或者您可以只编写自己的速记函数，例如：|2957649|function+byId(string)+{return+document.getElementById(string);}|code-block|syntax|javascript|2957650|为了获得更好的性能，我过去常常这样做。我去年学到的是，使用压缩技术，服务器会自动为你做压缩，所以我的缩短技术实际上让我的代码变得更重。现在，我很高兴输入了整个document.getElementById。|2957651|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If the only issue here is typing, maybe you should just get yourself a JavaScript editor with intellisense.

If the purpose is to get shorter code, then you could consider a JavaScript library like jQuery, or you can just write your own shorthand functions, like:

<pre><code>function byId(string) {return document.getElementById(string);}
</code></pre>

I used to do the above for better performance. What I learnt last year is that with compression techniques the server does it automatically for you, so my shortening technique was actually making my code heavier. Now I am just happy with typing the whole document.getElementById.

blocks|key|2957725|text|是的，在上使用相同的函数，在上使用相同的函数，每次使用不同的参数是重复的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2957726|var+myImage+=+document.getElementById("myImage");
var+myDiv+=+document.getElementById("myDiv");|code-block|syntax|javascript|2957727|因此，一个同时接受所有这些参数的函数是一件很好的事情：|2957728|function+getElementsByIds(/*+id1,+id2,+id3,+...+*/)+{
++++var+elements+=+{};
++++for+(var+i+=+0;+i+<+arguments.length;+i%2B%2B)+{
++++++++elements[arguments[i]]+=+document.getElementById(arguments[i]);
++++}
++++return+elements;
}|2957729|然后，您将拥有对存储在一个对象中的所有元素的引用：|2957730|var+el+=+getElementsByIds("myImage",+"myDiv");
el.myImage.src+=+"test.gif";|2957731|但您仍然需要列出所有这些ids。|2957732|如果您想使用it对所有元素执行操作，则可以进一步简化：|2957733|function+getElementsWithIds()+{
++++var+elements+=+{};
++++var+elementList+=+document.querySelectorAll("[id]");
++++for+(var+i+=+0;+i+<+elementList.length;+i%2B%2B)+{
++++++++elements[elementList[i].id]+=+elementList[i];
++++}
++++return+elements;
}|2957734|但是如果你有很多元素，调用这个函数的开销会很大。|2957735|2957736|因此，从理论上讲，如果您使用with关键字，您可以编写如下代码：|CODE|2957737|with+(getElementsByIds('myButton',+'myImage',+'myTextbox'))+{
++++myButton.onclick+=+function()+{
++++++++myImage.src+=+myTextbox.value;
++++};
}|2957738|但我不想推广with的使用。也许有更好的方法可以做到这一点。|2957739|entityMap^0|C|2|0|0|0|0|0|0|0|F|C|0|0|0|O|0|0|0|W|E|4|0|0|0|U|6|4|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1E|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1G|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1H|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1I|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|W|3|X|5|H|7|1M|8|@]|D|@]|E|$I|J]]|$1|Y|3|Z|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|1R|8|@$9|1S|A|1T|B|C]|$9|1U|A|1V|B|13]]|D|@]|E|$]]|$1|14|3|15|5|H|7|1W|8|@]|D|@]|E|$I|J]]|$1|16|3|17|5|6|7|1X|8|@$9|1Y|A|1Z|B|C]|$9|20|A|21|B|13]]|D|@]|E|$]]|$1|18|3|-4|5|6|7|22|8|@]|D|@]|E|$]]]|19|$]]

Yes, it gets repetitive to use the same function over and over each time with a different argument:

<pre><code>var myImage = document.getElementById("myImage");
var myDiv = document.getElementById("myDiv");
</code></pre>

So a nice thing would be a function that takes all those arguments at the same time:

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

Then you would have references to all your elements stored in one object:

<pre><code>var el = getElementsByIds("myImage", "myDiv");
el.myImage.src = "test.gif";
</code></pre>

But you would still have to list all those ids.

You could simplify it even more if you want all elements with ids:

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

But it would be pretty expensive to call this function if you have many elements.

<hr>

So, theoretically, if you would use the <code>with</code> keyword you could write code like this:

<pre><code>with (getElementsByIds('myButton', 'myImage', 'myTextbox')) {
 myButton.onclick = function() {
 myImage.src = myTextbox.value;
 };
}
</code></pre>

But I don't want to promote the use of <code>with</code>. Probably there's a better way to do it.

blocks|key|3171784|text|嗯，你可以创建一个速记函数，这就是我要做的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3171785|function+$(element)+{
++++return+document.getElementById(element);
}|code-block|syntax|javascript|3171786|然后当你想得到它的时候，你就会去做|3171787|$('yourid')|3171788|此外，我发现的另一个有用的技巧是，如果您想获取项ID的值或innerHTML，可以创建如下函数：|3171789|function+$val(el)+{
++++return+$(el).value;
}

function+$inner(el)+{
++++return+$(el).innerHTML;
}|3171790|希望你会喜欢!|3171791|基于这个想法，我实际上做了一个迷你的javascript库。就是Here了。|offset|length|3171792|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/xomazibu/5/^0|0|0|0|0|0|0|0|W|4|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

Well, you could create a shorthand function, that's what I do.

<pre><code>function $(element) {
 return document.getElementById(element);
}
</code></pre>

and then when you wanted to get it, you just do

<pre><code>$('yourid')
</code></pre>

Also, another useful trick that I found, is that if you want to get the value or innerHTML of an item ID, you can make functions like this: 

<pre><code>function $val(el) {
 return $(el).value;
}

function $inner(el) {
 return $(el).innerHTML;
}
</code></pre>

<h3>Hope you like it!</h3>

I actually made a kind of mini javascript library based on this whole idea.
<a href="http://jsbin.com/xomazibu/5/" rel="nofollow">Here</a> it is.

blocks|key|264324|text|id将保存到window中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|264325|HTML|264326|+<div+id='logo'>logo</div>|code-block|syntax|javascript|264327|JS|264328|logo.innerHTML;|264329|和写作是一样的：|264330|document.getElementById(+'logo'+).innerHtml;|264331|我不建议使用前一种方法，因为这不是常见的做法。|264332|entityMap^0|6|6|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|17|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|X|$]]

id's are saved to the <code>window</code>.

HTML

<pre><code> &lt;div id='logo'&gt;logo&lt;/div&gt;
</code></pre>

JS

<pre><code>logo.innerHTML;
</code></pre>

is the same as writing:

<pre><code>document.getElementById( 'logo' ).innerHtml;
</code></pre>

I don't suggest using the former method as it is not common practice.

blocks|key|264340|text|我经常使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|264341|var+byId='getElementById'
var+byClass='getElementsByClass'
var+byTag='getElementsByTag'


var+mydiv=document[byId]('div')+
/*+as+document["getElementById"]+===+document.getElementById+*/|code-block|syntax|javascript|264342|我认为它比外部函数(例如$()或byId())更好，因为你可以这样做：|offset|length|style|CODE|264343|var+link=document[byId]('list')[byClass]('li')[0][byTag]('a')[0]|264344|顺便说一句，不要使用jQuery，jQuery比document.getElementById()慢得多，像$()或byId()这样的外部函数，或者我的方法：http://jsperf.com/document-getelementbyid-vs-jquery/5|264345|entityMap|0|LINK|mutability|MUTABLE|url|http://jsperf.com/document-getelementbyid-vs-jquery/5^0|0|0|C|3|G|6|0|0|O|P|1I|3|1M|6|27|1H|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]|$I|13|J|14|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@$I|17|J|18|K|L]|$I|19|J|1A|K|L]|$I|1B|J|1C|K|L]]|9|@$I|1D|J|1E|1|1F]]|A|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

I frequently use:

<pre><code>var byId='getElementById'
var byClass='getElementsByClass'
var byTag='getElementsByTag'


var mydiv=document[byId]('div') 
/* as document["getElementById"] === document.getElementById */
</code></pre>

I think it's better than a external function (e.g. <code>$()</code> or <code>byId()</code>) because you can do things like this:

<pre><code>var link=document[byId]('list')[byClass]('li')[0][byTag]('a')[0]
</code></pre>

 Btw, don't use jQuery for this, jQuery is much, much slower than <code>document.getElementById()</code>, an external function like <code>$()</code> or <code>byId()</code>, or my method: <a href="http://jsperf.com/document-getelementbyid-vs-jquery/5" rel="nofollow">http://jsperf.com/document-getelementbyid-vs-jquery/5</a>

blocks|key|3171832|text|如果你想要一个速记函数...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3171833|<!DOCTYPE+html>
<html>

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

</html>|code-block|syntax|javascript|3171834|或|3171835|<!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>|3171836|​|3171837|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you are asking for a shorthand function... 

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;body&gt;
The content of the body element is displayed in your browser.
&lt;div id="d1"&gt;DIV&lt;/div&gt;
&lt;script&gt;
var d=document;
d.g=document.getElementById;
d.g("d1").innerHTML = "catch";
&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

or 

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;body&gt;
The content of the body element is displayed in your browser.
&lt;div id="d1"&gt;DIV&lt;/div&gt;
&lt;script&gt;
var w=window;
w["d1"].innerHTML = "catch2";
&lt;/script&gt;
&lt;/body&gt;
</code></pre>

blocks|key|2957868|text|箭头函数make更短。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2957869|var+$id+=+(id)+=>+document.getElementById(id);|code-block|syntax|javascript|2957870|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Arrow functions make is shorter.

<pre><code>var $id = (id) =&gt; document.getElementById(id);
</code></pre>

blocks|key|265923|text|包装document.querySelectorAll+...像select这样的jquery|type|unstyled|depth|inlineStyleRanges|entityRanges|data|265924|function+$(selector){
+++var+s+=+document.querySelectorAll(selector);+
+++return+s.length+>+1+?+s+:+s[0];
}

//+usage:+$('$myId')|code-block|syntax|javascript|265925|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

wrap the document.querySelectorAll ... a jquery like select

<pre><code>function $(selector){
 var s = document.querySelectorAll(selector); 
 return s.length &gt; 1 ? s : s[0];
}

// usage: $('$myId')
</code></pre>

blocks|key|3171886|text|我昨天写了这篇文章，发现它非常有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3171887|function+gid(id,+attribute)+{
++++var+x+=+'document.getElementById("'%2Bid%2B'")';
++++if(attribute)+x+%2B=+'.'%2Battribute;
++++eval('x+='+%2B+x);
++++return+x;
}|code-block|syntax|javascript|3171888|这就是你使用它的方式。|3171889|//+Get+element+by+ID
+++var+node+=+gid('someID');+//returns+<p+id='someID'+class='style'>Hello+World

//+returns+'Hello+World'
//+var+getText+=+document.GetElementById('someID').innerText;+
+++var+getText+=+gid('someID',+'innerText');+

//+Get+parent+node
+++var+parentNode+=+gid('someID',+'parentNode');|3171890|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I wrote this yesterday and found it quite useful.

<pre><code>function gid(id, attribute) {
 var x = 'document.getElementById("'+id+'")';
 if(attribute) x += '.'+attribute;
 eval('x =' + x);
 return x;
}
</code></pre>

This is how you use it.

<pre><code>// Get element by ID
 var node = gid('someID'); //returns &lt;p id='someID' class='style'&gt;Hello World&lt;/p&gt;

// returns 'Hello World'
// var getText = document.GetElementById('someID').innerText; 
 var getText = gid('someID', 'innerText'); 

// Get parent node
 var parentNode = gid('someID', 'parentNode');
</code></pre>

blocks|key|267641|text|另一个包装器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267642|​|267643|const+IDS+=+new+Proxy({},+{+
++++get:+function(target,+id)+{
++++++++return+document.getElementById(id);+}+});

IDS.camelCaseId.style.color+=+'red';
IDS['dash-id'].style.color+=+'blue';|code-block|syntax|javascript|267644|<div+id="camelCaseId">div+1</div>
<div+id="dash-id">div+2</div>|267645|267646|如果您不想使用unthinkable，请参阅上面的内容。|offset|length|267647|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.w3.org/html5/spec/browsers.html#named-access-on-the-window-object^0|0|0|0|0|0|7|B|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

Another wrapper:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const IDS = new Proxy({}, { 
 get: function(target, id) {
 return document.getElementById(id); } });

IDS.camelCaseId.style.color = 'red';
IDS['dash-id'].style.color = 'blue';</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="camelCaseId"&gt;div 1&lt;/div&gt;
&lt;div id="dash-id"&gt;div 2&lt;/div&gt;</code></pre>
</div>
</div>


This, in case you don't want to use the <a href="http://dev.w3.org/html5/spec/browsers.html#named-access-on-the-window-object" rel="nofollow noreferrer">unthinkable</a>, see above.

blocks|key|3171943|text|您可以使用如下的包装器函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3171944|const+byId+=+(id)+=>+document.getElementById(id);|code-block|syntax|javascript|3171945|或|3171946|通过将变量与document对象绑定，将document.getElementById赋值给变量。|offset|length|style|CODE|3171947|const+byId+=+document.getElementById.bind(document);|3171948|3171949|注意:在第二种方法中，如果你不用document绑定document.getElementById，你会得到错误：|3171950|Uncaught+TypeError:+Illegal+invocation|3171951|Function.bind所做的是创建一个新函数，并将其this关键字设置为您作为参数提供给Function.bind的值。|3171952|阅读Function.bind文档|3171953|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind^0|0|0|0|6|8|K|N|0|0|0|G|8|Q|N|0|0|0|D|S|4|1A|D|0|2|D|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|19|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1A|8|@$K|1B|L|1C|M|N]|$K|1D|L|1E|M|N]]|9|@]|A|$]]|$1|O|3|P|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1H|8|@$K|1I|L|1J|M|N]|$K|1K|L|1L|M|N]]|9|@]|A|$]]|$1|T|3|U|5|D|7|1M|8|@]|9|@]|A|$E|F]]|$1|V|3|W|5|6|7|1N|8|@$K|1O|L|1P|M|N]|$K|1Q|L|1R|M|N]|$K|1S|L|1T|M|N]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1U|8|@]|9|@$K|1V|L|1W|1|1X]]|A|$]]|$1|Z|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]]]

You can use a wrapper function like :
<pre><code>const byId = (id) =&gt; document.getElementById(id);
</code></pre>
Or
Assign <code>document.getElementById</code> to a variable by binding it with <code>document</code> object.
<pre><code>const byId = document.getElementById.bind(document);
</code></pre>
<hr />
Note: In second approach, If you don't bind <code>document.getElementById</code> with <code>document</code> you'll get error :
<pre><code>Uncaught TypeError: Illegal invocation
</code></pre>
What <code>Function.bind</code> does is it creates a new function with its <code>this</code> keyword set to value that you provide as argument to <code>Function.bind</code>.
Read docs for <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind" rel="nofollow noreferrer">Function.bind</a>

blocks|key|265952|text|const+$id+=+id+=>+document.getElementById(id);
...
$id('header')|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|265953|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>const $id = id =&gt; document.getElementById(id);
...
$id('header')
</code></pre>

Is there any shorthand for the JavaScript document.getElementById? Or is there any way I can define one? It gets repetitive retyping that over and over.

Javascript Shorthand for getElementById

服务器

jQuery

有没有JavaScript document.getElementById的速记？或者有没有什么我可以定义的方法？在上重复输入，在上重复输入。

问getElementById的Javascript简写
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问getElementById的Javascript简写EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问getElementById的Javascript简写
EN