cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menulis trengkas untuk kaedah document.getElementById() dalam JavaScript?

Bagaimana untuk menulis trengkas untuk kaedah document.getElementById() dalam JavaScript?

王林
王林ke hadapan
2023-08-27 18:53:02953semak imbas

Kaedah

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

document.getElementById() membolehkan kami mengakses mana-mana elemen HTML menggunakan idnya dalam JavaScript. Setiap halaman web hanya boleh mengandungi satu elemen HTML dengan satu id.

Anda boleh menggunakan contoh kod di bawah untuk mengakses mana-mana elemen HTML mengikut idnya. 

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

Dalam kod di atas, kami telah menggunakan kaedah getElementById() objek dokumen dan lulus id sebagai parameter.

Sekarang, jika kita perlu mengakses berbilang elemen menggunakan id, maka menggunakan document.getElementById() bukanlah idea yang baik, tetapi kita boleh mencipta singkatan untuknya dan menggunakannya.

Anda boleh mencipta trengkas untuk kaedah document.getElementById() seperti berikut.

Gunakan ungkapan fungsi anak panah untuk menulis singkatan kaedah document.getElemenetById()

Penyelesaian paling mudah ialah menggunakan fungsi anak panah untuk mencipta trengkas bagi kaedah document.getElementById(). Kita boleh mencipta fungsi anak panah yang mengambil id sebagai parameter dan mengembalikan elemen selepas mengaksesnya menggunakan kaedah document.getElementById() dalam badan fungsi anak panah.

Tatabahasa

Anda boleh mengikuti sintaks di bawah untuk menulis document.getElementById() trengkas untuk kaedah menggunakan anak panah atau fungsi tanpa nama. 

let get = (id) => document.getElementById(id);
let element = get('element_id');

Dalam sintaks di atas, kami mencipta fungsi anak panah get() yang mengambil id sebagai parameter, mengakses elemen menggunakan kaedah dan id document.getElementById() dan kemudian mengembalikannya.

Contoh

Dalam contoh di bawah, kami menggunakan fungsi anak panah tanpa nama untuk mencipta trengkas bagi kaedah document.getElementById(). Dalam kod tersebut, pengguna boleh melihat bahawa kami tidak perlu menulis "document.getElementById()" setiap kali kami mengakses elemen menggunakan id kerana kami boleh menggunakan fungsi 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>

Gunakan prototaip untuk menulis singkatan kaedah document.getElementById()

Dalam JavaScript, kebanyakan perkara adalah objek, dan setiap objek mengandungi prototaipnya. Begitu juga, prototaip ialah objek yang mengandungi prototaip yang mencipta rantaian prototaip. Kita boleh menambah kaedah atau harta kepada prototaip objek dan boleh menggunakannya. Di sini kita akan menambah harta pada objek "dokumen" menggunakan nilai "document.getElementById". Selepas itu, kita boleh menggunakan atribut ini untuk mengakses elemen dengan id.

Tatabahasa

Pengguna boleh menggunakan prototaip objek untuk menulis singkatan kaedah document.getElementById() mengikut sintaks berikut. 

HTMLDocument.prototype.get = document.getElementById;
let output = document.get('output');

Dalam sintaks di atas, kami menggunakan objek "HTMLDocument" untuk mengakses prototaip objek dokumen. Kami telah menambah sifat "dapat" pada objek dokumen.

Contoh

Dalam contoh di bawah, kami menambah atribut "get" pada objek dokumen HTML dan menentukan kaedah document.getElementById() sebagai nilainya.

Kini, kita boleh mengakses harta get menggunakan objek "document" (seperti "document.get()"). Kita boleh menghantar id sebagai parameter atribut "get" untuk mengakses elemen dengan 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>

Menggunakan jQuery

​​>

jQuery ialah perpustakaan JavaScript yang membolehkan kami menulis kod JavaScript yang lebih mudah dibaca. Kita boleh mengakses elemen HTML dengan idnya menggunakan pengakses elemen "$()" jQuery.

Tatabahasa

Pengguna boleh menggunakan JQuery untuk menulis singkatan kaedah document.getElementById() mengikut sintaks berikut. 

$('#id')

Dalam sintaks di atas, kami menggunakan aksara "#" untuk mengakses elemen mengikut idnya.

Contoh

Dalam contoh di bawah, kami telah menambahkan JQuery CDN dalam teg

untuk menggunakan JQuery dalam HTML. Kami mencipta elemen "div" dalam HTML. Dalam JQuery, kami menggunakan pelengkap "$()" untuk mengakses elemen dengan id. Aksara "#" menentukan bahawa pengguna ingin mengakses elemen dengan 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>

Pengguna belajar menggunakan pelbagai kaedah untuk menulis singkatan kaedah document.getElementById(). JQuery menyediakan format kod ringkas dan ringkas untuk mengakses elemen menggunakan id. Jika pengguna ingin menggunakan JavaScript, mereka boleh menggunakan fungsi anak panah atau merekodkan prototaip objek mengikut keutamaan mereka sendiri.

Atas ialah kandungan terperinci Bagaimana untuk menulis trengkas untuk kaedah document.getElementById() dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk mencipta elemen daripada rentetan dalam JavaScript?Artikel seterusnya：Bagaimana untuk mencipta elemen daripada rentetan dalam JavaScript?

Artikel berkaitan

Lihat lagi