Сокращение Javascript для getElementById

Есть ли сокращение для JavaScript document.getElementById? Или я могу определить его? Он получает повторяющиеся повторы, что над и над.

ОТВЕТЫ

Ответ 1

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

$( 'someID' )

Здесь я использовал $, но вы можете использовать любое допустимое имя переменной.

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

byId( 'someID' )

Ответ 2

Чтобы сохранить дополнительный символ, вы можете загрязнить прототип 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 :)';

Я выбрал имя свойства почти случайным образом. Если вы действительно хотели использовать эту стенографию, я бы предложил придумать что-то более легкое для ввода.

Ответ 3

Вы легко можете легко создать стенографию:

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

Ответ 4

Быстрая альтернатива:

HTMLDocument.prototype.e = document.getElementById

Затем просто выполните:

document.e('id');

Там есть уловка, она не работает в браузерах, которые не позволяют расширять прототипы (например, IE6).

Ответ 5

(Сокращение не только для получения элемента по идентификатору, но и для получения элемента по классу: 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.

Ответ 6

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

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

Ответ 7

Здесь есть несколько хороших ответов, а некоторые танцуют вокруг синтаксиса типа jQuery, но никто не упоминает об использовании jQuery. Если вы не против этого, посмотрите jQuery. Это позволяет вам выбирать элементы очень просто.

По идентификатору:

$('#elementId')

По классу CSS:

$('.className')

По типу элемента:

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

Ответ 8

Там нет встроенного.

Если вы не против загрязнения глобального пространства имен, почему бы и нет:

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

EDIT - я изменил имя функции как нечто необычное, но короткое и не столкнулось иначе с jQuery или чем-либо еще, использующим знак $.

Ответ 9

id сохраняются в window.

HTML

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

JS

logo.innerHTML;

совпадает с записью:

document.getElementById( 'logo' ).innerHtml;

Я не предлагаю использовать прежний метод, поскольку это не обычная практика.

Ответ 10

Да, он повторяется, чтобы использовать одну и ту же функцию по и через каждый раз с другим аргументом:

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

Но вам все равно придется перечислять все эти идентификаторы.

Вы можете упростить его, даже если вам нужны элементы all с идентификаторами:

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. Вероятно, есть лучший способ сделать это.

Ответ 11

Ну, вы можете создать сокращенную функцию, что я делаю.

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

а затем, когда вы хотите его получить, вы просто делаете

$('yourid')

Кроме того, еще один полезный трюк, который я нашел, заключается в том, что если вы хотите получить значение или innerHTML идентификатора элемента, вы можете выполнять следующие функции:

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

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

Надеюсь, вам понравится!

На самом деле я создал своего рода мини-javascript-библиотеку, основанную на этой идее. Здесь это.

Ответ 12

Я часто использую:

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]


Btw, не используйте jQuery для этого, jQuery намного медленнее, чем document.getElementById(), внешняя функция, такая как $() или byId(), или мой метод: http://jsperf.com/document-getelementbyid-vs-jquery/5

Ответ 13

Я написал это вчера и нашел это весьма полезным.

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

Ответ 14

Если это на вашем собственном сайте, подумайте об использовании библиотеки, например jQuery, чтобы дать вам это и многие другие полезные сокращения, которые также абстрактны в отличие от браузера. Лично, если бы я написал достаточно кода, чтобы беспокоиться о longhand, я бы включил jQuery.

В jQuery синтаксис будет $("#someid"). Если вам нужен фактический элемент DOM, а не оболочка jQuery, то он $("#someid")[0], но вы, скорее всего, сделаете все, что вам нужно, с помощью обертки jQuery.

Или, если вы используете это в консоли разработчика браузера, изучите свои встроенные утилиты. Как уже упоминалось, консоль Chrome JavaScript включает в себя метод $("someid"), и вы также можете щелкнуть элемент в представлении разработчика "Элементы", а затем ссылаться на него с помощью $0 с консоли. Ранее выбранный элемент становится $1 и т.д.

Ответ 15

Если здесь печатается только проблема, возможно, вам нужно просто получить редактор JavaScript с помощью intellisense.

Если целью является получение более короткого кода, то вы можете рассмотреть библиотеку JavaScript, такую ​​как jQuery, или просто написать свои собственные сокращенные функции, например:

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

Я использовал вышеизложенное для лучшей производительности. То, что я узнал в прошлом году, заключается в том, что с помощью методов сжатия сервер делает это автоматически для вас, поэтому моя техника сокращения на самом деле делает мой код более тяжелым. Теперь я просто доволен вводом всего документа document.getElementById.

Ответ 16

Если вы запрашиваете сокращенную функцию...

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

Функции стрелок сокращаются.

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

Ответ 18

оберните document.querySelectorAll... jquery как select

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

// usage: $('$myId')

Ответ 19

Ну, если идентификатор элемента не конкурирует с любыми свойствами глобального объекта, вам не нужно использовать какую-либо функцию.

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

edit: Но вы не хотите использовать эту функцию.

Ответ 20

Другая оболочка:

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>