Viết tắt Javascript cho getElementById

Có cách viết tắt nào cho JavaScript document.getElementById không? Hoặc là có cách nào tôi có thể xác định một? Nó được gõ lại lặp đi lặp lại rằng trên và trên .

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

$( 'someID' )

Ở đây tôi đã sử dụng $, nhưng bạn có thể sử dụng bất kỳ tên biến hợp lệ nào.

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

byId( 'someID' )

Để lưu thêm một ký tự, bạn có thể bỏ qua nguyên mẫu Chuỗi như thế này:

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

Nó hoạt động trong một số trình duyệt và bạn có thể truy cập các phần tử theo cách này:

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

Tôi đã chọn tên của tài sản gần như ngẫu nhiên. Nếu bạn thực sự muốn sử dụng tốc ký này, tôi khuyên bạn nên nghĩ ra một thứ gì đó dễ nhập hơn.

Bạn có thể dễ dàng tự tạo tốc ký một cách dễ dàng:

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

Một thay thế nhanh chóng để đóng góp:

HTMLDocument.prototype.e = document.getElementById

Sau đó, chỉ cần làm:

document.e('id');

Có một điểm khó khăn, nó không hoạt động trong các trình duyệt không cho phép bạn mở rộng các nguyên mẫu (ví dụ: IE6).

(Viết tắt để không chỉ nhận phần tử theo ID mà còn nhận phần tử theo lớp: P)

Tôi sử dụng một cái gì đó như

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

Công dụng: _(".test")trả về tất cả các phần tử có tên lớp testvà _("#blah")trả về một phần tử có id blah.

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

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

id được lưu vào window.

HTML

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

JS

logo.innerHTML;

cũng giống như viết:

document.getElementById( 'logo' ).innerHtml;

Tôi không đề nghị sử dụng phương pháp cũ vì nó không phải là phương pháp phổ biến.

Có một số câu trả lời tốt ở đây và một số câu trả lời đang nhảy xung quanh cú pháp giống jQuery, nhưng không có câu trả lời nào thực sự đề cập đến việc sử dụng jQuery. Nếu bạn không phản đối việc thử nó, hãy xem jQuery . Nó cho phép bạn chọn các phần tử siêu dễ dàng như thế này ..

Theo ID :

$('#elementId')

Theo lớp CSS :

$('.className')

Theo loại phần tử :

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

Không có cài sẵn nào.

Nếu bạn không ngại làm ô nhiễm không gian tên chung, tại sao không:

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

CHỈNH SỬA - Tôi đã thay đổi tên hàm thành một cái gì đó bất thường , nhưng ngắn và không đụng độ với jQuery hoặc bất kỳ thứ gì khác sử dụng $dấu trần .

Vâng, nó được lặp đi lặp lại để sử dụng các chức năng tương tự trên và qua mỗi lần với một lập luận khác nhau:

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

Vì vậy, một điều thú vị sẽ là một hàm nhận tất cả các đối số đó cùng một lúc:

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

Sau đó, bạn sẽ có các tham chiếu đến tất cả các phần tử của bạn được lưu trữ trong một đối tượng:

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

Nhưng bạn vẫn phải liệt kê tất cả các id đó.

Bạn có thể đơn giản hóa nó hơn nữa nếu bạn muốn tất cả các phần tử có 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;
}

Nhưng sẽ khá tốn kém khi gọi hàm này nếu bạn có nhiều yếu tố.

Vì vậy, về mặt lý thuyết, nếu bạn sử dụng withtừ khóa, bạn có thể viết mã như sau:

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

Nhưng tôi không muốn quảng bá việc sử dụng with. Có lẽ có một cách tốt hơn để làm điều đó.

Chà, bạn có thể tạo một hàm tốc ký, đó là những gì tôi làm.

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

và sau đó khi bạn muốn lấy nó, bạn chỉ cần làm

$('yourid')

Ngoài ra, một thủ thuật hữu ích khác mà tôi đã tìm thấy, đó là nếu bạn muốn nhận giá trị hoặc innerHTML của ID mục, bạn có thể tạo các hàm như sau:

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

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

Hy vọng bạn thích nó!

Tôi thực sự đã tạo một loại thư viện javascript nhỏ dựa trên toàn bộ ý tưởng này. Đây rồi.

Tôi thường xuyên sử dụng:

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


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

Tôi nghĩ nó tốt hơn một hàm bên ngoài (ví dụ $()hoặc byId()) vì bạn có thể làm những việc như sau:

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

Btw, không sử dụng jQuery cho việc này, jQuery chậm hơn rất nhiều so với document.getElementById()một hàm bên ngoài như $()or byId(), hoặc phương pháp của tôi: http://jsperf.com/document-getelementbyid-vs-jquery/5

Nếu đây là trên trang web của riêng bạn, hãy xem xét sử dụng một thư viện như jQuery để cung cấp cho bạn điều này và nhiều phím tắt hữu ích khác cũng giúp loại bỏ sự khác biệt của trình duyệt. Cá nhân tôi, nếu tôi viết đủ mã để bị làm phiền bởi tay dài, tôi sẽ bao gồm jQuery.

Trong jQuery, cú pháp sẽ là $("#someid"). Sau đó, nếu bạn muốn phần tử DOM thực sự chứ không phải trình bao bọc jQuery $("#someid")[0], nhưng bạn rất có thể làm bất cứ điều gì bạn muốn với trình bao bọc jQuery.

Hoặc, nếu bạn đang sử dụng tính năng này trong bảng điều khiển dành cho nhà phát triển trình duyệt, hãy nghiên cứu các tiện ích tích hợp của chúng. Như ai đó đã đề cập, bảng điều khiển JavaScript của Chrome bao gồm một $("someid")phương thức và bạn cũng có thể nhấp vào một phần tử trong chế độ xem "Phần tử" của công cụ nhà phát triển và sau đó tham chiếu nó $0từ bảng điều khiển. Phần tử đã chọn trước đó trở thành $1và như vậy.

Nếu vấn đề duy nhất ở đây là đánh máy, có lẽ bạn nên kiếm cho mình một trình soạn thảo JavaScript với intellisense.

Nếu mục đích là để lấy mã ngắn hơn, thì bạn có thể xem xét một thư viện JavaScript như jQuery hoặc bạn chỉ có thể viết các hàm viết tắt của riêng mình, như:

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

Tôi đã từng làm những điều trên để có hiệu suất tốt hơn. Những gì tôi đã học được vào năm ngoái là với kỹ thuật nén, máy chủ sẽ tự động làm điều đó cho bạn, vì vậy kỹ thuật rút gọn của tôi thực sự đã làm cho mã của tôi nặng hơn. Bây giờ tôi chỉ hài lòng với việc nhập toàn bộ document.getElementById.

Nếu bạn đang yêu cầu một hàm viết tắt ...

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

hoặc là

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

Hàm mũi tên thực hiện ngắn hơn.

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

quấn document.querySelectorAll ... một jquery như select

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

// usage: $('$myId')

Vâng, nếu id của phần tử không cạnh tranh với bất kỳ thuộc tính nào của đối tượng toàn cục, bạn không cần phải sử dụng bất kỳ hàm nào.

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

chỉnh sửa: Nhưng bạn không muốn sử dụng 'tính năng' này.

Một trình bao bọc khác:

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>

Điều này, trong trường hợp bạn không muốn sử dụng không thể tưởng tượng , hãy xem ở trên.

Tôi đã viết điều này ngày hôm qua và thấy nó khá hữu ích.

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

Đây là cách bạn sử dụng nó.

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