Javascript скорочення для getElementById

Чи існує якийсь скорочений текст для документа JavaScript.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).

(Стенографія не тільки отримання елемента за ідентифікатором, але й отримання елемента за класом: 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")повертає елемент з ідентифікатором blah.

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

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

ідентифікатори зберігаються в 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";

Але вам все одно доведеться перерахувати всі ці ідентифікатори.

Ви можете спростити це ще більше, якщо хочете всі елементи з ідентифікаторами:

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

Крім того, ще один корисний трюк, який я знайшов, полягає в тому, що якщо ви хочете отримати значення або 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.

Або, якщо ви використовуєте це в консолі розробника браузера, досліджуйте їх вбудовані утиліти. Як хтось уже згадував, консоль JavaScript JavaScript включає $("someid")метод, а також ви можете натиснути елемент у вікні розробника "Елементи", а потім посилатися на нього з $0консолі. Вибраний раніше елемент стає $1тощо.

Якщо єдине питання тут - це введення тексту, можливо, вам просто слід отримати собі редактор JavaScript з intellisense.

Якщо мета - отримати коротший код, ви можете розглянути бібліотеку JavaScript, як jQuery, або ви можете просто написати свої власні функції скорочень, наприклад:

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

Раніше я робив вищезазначене для кращої роботи. Що я дізнався минулого року, це те, що за допомогою методів стиснення сервер робить це автоматично для вас, тому моя техніка скорочення насправді зробила мій код важчим. Тепер я просто задоволений введенням цілого документа. 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 ... такий jquery, як select

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

// usage: $('$myId')

Ну, якщо ідентифікатор елемента не конкурує з будь-якими властивостями глобального об'єкта, вам не доведеться використовувати жодну функцію.

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