Apakah kaedah querySelectorAll dan getElementsBy* kembali?

Question

getElementsByClassName (dan fungsi serupa seperti getElementsByTagName dan querySelectorAllB> dengan cara yang sama? Kembalikan tatasusunan elemen?

Sebab saya bertanya adalah kerana saya cuba menukar gaya semua elemen menggunakan getElementsByClassName. lihat di bawah.

//tidak berfungsi
document.getElementsByClassName('myElement').style.size = '100px';

//berfungsi
document.getElementById('myIdElement').style.size = '100px';

Answer 1

Anda menggunakan tatasusunan sebagai objek, getElementbyId dan getElementsByClassName ialah:

• getElementbyId akan mengembalikan objek elemen atau batal jika tiada elemen dengan ID itu ditemui
• getElementsByClassName akan mengembalikan Live HTMLCollection, yang mungkin panjangnya 0
jika tiada unsur sepadan ditemui

getElementsByClassName

https://www.w3.org/ TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

Dapatkan ElementById

https://developer.mozilla.org/en- US/docs/Web/API/Document/getElementById

Sertakan baris berikut dalam kod anda:

akan tidak berfungsi seperti yang diharapkan kerana getElementByClassName akan mengembalikan tatasusunan, dan tatasusunan itu getElementByClassName将返回一个数组，并且该数组不具有样式 属性，您可以通过迭代来访问每个元素 memang

mempunyai atribut style, anda boleh mengakses setiap dengan mengulang > elemen.

getElementById 为您工作的原因，该函数将返回直接对象。因此，您将能够访问 styleIni adalah fungsi

atribut. 🎜

Answer 2

Milik AndagetElementById 代码之所以有效，是因为 ID 必须是唯一的，因此该函数始终只返回一个元素（如果没有找到，则返回 null).

Namun, kaedah ini getElementsByClassName, getElementsByName, getItemByTagName, dan getElementsByTagNameNS Mengembalikan koleksi elemen yang boleh diubah.

Nama kaedah memberikan petunjuk: getElement 暗示单数，而getElements menyiratkan jamak .

Kaedah querySelector a> juga mengembalikan satu elemen, dan querySelectorAll code> mengembalikan koleksi yang boleh diubah.

Koleksi boleh diulang boleh jadi NodeList 或 HTMLCollectionNodeList一个> atau

HTMLCollection

satu>. getElementsByName和 querySelectorAll 均指定返回 节点列表;其他 getElementsBy* 方法 指定返回 HTMLCollection

document.getElements…(…) 读取 style dan NodeList 或 HTMLCollection 没有 style；只有 Element 具有 stylequerySelectorAll

kedua-duanya nyatakan untuk mengembalikan senarai 🎜nod code> ;Kaedah 🎜getElementsBy* lain🎜 menentukan untuk mengembalikan HTMLCollection code>, Walau bagaimanapun, sila ambil perhatian bahawa sesetengah versi penyemak imbas melaksanakan ini secara berbeza. 🎜 🎜Dua jenis koleksi ini tidak memberikan sifat yang sama seperti elemen, nod atau jenis yang serupa; inilah sebabnya membaca 🎜style…🎜(…🎜) / kod> Sebab kegagalan. Dalam erti kata lain: 🎜NodeList atau 🎜HTMLCollection tidak mempunyai 🎜style sahaja 🎜Element mempunyai 🎜style. 🎜

---

Koleksi "seperti tatasusunan" ini ialah senarai sifar atau lebih elemen yang perlu anda ulangi untuk mengaksesnya. Walaupun anda boleh mengulanginya seperti tatasusunan, sila ambil perhatian bahawa ia tidak sama dengan noreferrer">s. 数组

Dalam penyemak imbas moden anda boleh menggunakan Array.from

kemudian anda boleh menggunakan forEach dan kaedah array lain seperti kaedah lelaran Array.from;那么您可以使用 forEach:

Array.from(document.getElementsByClassName("myElement"))
  .forEach((element) => element.style.size = "100px");

Dalam pelayar lama yang tidak menyokong kaedah Array.from atau lelaran, anda masih boleh menggunakan

. Kemudian anda boleh mengulanginya seperti tatasusunan sebenar: Array.prototype.slice.call

var elements = Array.prototype.slice
    .call(document.getElementsByClassName("myElement"));

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

Anda juga boleh mengulang

sendiri, tetapi ambil perhatian bahawa dalam kebanyakan kes koleksi ini adalah

langsungNodeList 或 HTMLCollection (dokumentasi MDN, spesifikasi DOM), iaitu ia dikemas kini apabila DOM berubah. Jadi jika anda memasukkan atau mengalih keluar elemen semasa menggelung, pastikan anda tidak sengaja langkau beberapa elemen atau cipta gelung tak terhingga. Dokumentasi MDN hendaklah sentiasa menunjukkan sama ada kaedah mengembalikan koleksi langsung atau koleksi statik. Sebagai contoh,

:

document.querySelectorAll(".myElement")
  .forEach((element) => element.style.size = "100px");

NodeList 提供了一些迭代方法，例如现代浏览器中的 forEachAnda juga boleh menggunakan gelung mudah:

var elements = document.getElementsByClassName("myElement");

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

forNarasi: .childNodes menjana

live NodeList dan .children.childNodes 产生一个 live NodeList 和 .children 生成一个 live HTMLCollection menjana

live

---

HTMLCollection, jadi kedua-dua getter ini juga perlu dikendalikan dengan jaga.

Terdapat perpustakaan seperti

jQuery🎜 yang menjadikan pertanyaan DOM lebih pendek dan mencipta lapisan abstraksi di atas "elemen" dan "koleksi elemen": 🎜

$(".myElement").css("size", "100px");