資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 JavaScript 中為 document.getElementById() 方法編寫簡寫？
document.getElementById() 方法允許我們使用其 ID 在 JavaScript 中訪問任何 HTML 元素。每個網頁只能包含一個具有唯一 ID 的 HTML 元素。
您可以使用以下示例程式碼來訪問任何使用其 ID 的 HTML 元素。
let element = document.getElementById('id');
在上面的程式碼中，我們使用了 document 物件的 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() 方法建立簡寫。在程式碼中，使用者可以觀察到，我們不需要每次都編寫“document.getElementById()”來使用 ID 訪問元素，因為我們可以使用 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”物件新增一個具有“document.getElementById”值的屬性。之後，我們可以使用該屬性透過 ID 訪問元素。
語法
使用者可以按照以下語法使用物件原型為 document.getElementById() 方法編寫簡寫。
HTMLDocument.prototype.get = document.getElementById;
let output = document.get('output');
在上面的語法中，我們使用了“HTMLDocument”物件來訪問 document 物件的原型。我們向 document 物件添加了“get”屬性。
示例
在下面的示例中，我們在 HTML document 物件中添加了“get”屬性，並將 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 以將 jQuery 與 HTML 一起使用。我們在 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，他們可以根據自己的喜好使用箭頭函式或 document 物件的原型。
833 次瀏覽
