getElementById 的 JavaScript 简写

IT技术 javascript
2021-03-14 14:12:56

JavaScript document.getElementById 有简写吗?或者有什么方法可以定义一个?它得到重复重复输入是超过

6个回答
var $ = function( id ) { return document.getElementById( id ); };

$( 'someID' )

我在这里使用了$,但您可以使用任何有效的变量名。

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

byId( 'someID' )
$如果您从不加载它们,那么使用多少个库没有区别
2021-04-25 14:12:56
只是为了记录,我曾经这样做过var $ = document.getElementById.bind(document),但bind并非在所有浏览器中都可用。也许它更快,因为我只使用本机方法。只是想添加这个。
2021-04-25 14:12:56
@Piskvor:我从不编码以适应无知。无知导致代码损坏。损坏的代码导致研究。研究导致信息。无知被治愈。
2021-05-07 14:12:56
“拥有大量有效的变量名”——你的意思是“至少有两个主要的 JS 框架已经在使用$,恭喜你也选择了它?”
2021-05-10 14:12:56
@patrick dw 我喜欢那个。特别是在那里有大量有效的变量名:)
2021-05-11 14:12:56

要保存额外的字符,您可以像这样污染 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 :)';

我几乎是随机选择了房产的名称。如果你真的想使用这个速记,我建议你想出一些更容易输入的东西。

乱 (Yì) - Unravel (简体中文)
2021-04-23 14:12:56
@Raynos:是的,在我的基准测试中,它的速度大约是常规函数的三倍。0.4µs * 3 = 1.2µs
2021-05-01 14:12:56
此外,这可能只是一个可见字符,但它会占用文件中的多个字节......
2021-05-05 14:12:56
您确实意识到这会对效率造成合理的影响。在原型上定义的 getter/setter 慢了一个数量级。
2021-05-15 14:12:56
@Alnitak:哦,对了,我没想到。此外,有些人(如我)在他们的键盘上没有一个键,所以他们会花很多时间复制粘贴。但名字并不重要。最初我将属性命名为“e”(类似于元素),但我认为某些库已经可以声明该名称。
2021-05-20 14:12:56

您可以轻松地自己轻松创建速记:

function getE(id){
   return document.getElementById(id);
}
@Sarfraz 最好将其声明为变量还是函数?它甚至重要吗?
2021-04-23 14:12:56
@ user1431627:如果变量是指函数表达式,那么它在作用域方面很重要。我的答案中发布的函数将在其执行上下文中随处可用。请参阅:stackoverflow.com/questions/1013385/...kangax.github.io/nfe
2021-04-27 14:12:56
@Sarfraz 好的,谢谢:) jQuery 在可变范围内处理这个,对吗?我问的原因是因为最重要的答案是用变量范围编写的,但您将其编写为正则函数表达式。
2021-04-29 14:12:56

一个快速的贡献替代方案:

HTMLDocument.prototype.e = document.getElementById

然后就这样做:

document.e('id');

有一个问题,它在不允许您扩展原型的浏览器(例如 IE6)中不起作用。

@ThiefMaster “永远不要做 X”是你能给出的最糟糕的建议。了解替代方案、利弊,并为每个特定问题选择最佳答案。在这种情况下扩展原型没有坏处(虽然我应该说其他答案更合适,但这个只是为了完成)
2021-04-22 14:12:56
你怎么知道它不会在某些浏览器中或将来破坏任何东西?
2021-04-26 14:12:56
@PabloFernandez:您仍然不想扩展宿主对象。如果至少有两个库想要扩展具有相同命名属性的宿主对象,那么只有第一个小心的库或最后一个粗心的库会成功。
2021-05-04 14:12:56
@walle1357:这篇文章你可能会感兴趣。
2021-05-10 14:12:56
@Robert 这显然不是最佳选择,但它一种选择。你需要考虑每个人的利弊。请记住,客户端 javascript 库开始时prototype.js做了完全相同的事情。
2021-05-16 14:12:56

id 被保存到window.

HTML

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

JS

logo.innerHTML;

和写一样:

document.getElementById( 'logo' ).innerHtml;

我不建议使用前一种方法,因为它不是常见的做法。

@Okku 因为<div id="location"></div>调用window.location将不起作用。
2021-04-22 14:12:56
我没有看到它被使用过,因为我认为这不是下注练习。但这是找到它的最短方法。
2021-05-01 14:12:56
您能否详细说明为什么不建议使用这种方法?
2021-05-12 14:12:56