getElementByIdのJavascript省略形

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をチェックしてください。このように非常に簡単に要素を選択できます。

ID別：

$('#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);
}

EDIT -私は何かをする関数名を変更珍しいが、短いとそうでない場合は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;
}

次に、1つのオブジェクトに格納されているすべての要素への参照があります。

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

また、私が見つけたもう1つの便利なトリックは、アイテム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()ような外部関数、または私のメソッドよりもはるかに遅くなります。http： //jsperf.com/document-getelementbyid-vs-jquery/5$()byId()

これが自分のサイトにある場合は、jQueryなどのライブラリの使用を検討してくださいこれと、ブラウザの違いを抽象化する他の多くの便利な省略形を提供することをください。個人的には、筆記者が気になるほどのコードを書いたら、jQueryを含めます。

jQueryでは、構文は次のようになります。 $("#someid")。次に、jQueryラッパーではなく実際のDOM要素が必要な場合は、$("#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>

矢印関数の作成が短くなります。

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>

これは、unthinkableを使用したくない場合に備えて、上記を参照してください。

私はこれを昨日書きました、そしてそれは非常に役に立ちました。

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