Properti navigasi DOM sangat bagus ketika elemen berdekatan satu sama lain. Bagaimana jika tidak?
Ada metode pencarian tambahan untuk itu
Jika suatu elemen memiliki atribut <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>3, kita bisa mendapatkan elemen menggunakan metode <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>4, di mana pun itu
Contohnya
<div id="elem"> <div id="elem-content">Element</div> </div> <script> // get the element let elem = document.getElementById('elem'); // make its background red elem.style.background = 'red'; </script>
Juga, ada variabel global yang dinamai oleh <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>3 yang mereferensikan elemen tersebut
<div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>
… Itu kecuali kita mendeklarasikan variabel JavaScript dengan nama yang sama, maka itu akan diutamakan
<div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> alert(elem); // 5 </script>
Tolong jangan gunakan variabel global bernama id untuk mengakses elemen
Perilaku ini dijelaskan , tetapi didukung terutama untuk kompatibilitas
Peramban mencoba membantu kami dengan menggabungkan ruang nama JS dan DOM. Itu bagus untuk skrip sederhana, disisipkan ke dalam HTML, tetapi umumnya bukan hal yang baik. Mungkin ada konflik penamaan. Juga, ketika seseorang membaca kode JS dan tidak memiliki tampilan HTML, tidak jelas dari mana asal variabel tersebut
Di sini, di tutorial kami menggunakan <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>_3 untuk secara langsung mereferensikan suatu elemen untuk singkatnya, ketika sudah jelas dari mana elemen itu berasal
Dalam kehidupan nyata <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>_7 adalah metode yang disukai
<div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>3 harus unik
<div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>3 harus unik. Hanya ada satu elemen dalam dokumen dengan <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>3 yang diberikan
Jika ada beberapa elemen dengan <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>3 yang sama, maka perilaku metode yang menggunakannya tidak dapat diprediksi, e. g. <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>7 dapat mengembalikan elemen tersebut secara acak. Jadi harap patuhi aturan dan pertahankan <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>3 unik
Hanya <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>7, bukan <div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> alert(elem); // 5 </script>5
Metode <div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> alert(elem); // 5 </script>_6 hanya dapat dipanggil pada objek <div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> alert(elem); // 5 </script>7. Itu mencari <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>3 yang diberikan di seluruh dokumen
Sejauh ini, metode yang paling serbaguna, <div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> alert(elem); // 5 </script>_9 mengembalikan semua elemen di dalam <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>0 cocok dengan pemilih CSS yang diberikan
Di sini kita mencari semua elemen <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>_1 yang merupakan anak terakhir
<ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>
Metode ini memang ampuh, karena setiap pemilih CSS dapat digunakan
Dapat menggunakan pseudo-class juga
Pseudo-class di pemilih CSS seperti <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>2 dan <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>3 juga didukung. Misalnya, <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>_4 akan mengembalikan koleksi dengan elemen yang penunjuknya sudah selesai sekarang (dalam urutan bersarang. dari <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>5 terluar hingga yang paling bersarang)
Panggilan ke <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>_6 mengembalikan elemen pertama untuk pemilih CSS yang diberikan
Dengan kata lain, hasilnya sama dengan <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>7, tetapi yang terakhir mencari semua elemen dan memilih satu, sedangkan <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>8 hanya mencari satu. Jadi lebih cepat dan juga lebih pendek untuk menulis
Metode sebelumnya sedang mencari DOM
Tidak mencari apa-apa, itu hanya memeriksa apakah <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>0 cocok dengan pemilih CSS yang diberikan. Ia mengembalikan <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>_0 atau <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>1
Metode ini berguna ketika kita mengulangi elemen (seperti dalam array atau sesuatu) dan mencoba memfilter elemen yang menarik bagi kita
Contohnya
<a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>
Leluhur suatu unsur adalah. induk, induk dari induk, induknya dan seterusnya. Leluhur bersama-sama membentuk rantai induk dari unsur ke atas
Metode <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>2 mencari leluhur terdekat yang cocok dengan pemilih CSS. <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>0 itu sendiri juga termasuk dalam pencarian
Dengan kata lain, metode <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>_4 naik dari elemen dan memeriksa setiap orang tua. Jika cocok dengan pemilih, maka pencarian berhenti, dan leluhur dikembalikan
Contohnya
<h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>
Ada juga metode lain untuk mencari node berdasarkan tag, kelas, dll
Hari ini, sebagian besar adalah sejarah, karena <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>5 lebih kuat dan lebih pendek untuk ditulis
Jadi di sini kami membahasnya terutama untuk kelengkapan, sementara Anda masih dapat menemukannya di skrip lama
- <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>6 mencari elemen dengan tag yang diberikan dan mengembalikan koleksinya. Parameter <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>_7 juga bisa berupa bintang <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>8 untuk “tag apa saja”
- <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>9 mengembalikan elemen yang memiliki kelas CSS tertentu
- <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>0 mengembalikan elemen dengan atribut <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>1 yang diberikan, untuk seluruh dokumen. Sangat jarang digunakan
Contohnya
// get all divs in the document let divs = document.getElementsByTagName('div');
Mari temukan semua <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>_2 tag di dalam tabel
<table id="table"> <tr> <td>Your age:</td> <td> <label> <input type="radio" name="age" value="young" checked> less than 18 </label> <label> <input type="radio" name="age" value="mature"> from 18 to 50 </label> <label> <input type="radio" name="age" value="senior"> more than 60 </label> </td> </tr> </table> <script> let inputs = table.getElementsByTagName('input'); for (let input of inputs) { alert( input.value + ': ' + input.checked ); } </script>
Jangan lupa surat <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>_3
Pengembang pemula terkadang lupa huruf <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>3. Artinya, mereka mencoba menelepon <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>_5 alih-alih <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>6
Huruf <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>_3 tidak ada di <div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> alert(elem); // 5 </script>6, karena mengembalikan elemen tunggal. Tapi <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>_9 mengembalikan kumpulan elemen, jadi ada <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>3 di dalam
Ini mengembalikan koleksi, bukan elemen
Kesalahan pemula lainnya yang tersebar luas adalah menulis
// doesn't work document.getElementsByTagName('input').value = 5;
Itu tidak akan berhasil, karena membutuhkan kumpulan input dan memberikan nilai padanya daripada ke elemen di dalamnya
Kita harus mengulangi koleksi atau mendapatkan elemen berdasarkan indeksnya, lalu menetapkan, seperti ini
// should work (if there's an input) document.getElementsByTagName('input')[0].value = 5;
Mencari // get all divs in the document let divs = document.getElementsByTagName('div');1 elemen
<div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>0
Semua metode // get all divs in the document let divs = document.getElementsByTagName('div');_2 mengembalikan koleksi langsung. Koleksi semacam itu selalu mencerminkan keadaan dokumen saat ini dan "pembaruan otomatis" saat berubah
Pada contoh di bawah ini, ada dua skrip
- Yang pertama membuat referensi ke koleksi // get all divs in the document let divs = document.getElementsByTagName('div');3. Sampai sekarang, panjangnya adalah // get all divs in the document let divs = document.getElementsByTagName('div');4
- Skrip kedua berjalan setelah browser memenuhi satu lagi // get all divs in the document let divs = document.getElementsByTagName('div');3, jadi panjangnya adalah // get all divs in the document let divs = document.getElementsByTagName('div');6
<div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>_1
Sebaliknya, // get all divs in the document let divs = document.getElementsByTagName('div');_7 mengembalikan koleksi statis. Ini seperti susunan elemen yang tetap
Jika kita menggunakannya, maka kedua skrip menghasilkan // get all divs in the document let divs = document.getElementsByTagName('div');4
<div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>_2
Sekarang kita dapat dengan mudah melihat perbedaannya. Koleksi statis tidak bertambah setelah munculnya // get all divs in the document let divs = document.getElementsByTagName('div');9 baru dalam dokumen
Ada 6 metode utama untuk mencari node di DOM
MetodeCari menurut. Dapat memanggil elemen?Live?<a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>5CSS-selector✔-// get all divs in the document let divs = document.getElementsByTagName('div');7CSS-selector✔-<div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> alert(elem); // 5 </script>6<div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name // ...but we can access it using square brackets: window['elem-content'] </script>3--<table id="table"> <tr> <td>Your age:</td> <td> <label> <input type="radio" name="age" value="young" checked> less than 18 </label> <label> <input type="radio" name="age" value="mature"> from 18 to 50 </label> <label> <input type="radio" name="age" value="senior"> more than 60 </label> </td> </tr> </table> <script> let inputs = table.getElementsByTagName('input'); for (let input of inputs) { alert( input.value + ': ' + input.checked ); } </script>4<h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>1-✔<h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 2</li> </ul> </div> <script> let chapter = document.querySelector('.chapter'); // LI alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV alert(chapter.closest('h1')); // null (because h1 is not an ancestor) </script>9tag atau <table id="table"> <tr> <td>Your age:</td> <td> <label> <input type="radio" name="age" value="young" checked> less than 18 </label> <label> <input type="radio" name="age" value="mature"> from 18 to 50 </label> <label> <input type="radio" name="age" value="senior"> more than 60 </label> </td> </tr> </table> <script> let inputs = table.getElementsByTagName('input'); for (let input of inputs) { alert( input.value + ': ' + input.checked ); } </script>7✔✔________47____Sejauh ini yang paling banyak digunakan adalah <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>_5 dan // get all divs in the document let divs = document.getElementsByTagName('div');7, tetapi // doesn't work document.getElementsByTagName('input').value = 5;1 dapat membantu secara sporadis atau ditemukan di skrip lama
Selain itu
- Ada // doesn't work document.getElementsByTagName('input').value = 5;_2 untuk memeriksa apakah <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>0 cocok dengan pemilih CSS yang diberikan
- Ada <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>2 untuk mencari leluhur terdekat yang cocok dengan pemilih CSS yang diberikan. <ul> <li>The</li> <li>test</li> </ul> <ul> <li>has</li> <li>passed</li> </ul> <script> let elements = document.querySelectorAll('ul > li:last-child'); for (let elem of elements) { alert(elem.innerHTML); // "test", "passed" } </script>0 itu sendiri juga diperiksa
Dan mari sebutkan satu metode lagi di sini untuk memeriksa hubungan anak-orang tua, karena terkadang berguna
Bagaimana cara mendapatkan semua elemen halaman dalam JavaScript?
elements with class="intro" .