如何在 JavaScript 中編寫 document.getElementById() 方法的簡寫？-js教程-PHP中文網

首頁

web前端

js教程

如何在 JavaScript 中編寫 document.getElementById() 方法的簡寫？

王林

Aug 27, 2023 pm 06:53 PM

如何在 JavaScript 中编写 document.getElementById() 方法的简写？

document.getElementById() 方法允許我們在 JavaScript 中使用其 id 來存取任何 HTML 元素。每個網頁只能包含具有單一 id 的單一 HTML 元素。

您可以使用下面的範例程式碼透過其 id 存取任何 HTML 元素。

let element = document.getElementById('id');

在上面的程式碼中，我們使用了文檔物件的getElementById()方法，並將id作為參數傳遞。

現在，如果我們需要使用 id 來存取多個元素，那麼使用 document.getElementById() 並不是一個好主意，但我們可以為其建立一個簡寫並使用它。

您可以依照下列方法為 document.getElementById() 方法建立簡寫。

使用箭頭函數表達式編寫 document.getElemenetById() 方法的簡寫

最簡單的解決方案是使用箭頭函數為 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 id="Using-the-arrow-or-anonymous-functions-to-write-shorthand-for-document-getElementById-method-in-JavaScript">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>

使用原型編寫 document.getElementById() 方法的簡寫

在 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 id="Using-the-i-object-prototypes-i-to-write-shorthand-for-document-getElementById-method-in-JavaScript">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

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 id="Using-the-i-jQuery-i-to-write-shorthand-for-document-getElementById-method-in-JavaScript">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中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。