如何在 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() 函數

  
Using the arrow or anonymous functions to write shorthand for document.getElementById() method in JavaScript 
 
 
 
 
 
   

使用原型編寫 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 存取元素。

  
Using the  object prototypes  to write shorthand for document.getElementById() method in JavaScript 
 
 
 
 
   

使用 jQuery

jQuery 是一個 JavaScript 函式庫，允許我們編寫更具可讀性的 JavaScript 程式碼。我們可以使用 jQuery 的「$()」元素存取器透過其 id 來存取 HTML 元素。

文法

使用者可以依照以下語法使用 JQuery 編寫 document.getElementById() 方法的簡寫。

$('#id')

在上面的語法中，我們使用「#」字元來透過其 id 來存取元素。

範例

在下面的範例中，我們在標籤中新增了 JQuery CDN，以便在 HTML 中使用 JQuery。我們在 HTML 中建立了「div」元素。在 JQuery 中，我們使用「$()」存取器來存取具有 id 的元素。 “#”字元指定使用者想要透過 id 存取該元素。

   
  
Using the  jQuery to write shorthand for document.getElementById() method in JavaScript 
 
 
   

使用者學會了使用各種方法編寫 document.getElementById() 方法的簡寫。 JQuery 提供了一種簡單而簡短的程式碼格式來使用 id 存取元素。如果使用者想使用 JavaScript，他們可以根據自己的習慣使用箭頭函數或記錄物件的原型。

以上是如何在 JavaScript 中編寫 document.getElementById() 方法的簡寫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！