Skrót JavaScript dla getElementById

Czy istnieje skrót dla document.getElementById JavaScript? Czy jest jakiś sposób, żebym mógł je zdefiniować? To staje się powtarzalny przepisywania że nad i nad .

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

$( 'someID' )

Tutaj użyłem $, ale możesz użyć dowolnej prawidłowej nazwy zmiennej.

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

byId( 'someID' )

Aby zapisać dodatkowy znak, możesz zanieczyścić prototyp String w następujący sposób:

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

Działa w niektórych przeglądarkach i możesz uzyskać dostęp do elementów w ten sposób:

document.body.appendChild(
    'footer'.绎 = document.createElement('div')
);
'footer'.绎.textContent = 'btw nice browser :)';

Nazwę nieruchomości wybrałem prawie przypadkowo. Jeśli naprawdę chcesz użyć tego skrótu, sugerowałbym wymyślenie czegoś łatwiejszego do wpisania.

Możesz łatwo stworzyć stenogramy samodzielnie:

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

Szybka alternatywa dla wniesienia wkładu:

HTMLDocument.prototype.e = document.getElementById

Następnie po prostu wykonaj:

document.e('id');

Jest pewien haczyk, nie działa w przeglądarkach, które nie pozwalają na rozszerzanie prototypów (np. IE6).

(Skrót: nie tylko pobieranie elementu przez ID, ale także pobieranie elementu po klasie: P)

Używam czegoś takiego

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

Użycie: _(".test")zwraca wszystkie elementy o nazwie klasy test, a _("#blah")zwraca element o id blah.

identyfikatory są zapisywane w window.

HTML

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

JS

logo.innerHTML;

to to samo co pisanie:

document.getElementById( 'logo' ).innerHtml;

Nie radzę stosować tej pierwszej metody, ponieważ nie jest to powszechna praktyka.

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

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

Jest tu kilka dobrych odpowiedzi, a kilka tańczy wokół składni podobnej do jQuery, ale ani jedna nie wspomina o używaniu jQuery. Jeśli nie masz nic przeciwko, wypróbuj jQuery . Pozwala Ci wybierać elementy w bardzo prosty sposób.

Według ID :

$('#elementId')

Według klasy CSS :

$('.className')

Według typu elementu :

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

Nie ma wbudowanej.

Jeśli nie masz nic przeciwko zanieczyszczaniu globalnej przestrzeni nazw, dlaczego nie:

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

EDYCJA - zmieniłem nazwę funkcji na coś niezwykłego , ale krótkiego i nie kolidującego z jQuery lub czymkolwiek innym, co używa gołego $znaku.

Tak, robi się monotonne użyć tę samą funkcję w ciągu i nad każdym z innym argumentem:

var myImage = document.getElementById("myImage");
var myDiv = document.getElementById("myDiv");

Więc fajną rzeczą byłaby funkcja, która pobiera wszystkie te argumenty w tym samym czasie:

function getElementsByIds(/* id1, id2, id3, ... */) {
    var elements = {};
    for (var i = 0; i < arguments.length; i++) {
        elements[arguments[i]] = document.getElementById(arguments[i]);
    }
    return elements;
}

Wtedy miałbyś odniesienia do wszystkich swoich elementów przechowywanych w jednym obiekcie:

var el = getElementsByIds("myImage", "myDiv");
el.myImage.src = "test.gif";

Ale nadal musiałbyś wymienić wszystkie te identyfikatory.

Możesz to jeszcze bardziej uprościć, jeśli chcesz, aby wszystkie elementy miały identyfikatory:

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

Ale wywołanie tej funkcji byłoby dość kosztowne, jeśli masz wiele elementów.

Więc teoretycznie, gdybyś użył withsłowa kluczowego, mógłbyś napisać kod w ten sposób:

with (getElementsByIds('myButton', 'myImage', 'myTextbox')) {
    myButton.onclick = function() {
        myImage.src = myTextbox.value;
    };
}

