首頁 > 文章 > web前端 > 如何在 JavaScript 中編寫 document.getElementById() 方法的簡寫？

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

王林轉載: 2023-08-27 18:53:02881瀏覽

如何在 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>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>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>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.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在 JavaScript 中從字串建立元素？下一篇：如何在 JavaScript 中從字串建立元素？

看更多