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

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>

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

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问getElementById的Javascript简写EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问getElementById的Javascript简写
EN