Bekerja pada ide untuk pembungkus HTMLElement sederhana, saya menemukan yang berikut untuk Internet Explorer dan Chrome :
Untuk HTMLElement dengan ID yang diberikan di pohon DOM, dimungkinkan untuk mengambil div menggunakan ID-nya sebagai nama variabel. Jadi untuk div seperti
<div id="example">some text</div>
di Internet Explorer 8 dan Chrome yang dapat Anda lakukan:
alert(example.innerHTML); //=> 'some text'
atau
alert(window['example'].innerHTML); //=> 'some text'
Jadi, apakah ini berarti setiap elemen di pohon DOM dikonversi ke variabel di namespace global? Dan apakah itu juga berarti seseorang dapat menggunakan ini sebagai pengganti getElementById
metode di browser ini?
Jawaban:
Apa yang seharusnya terjadi adalah bahwa 'elemen bernama' ditambahkan sebagai sifat nyata dari
document
objek. Ini adalah ide yang sangat buruk, karena memungkinkan nama elemen untuk berbenturan dengan properti nyatadocument
.IE memperburuk situasi dengan menambahkan elemen bernama sebagai properti dari
window
objek. Ini sangat buruk karena sekarang Anda harus menghindari penamaan elemen setelah anggotadocument
atauwindow
objek yang Anda (atau kode perpustakaan lain dalam proyek Anda) mungkin ingin gunakan.Ini juga berarti bahwa elemen-elemen ini terlihat sebagai variabel seperti global. Untungnya dalam hal ini setiap global nyata
var
ataufunction
deklarasi dalam kode Anda membayangi mereka, jadi Anda tidak perlu terlalu khawatir tentang penamaan di sini, tetapi jika Anda mencoba untuk melakukan tugas ke variabel global dengan nama bentrok dan Anda lupa untuk mendeklarasikan ituvar
, Anda akan mendapatkan kesalahan di IE saat mencoba untuk menetapkan nilai ke elemen itu sendiri.Secara umum dianggap praktik buruk untuk dihilangkan
var
, serta bergantung pada unsur-unsur yang disebutkan terlihatwindow
atau sebagai global. Berpegang teguh padadocument.getElementById
, yang lebih banyak didukung dan kurang ambigu. Anda dapat menulis fungsi pembungkus sepele dengan nama yang lebih pendek jika Anda tidak suka mengetik. Either way, tidak ada gunanya menggunakan cache pencarian id-to-elemen, karena browser biasanya mengoptimalkangetElementById
panggilan untuk menggunakan pencarian cepat; yang Anda dapatkan adalah masalah saat elemen berubahid
atau ditambahkan / dihapus dari dokumen.Opera disalin IE, kemudian webkit bergabung, dan sekarang kedua praktek sebelumnya unstandardised menempatkan elemen bernama pada
document
properti, dan sebelumnya IE-satunya praktek menempatkan mereka padawindow
yang sedang distandarisasi oleh HTML5, yang pendekatan adalah untuk mendokumentasikan dan membakukan setiap praktik buruk yang ditimpakan pada kami oleh penulis peramban, menjadikan mereka bagian dari web selamanya. Jadi Firefox 4 juga akan mendukung ini.Apa itu 'elemen yang dinamai'? Apa pun dengan
id
, dan apa pun denganname
yang digunakan untuk tujuan 'mengidentifikasi': yaitu, formulir, gambar, jangkar, dan beberapa lainnya, tetapi bukan contohname
atribut yang tidak terkait lainnya , seperti nama kontrol di bidang input formulir, nama parameter di<param>
atau ketik metadata di<meta>
. 'Identifikasi'name
adalah yang harus dihindari dalam mendukungid
.sumber
name
harus dihindari" adalah dengan<input>
, di mananame
atribut memainkan peran penting dalam membentuk kunci pasangan nilai kunci untuk pengiriman formulir.name
nama kontrol seperti di kolom input formulir ...”Seperti disebutkan dalam jawaban sebelumnya perilaku ini dikenal sebagai akses bernama pada objek jendela . Nilai
name
atribut untuk beberapa elemen dan nilaiid
atribut untuk semua elemen tersedia sebagai properti dariwindow
objek global . Ini dikenal sebagai elemen bernama. Karenawindow
merupakan objek global di browser, setiap elemen bernama akan dapat diakses sebagai variabel global.Ini awalnya ditambahkan oleh Internet Explorer dan akhirnya diimplementasikan oleh semua browser lain hanya untuk kompatibilitas dengan situs yang bergantung pada perilaku ini. Menariknya, Gecko (mesin rendering Firefox) memilih untuk menerapkan ini dalam mode quirks saja, sedangkan mesin rendering lainnya membiarkannya dalam mode standar.
Namun, pada Firefox 14, Firefox sekarang mendukung akses bernama pada
window
objek dalam mode standar juga. Mengapa mereka mengubah ini? Ternyata masih banyak situs yang mengandalkan fungsi ini dalam mode standar. Microsoft bahkan merilis demo pemasaran yang berfungsi, mencegah demo bekerja di Firefox.Webkit baru-baru ini mempertimbangkan sebaliknya , mengalihkan akses bernama pada
window
objek ke mode quirks saja. Mereka memutuskan untuk tidak melakukannya dengan alasan yang sama seperti Gecko.Jadi ... gila sepertinya perilaku ini sekarang secara teknis aman untuk digunakan dalam versi terbaru dari semua browser utama dalam mode standar . Tetapi sementara akses yang diberi nama bisa terasa nyaman, seharusnya tidak digunakan .
Mengapa? Banyak alasan yang dapat dirangkum dalam artikel ini tentang mengapa variabel global buruk . Sederhananya, memiliki banyak variabel global tambahan mengarah ke lebih banyak bug. Katakanlah Anda tidak sengaja mengetik nama
var
dan kebetulan mengetikkanid
simpul DOM, KEJUTAN!Selain itu, meskipun telah distandarisasi, masih ada beberapa perbedaan dalam implementasi akses bernama browser.
name
atribut dapat diakses untuk elemen form (input, pilih, dll).<a>
tag dapat diakses melaluiname
atributnya.Dan saya yakin masih ada lagi jika Anda mencoba menggunakan akses bernama pada kasus tepi.
Seperti disebutkan dalam jawaban lain gunakan
document.getElementById
untuk mendapatkan referensi ke simpul DOM dengan nyaid
. Jika Anda perlu mendapatkan referensi ke sebuah simpul denganname
menggunakan atributnyadocument.querySelectorAll
.Tolong, tolong jangan menyebarkan masalah ini dengan menggunakan akses bernama di situs Anda. Begitu banyak pengembang web yang menyia-nyiakan waktu untuk melacak perilaku ajaib ini . Kita benar-benar perlu mengambil tindakan dan membuat mesin rendering untuk mematikan akses bernama dalam mode standar. Dalam jangka pendek itu akan merusak beberapa situs melakukan hal-hal buruk, tetapi dalam jangka panjang itu akan membantu memajukan web.
Jika Anda tertarik saya membicarakan hal ini lebih detail di blog saya - https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/ .
sumber
document.querySelectorAll
dandocument.querySelector
ketika mengakses DOM. +1 untuk saran yang baik untuk menggunakannya. Mengakses elemen oleh pemilih jelas merupakan proses yang lebih efisien.Anda harus berpegang teguh
getElementById()
pada kasus-kasus ini, misalnya:IE suka mencampur elemen-elemen dengan
name
danID
atribut - atribut di namespace global, jadi lebih baik untuk secara eksplisit tentang apa yang Anda coba dapatkan.sumber
Ya mereka melakukanya.
Diuji di Chrome 55, Firefox 50, IE 11, IE Edge 14, dan Safari 10
dengan contoh berikut:
http://jsbin.com/mahobinopa/edit?html,output
sumber
Pertanyaannya harus berbunyi :: "Apakah Tag HTML dengan ID yang disediakan menjadi DOM Elements yang dapat diakses secara global?"
Jawabannya iya!
Begitulah cara itu dimaksudkan untuk bekerja, dan itulah sebabnya ID diperkenalkan oleh W3C untuk memulai dengan .: ID dari Tag HTML dalam lingkungan skrip yang diuraikan menjadi pegangan Elemen DOM yang sesuai.
Namun, Netscape Mozilla menolak untuk menyesuaikan diri (dengan mereka mengganggu) W3C dan dengan keras kepala tetap menggunakan atribut Nama yang sudah usang untuk membuat kekacauan dan karena itu memecah fungsionalitas Scripting dan kenyamanan pengkodean yang dibawa oleh pengenalan unik ID W3C.
Setelah kegagalan Netscape Navigator 4.7, pengembang mereka semua pergi dan menyusup ke W3C, sedangkan rekan mereka menggantikan Web dengan praktik yang salah dan contoh yang salah. Memaksa penggunaan dan penggunaan kembali atribut Name yang sudah usang [! Yang tidak dimaksudkan untuk menjadi unik] setara dengan atribut ID sehingga skrip yang menggunakan ID menangani untuk mengakses elemen DOM tertentu akan dengan mudah putus!
Dan istirahat mereka lakukan karena mereka juga akan menulis dan menerbitkan pelajaran dan contoh pengkodean yang luas [browser mereka tidak akan mengenali pula] seperti
document.all.ElementID.property
bukannyaElementID.property
setidaknya membuatnya tidak efisien dan memberikan browser lebih banyak biaya jika itu tidak hanya memecahkannya di Domain HTML dengan menggunakan token yang sama untuk Nama (sekarang [1996-97], usang) dan atribut ID standar menyediakannya dengan nilai token yang sama.Mereka dengan mudah berhasil meyakinkan - saat itu - pasukan amatir amatir yang menulis kode yang bodoh bahwa Nama dan ID praktis sama, kecuali bahwa atribut ID lebih pendek dan karena itu menghemat byte dan lebih nyaman untuk kode daripada properti Nama kuno. Yang tentu saja bohong. Atau - dalam menggantikan artikel HTML yang diterbitkan, artikel meyakinkan bahwa Anda harus memberikan Nama dan ID pada tag Anda agar dapat diakses oleh mesin Scripting.
Mosaic Killers [nama sandi "Mozilla"] sangat kesal mereka berpikir "jika kita turun, begitu juga Internet".
Microsoft yang sedang naik daun - di sisi lain - begitu naif sehingga mereka berpikir mereka harus menjaga properti usang dan ditandai untuk dihapus Nama dan memperlakukannya seolah-olah itu adalah ID yang merupakan Identifier unik sehingga mereka tidak akan merusak fungsi scripting dari halaman lama yang dikodekan oleh trainee Netscape. Mereka salah besar ...
Dan kembalinya koleksi array elemen yang bertentangan juga bukan solusi untuk masalah buatan manusia ini. Sebenarnya itu mengalahkan seluruh tujuan.
Dan ini adalah satu-satunya alasan W3C berubah jelek dan memberi kami kebodohan seperti
document.getElementById
dan sintaks yang menyebalkan dari rococo sialan ... (...)sumber