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