getElementById에 대한 자바 스크립트 약어

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>

아이디는 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);
}

편집-나는 함수 이름을 특이한 것으로 변경 했지만 짧고 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";

그러나 여전히 모든 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')

또한 내가 찾은 또 다른 유용한 트릭은 항목 ID의 값 또는 innerHTML을 얻으려면 다음과 같은 함수를 만들 수 있다는 것입니다.

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

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

네가 좋아하길 바래!

저는이 아이디어를 바탕으로 일종의 미니 자바 스크립트 라이브러리를 만들었습니다. 여기 있습니다.

나는 자주 사용합니다 :

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는 or document.getElementById()와 같은 외부 함수 또는 내 방법 보다 훨씬 느립니다 . http://jsperf.com/document-getelementbyid-vs-jquery/5$()byId()

이것이 귀하의 사이트에 있다면 jQuery 와 같은 라이브러리 사용을 고려하십시오. 하여이 기능과 브라우저 차이를 추상화하는 다른 많은 유용한 속기를 제공 . 개인적으로 오랜 시간 동안 귀찮게 할 충분한 코드를 작성했다면 jQuery를 포함시킬 것입니다.

jQuery에서 구문은 $("#someid"). 그런 다음 jQuery 래퍼가 아닌 실제 DOM 요소를 원하면 $("#someid")[0]이지만 jQuery 래퍼를 사용하여 원하는 모든 작업을 수행 할 수 있습니다.

또는 브라우저 개발자 콘솔에서이를 사용하는 경우 기본 제공 유틸리티를 조사하십시오. 다른 사람이 언급했듯이 Chrome 자바 스크립트 콘솔에는 $("someid")메소드가 포함 되어 있으며 개발자 도구 '요소'보기에서 요소를 클릭 한 다음 $0콘솔에서 참조 할 수도 있습니다. 이전에 선택한 요소가 $1됩니다.

여기서 유일한 문제가 타이핑이라면, 아마도 당신은 인텔리 센스가있는 자바 스크립트 편집기를 얻어야 할 것입니다.

목적이 더 짧은 코드를 얻는 것이라면 jQuery와 같은 자바 스크립트 라이브러리를 고려하거나 다음과 같이 자신 만의 속기 함수를 작성할 수 있습니다.

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>

이것은 생각할 수없는 을 사용하고 싶지 않은 경우 위를 참조하십시오.

나는 어제 이것을 썼고 그것이 매우 유용하다는 것을 알았습니다.

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