Ale nie chcę promować używania with. Prawdopodobnie jest na to lepszy sposób.

Cóż, możesz stworzyć skróconą funkcję, to właśnie robię.

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

a kiedy chciałeś to dostać, po prostu to robisz

$('yourid')

Kolejną przydatną sztuczką, którą znalazłem, jest to, że jeśli chcesz uzyskać wartość lub wewnętrzny kod HTML identyfikatora przedmiotu, możesz utworzyć takie funkcje:

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

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

Mam nadzieję że ci się spodoba!

Właściwie stworzyłem coś w rodzaju mini biblioteki javascript opartej na tym pomyśle. Tutaj jest.

Często używam:

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


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

Myślę, że to lepsze niż funkcja zewnętrzna (np. $()Lub byId()), ponieważ możesz robić takie rzeczy:

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

Btw, nie używaj do tego jQuery, jQuery jest dużo, dużo wolniejszy niż document.getElementById()funkcja zewnętrzna, taka jak $()or byId(), lub moja metoda: http://jsperf.com/document-getelementbyid-vs-jquery/5

Jeśli jest to w Twojej witrynie, rozważ użycie biblioteki takiej jak jQuery aby uzyskać ten i wiele innych przydatnych skrótów, które również odejmują różnice między przeglądarkami. Osobiście, gdybym napisał wystarczająco dużo kodu, aby zawracać sobie głowę odręcznością, dodałbym jQuery.

W jQuery składnia byłaby taka $("#someid"). Jeśli chcesz mieć rzeczywisty element DOM, a nie opakowanie jQuery, to jest $("#someid")[0], ale najprawdopodobniej możesz zrobić wszystko, czego szukasz, z opakowaniem jQuery.

Lub, jeśli używasz tego w konsoli programisty przeglądarki, sprawdź ich wbudowane narzędzia. Jak ktoś wspomniał, konsola JavaScript w przeglądarce Chrome zawiera $("someid")metodę. Możesz także kliknąć element w widoku „Elementy” narzędzi programistycznych, a następnie odwołać się do niego z $0poziomu konsoli. Poprzednio wybrany element staje się $1i tak dalej.

Jeśli jedynym problemem jest tutaj pisanie, może powinieneś po prostu kupić sobie edytor JavaScript z inteligencją.

Jeśli celem jest uzyskanie krótszego kodu, możesz rozważyć bibliotekę JavaScript, taką jak jQuery, lub możesz po prostu napisać własne skrócone funkcje, takie jak:

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

Robiłem to powyżej dla lepszej wydajności. W zeszłym roku nauczyłem się, że dzięki technikom kompresji serwer robi to automatycznie za Ciebie, więc moja technika skracania sprawiała, że ​​mój kod był cięższy. Teraz jestem zadowolony z wpisania całego document.getElementById.

Jeśli prosisz o skróconą funkcję ...

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

lub

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

Funkcja strzałek jest krótsza.

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

wrap the document.querySelectorAll ... jquery jak select

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

// usage: $('$myId')

Cóż, jeśli id ​​elementu nie konkuruje z żadnymi właściwościami obiektu globalnego, nie musisz używać żadnej funkcji.

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

edycja: ale nie chcesz korzystać z tej „funkcji”.

Kolejne opakowanie:

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>

To na wypadek, gdybyś nie chciał używać rzeczy nie do pomyślenia , patrz powyżej.

Możesz użyć funkcji opakowania, takiej jak:

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

Lub

Przypisz document.getElementById do zmiennej, wiążąc ją z documentobiektem.

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

Uwaga: w drugim podejściu, jeśli nie połączysz się document.getElementByIdz , pojawi documentsię błąd:

Uncaught TypeError: Illegal invocation

Co Function.bindrobi, to tworzy nową funkcję ze thissłowem kluczowym ustawionym na wartość, którą podajesz jako argument Function.bind.

Przeczytaj dokumentację dla Function.bind

Napisałem to wczoraj i uznałem to za przydatne.

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

Tak go używasz.

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