JavaScript для обозначения метода getElementById

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

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") возвращает элемент с ID blah.

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

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

$('#elementId')

по классу CSS:

$('.className')

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если единственная проблема здесь-это ввод текста, возможно, Вам просто нужно получить редактор 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);

оберните документ.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."));

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

еще одна обертка:

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>

этого, в случае, если вы не хотите использовать мыслимо см. выше.