document.getElementById() 方法允許我們在 JavaScript 中使用其 id 來存取任何 HTML 元素。每個網頁只能包含具有單一 id 的單一 HTML 元素。
您可以使用下面的範例程式碼透過其 id 存取任何 HTML 元素。
let element = document.getElementById('id');
在上面的程式碼中，我們使用了文檔物件的getElementById()方法，並將id作為參數傳遞。
現在，如果我們需要使用 id 來存取多個元素，那麼使用 document.getElementById() 並不是一個好主意，但我們可以為其建立一個簡寫並使用它。
您可以依照下列方法為 document.getElementById() 方法建立簡寫。
最簡單的解決方案是使用箭頭函數為 document.getElementById() 方法建立簡寫。我們可以建立一個箭頭函數，以 id 作為參數，並在箭頭函數體中使用 document.getElementById() 方法存取元素後傳回該元素。
您可以按照下面的語法使用箭頭或匿名函數來編寫 document.getElementById() 方法的簡寫。
let get = (id) => document.getElementById(id);
let element = get('element_id');
在上面的語法中，我們建立了 get() 箭頭函數，它以 id 作為參數，使用 document.getElementById() 方法和 id 存取元素，然後傳回它。
在下面的範例中，我們使用匿名箭頭函數為 document.getElementById() 方法建立簡寫。在程式碼中，使用者可以觀察到我們不需要每次使用 id 存取元素時都編寫“document.getElementById()”，因為我們可以使用 get() 函數
<html>
<body>
<h3>Using the arrow or anonymous functions to write shorthand for document.getElementById() method in JavaScript </h3>
<div id = "output"> </div> <br>
<div id = "test"> </div>
<script>
let get = (id) => document.getElementById(id);
let output = get('output');
output.innerHTML += "This text is written in the div with id equal to output. <br>";
let test = get('test');
test.innerHTML += "This text is written in the div with an id equal to the test. <br>";
</script>
</body>
</html>
在 JavaScript 中，大多數事物都是對象，每個對像都包含其原型。同樣，原型也是一個包含創建原型鏈的原型的物件。我們可以為物件的原型添加方法或屬性並且可以使用它。在這裡，我們將使用「document.getElementById」值來為「document」物件新增一個屬性。之後，我們可以使用該屬性透過 id 存取元素。
使用者可以依照以下語法使用物件原型編寫 document.getElementById() 方法的簡寫。
HTMLDocument.prototype.get = document.getElementById;
let output = document.get('output');
在上面的語法中，我們使用「HTMLDocument」物件來存取文件物件的原型。我們已將“get”屬性新增至文檔物件中。
在下面的範例中，我們將「get」屬性新增至 HTML 文檔對象，並將 document.getElementById() 方法指定為值。
現在，我們可以使用「document」物件（如「document.get()」）來存取 get 屬性。我們可以將 id 作為「get」屬性的參數傳遞，以便透過 id 存取元素。
<html>
<body>
<h3>Using the <i> object prototypes </i> to write shorthand for document.getElementById() method in JavaScript </h3>
<div id = "output"> </div>
<div id = "test"> </div>
<script>
HTMLDocument.prototype.get = document.getElementById;
let output = document.get('output');
output.innerHTML += "The output div accessed by id using the get prototype. <br>";
let test = document.get('test');
output.innerHTML += "The test div accessed by id using the get prototype. <br>";
</script>
</body>
</html>
jQuery 是一個 JavaScript 函式庫，允許我們編寫更具可讀性的 JavaScript 程式碼。我們可以使用 jQuery 的「$()」元素存取器透過其 id 來存取 HTML 元素。
使用者可以依照以下語法使用 JQuery 編寫 document.getElementById() 方法的簡寫。
$('#id')
在上面的語法中，我們使用「#」字元來透過其 id 來存取元素。
在下面的範例中，我們在
標籤中新增了 JQuery CDN，以便在 HTML 中使用 JQuery。我們在 HTML 中建立了「div」元素。在 JQuery 中，我們使用「$()」存取器來存取具有 id 的元素。 “#”字元指定使用者想要透過 id 存取該元素。<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h3>Using the <i> jQuery</i> to write shorthand for document.getElementById() method in JavaScript </h3>
<div id = "test"> </div>
<script>
$('#test').html('This div is accessed via id using jQuery.');
</script>
</body>
</html>
使用者學會了使用各種方法編寫 document.getElementById() 方法的簡寫。 JQuery 提供了一種簡單而簡短的程式碼格式來使用 id 存取元素。如果使用者想使用 JavaScript，他們可以根據自己的習慣使用箭頭函數或記錄物件的原型。
以上是如何在 JavaScript 中編寫 document.getElementById() 方法的簡寫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
