Javascript getElementById的简写

时间：2011-06-18 20:42:52

标签： javascript

JavaScript document.getElementById有简写吗？或者我有什么方法可以定义一个？重复输入 over 和 over 。

21 个答案:

答案 0 :(得分：120)

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

$( 'someID' )

这里我使用了$，但你可以使用任何有效的变量名。

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

byId( 'someID' )

答案 1 :(得分：86)

要保存额外的字符，您可能会污染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 :)';

我几乎随机选择了该物业的名称。如果你真的想用这个简写，我建议你想出一些更容易输入的东西。

答案 2 :(得分：18)

您可以轻松地轻松创建速记：

function getE(id){
   return document.getElementById(id);
}

答案 3 :(得分：14)

贡献的快速替代方案：

HTMLDocument.prototype.e = document.getElementById

然后就这样做：

document.e('id');

有一个问题，它不适用于不允许扩展原型的浏览器（例如IE6）。

答案 4 :(得分：8)

（简写不仅按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的元素。

答案 5 :(得分：7)

id已保存到window。

HTML 

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

JS 

logo.innerHTML;

与写作相同：

document.getElementById( 'logo' ).innerHtml;

我不建议使用前一种方法，因为这不常见。

答案 6 :(得分：6)

<script>
var _ = function(eId)
{
    return getElementById(eId);
}
</script>

<script>
var myDiv = _('id');
</script>

答案 7 :(得分：5)

没有内置的。

如果您不介意污染全局命名空间，为什么不：

function $e(id) {
    return document.getElementById(id);
}

编辑 - 我将函数名称更改为不正常，但是简短，而不是与jQuery或其他任何使用裸$符号的内容发生冲突

答案 8 :(得分：5)

这里有几个很好的答案，有几个围绕类似jQuery的语法跳舞，但没有人提到实际使用jQuery。如果您不反对尝试，请查看jQuery。它让你选择这样的元素非常容易..

By ID：

$('#elementId')

By CSS class：

$('.className')

By element type：

$('a')  // all anchors on page 
$('inputs')  // all inputs on page 
$('p a')  // all anchors within paragaphs on page

答案 9 :(得分：3)

是的，每次使用不同的参数时，重复使用相同的功能 over 和 over ：

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。

如果你想要带有ids的所有元素，你可以进一步简化它：

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

但我不想推广使用with。可能有更好的方法来做到这一点。

答案 10 :(得分：2)

我昨天写了这篇文章并发现它很有用。

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

这就是你使用它的方式。

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

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

// Get parent node
   var parentNode = gid('someID', 'parentNode');

答案 11 :(得分：2)

好吧，你可以创建一个速记功能，这就是我所做的。

function $(element) {
    return document.getElementById(element);
}

然后当你想要它时，你就可以了

$('yourid')

另外，我发现另一个有用的技巧是，如果你想获得商品ID的值或innerHTML，你可以制作这样的函数：

function $val(el) {
    return $(el).value;
}

function $inner(el) {
    return $(el).innerHTML;
}

希望你喜欢！

我实际上基于这个想法制作了一种迷你javascript库。 Here它是。

答案 12 :(得分：2)

我经常使用：

var byId='getElementById'
var byClass='getElementsByClass'
var byTag='getElementsByTag'


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

我认为它比外部函数（例如$()或byId()）更好，因为你可以这样做：

var link=document[byId]('list')[byClass]('li')[0][byTag]('a')[0]


顺便说一句，不要使用jQuery，jQuery比document.getElementById()慢很多，比$()或byId()这样的外部函数要慢得多，或者我的方法：http://jsperf.com/document-getelementbyid-vs-jquery/5

答案 13 :(得分：1)

如果这里唯一的问题是打字，也许你应该让自己成为一个智能感知的JavaScript编辑器。

如果目的是获得更短的代码，那么你可以考虑像jQuery这样的JavaScript库，或者你可以编写自己的速记函数，例如：

function byId(string) {return document.getElementById(string);}

我过去常做的是提高性能。我去年学到的是，通过压缩技术，服务器会自动为你做，所以我的缩短技术实际上使我的代码更重。现在我很高兴输入整个document.getElementById。

答案 14 :(得分：1)

包装document.querySelectorAll ...像select一样的jquery 

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

// usage: $('$myId')

答案 15 :(得分：1)

箭头功能使得更短。

var $id = (id) => document.getElementById(id);

答案 16 :(得分：1)

如果您要求速记功能...... 

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

或

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

答案 17 :(得分：1)

如果这是在您自己的网站上，请考虑使用像jQuery这样的库来为您提供这个以及许多其他有用的缩写，这些缩写也会消除浏览器差异。就个人而言，如果我编写了足够的代码来解决这个问题，我会包含jQuery。

在jQuery中，语法为$("#someid")。如果你想要实际的DOM元素而不是jQuery包装器，那就是$("#someid")[0]，但你很可能会用jQuery包装器做任何事情。

或者，如果您在浏览器开发者控制台中使用它，请研究其内置实用程序。正如其他人所提到的，Chrome JavaScript控制台包含$("someid")方法，您还可以单击开发人员工具“元素”视图中的元素，然后从控制台使用$0引用它。之前选择的元素变为$1，依此类推。

答案 18 :(得分：0)

好吧，如果元素的id不与全局对象的任何属性竞争，则不必使用任何函数。

myDiv.appendChild(document.createTextNode("Once I was myDiv. "));
myDiv.id = "yourDiv";
yourDiv.appendChild(document.createTextNode("But now I'm yourDiv."));

编辑：但您不想要使用此“功能”。

答案 19 :(得分：0)

另一个包装器：

const IDS = new Proxy({}, { 
    get: function(target, id) {
        return document.getElementById(id); } });

IDS.camelCaseId.style.color = 'red';
IDS['dash-id'].style.color = 'blue';
<div id="camelCaseId">div 1</div>
<div id="dash-id">div 2</div>

如果您不想使用unthinkable，请参见上文。

答案 20 :(得分：0)

您可以使用包装函数，如：

const byId = (id) => document.getElementById(id);

或

通过与document.getElementById对象绑定将document分配给变量。

const byId = document.getElementById.bind(document);

注意：在第二种方法中，如果不将document.getElementById与document绑定，则会出现错误： 

Uncaught TypeError: Illegal invocation

Function.bind的作用是创建一个新函数，其关键字this设置为您作为Function.bind的参数提供的值。

阅读Function.bind的文档

相关问题
最新问题