getElementById的Java语言缩写

JavaScript document.getElementById有速记吗？还是有什么我可以定义的方法？它得到重复重复输入是在和超过。

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

$( 'someID' )

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

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

我几乎是随机选择属性的名称。如果您确实想使用此速记，我建议您提出一些更易于键入的内容。

您可以自己轻松创建简写：

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。

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

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

ID已保存到中window。

的HTML

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

JS

logo.innerHTML;

与写作相同：

document.getElementById( 'logo' ).innerHtml;

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

这里有几个很好的答案，有几个正在围绕类似jQuery的语法跳舞，但实际上没有人提到使用jQuery。如果您不反对尝试，请查看jQuery。这样，您就可以选择超级简单的元素。

按编号：

$('#elementId')

通过CSS类：

$('.className')

按元素类型：

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

没有内置的。

如果您不介意污染全局名称空间，为什么不这样做：

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

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

是的，它会重复使用相同的功能了，并在用不同的参数，每次：

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

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

好吧，您可以创建一个简写函数，这就是我要做的。

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

然后当您想要得到它时，您只需

$('yourid')

另外，我发现的另一个有用的技巧是，如果要获取项目ID的值或innerHTML，则可以编写如下函数：

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()）更好，因为您可以执行以下操作：

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

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

如果这是您自己的网站，请考虑使用jQuery之类的库来为您提供此功能以及许多其他有用的速记方式，这些速记方式也可以消除浏览器差异。就个人而言，如果我写了足够多的代码以免被长手打扰，那么我将包括jQuery。

在jQuery中，语法为$("#someid")。如果您想要的是实际的DOM元素而不是jQuery包装器，则为$("#someid")[0]，但是您很可能会使用jQuery包装器执行任何操作。

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

如果这里唯一的问题是键入，也许您应该让自己成为一个具有intellisense的JavaScript编辑器。

如果目的是获得较短的代码，则可以考虑使用像jQuery这样的JavaScript库，也可以只编写自己的速记函数，例如：

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

我过去常常这样做是为了获得更好的性能。我去年了解到的是，利用压缩技术，服务器可以为您自动执行压缩，因此我的缩短技术实际上使我的代码更重了。现在，我很高兴输入整个document.getElementById。

如果您要使用简写功能...

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

箭头函数make较短。

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

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

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

// usage: $('$myId')

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

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

编辑：但你不希望利用这个“功能”的。

另一个包装器：

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>

如果您不想使用无法想象的方法，请参见上文。

我昨天写了这篇文章，发现它非常有用。

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