如何在JavaScript中按名称选择ID?

时间:2017-12-14 04:08:20

标签: javascript html dom

说我有:

<div id='test1'></div>

我想简单地称之为:

test1
代码中的

。而不是:

document.getElementById('test1');
$('#test1') // if in jquery

我不想 window.test1 = $('#test1'); 我正在寻找一般解决方案。我知道我可以使用init上的函数迭代所有id,但是如果在整个程序中动态创建dom元素会怎样。我不希望每次添加dom元素时都运行将id分配给窗口的函数。

我希望test1 (以及页面上的所有ID)始终成为窗口对象的一部分。默认情况下。有没有办法做到这一点?就像有人试图访问不存在的窗口对象时,有一种方法可以注入代码,并且不管怎样,代码将执行 document.getElementById 而无需我明确地编写它。 / p>

4 个答案:

答案 0 :(得分:2)

您可以创建一个Proxy,将属性访问转换为dom查找。

const dom = new Proxy(window, {
    get(_, name) {
        return document.getElementById(name);
    }
});

dom.test1.style.position = "static"; // tada

注意:实际上不要这样做

答案 1 :(得分:1)

首先,您的问题与DOM有关,而不是Javascript。第二,不,作为现行标准,没有办法实现这一目标。当然,您可以将选择器分配给变量并重新使用它。

答案 2 :(得分:0)

因此技术上您的ID实际上已作为全局变量公开(至少在Chrome中)。打开控制台并尝试输入您的一个ID。但是,依赖于此是非常糟糕的主意

考虑一下你有一个名为window的元素的场景。那么,这不会被暴露为全局,因为它与全局window对象冲突。

有充分的理由在访问DOM时明确,并且通过尝试使其更方便而引入的认知负担无疑会让您在以后的行中咬人。

答案 3 :(得分:0)

您可以在jQuery中将窗口变量设置为: -

function (elem) {
    window['id_' + elem.attr('id')] = elem;
}

elem($("#test1"));

创建一个通用函数,以便在每次创建动态元素时添加窗口变量。但是你需要以某种方式调用创建动态变量的函数。