kode javascript

Cara menggunakan nama kelas dokumen javascript

Properti navigasi DOM akan bekerja saat elemennya dekat dengan satu sama lain. Bagaimana jika tidak?

Terdapat metode pencarian tamabahan untuk hal ini

Jika 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 adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: 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 adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: window ['elem-content']) </script>4, dimanapun itu berada

kontur

<div id="elem"> <div id="elem-content">Element</div> </div> <script> // get the element (mendapatkan elemen) let elem = document.getElementById('elem'); // make its background red (membuat background berwarna merah) elem.style.background = 'red'; </script>

Dan juga, terdapat variabel global yang dinamakan <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" (elem adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: window ['elem-content']) </script>3 untuk mereferensikan elemennya

…Kecuali jika kita mendeklarasikan variabel Javascript dengan nama yang sama, lalu itu yang diutamakan

<div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> (sekarang nilai elem adalah 5, bukan referensi dari <div id="elem">) alert(elem); // 5 </script>

Tolong jangan gunakan variabel global dengan nama id untuk mengakses elemen

behavior ini dideskripsikan pada, Jadi ini sudah standard. Tetapi ini didukung terutama untuk kompabilitas

Browser berusaha membantu kita dengan mencampur namespace dari JS dan DOM. Hal ini baik saja untuk kode skrip sederhana, sebaris ke dalam HTML, tetapi umumnya ini tidak bagus. bisa saja terdapat konflik penaamaan. Dan juga, jika seseorang membaca kode JS tanpa melihat tampilan HTML, maka tidak akan terlihat asal dari variabel tersebut

Pada tutorial ini kita menggunakan <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" (elem adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: window ['elem-content']) </script>3 untuk mengarahkan langsung elemen supaya singkat, ketika sudah jelas dari mana elemen berasal

Di dunia nyata, metode yang paling disukai adalah <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" (elem adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: window ['elem-content']) </script>7

<div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" (elem adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: window ['elem-content']) </script>3 harus unik. Hanya boleh ada satu elemen pada dokumen yang diberikan <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" (elem adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: window ['elem-content']) </script>3

Jika ada banyak elemen dengan <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" (elem adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: window ['elem-content']) </script>3 yang sama, maka perilaku dari metode yang digunakan tidak akan terduga, contoh <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" (elem adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: window ['elem-content']) </script>_7 akan mengembalikan elemen secara acak. Jadi tetap lakukan sesuai aturan dan buatlah <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" (elem adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: 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 adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: 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"> (sekarang nilai elem adalah 5, bukan referensi dari <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"> (sekarang nilai elem adalah 5, bukan referensi dari <div id="elem">) alert(elem); // 5 </script>6 yang hanya bisa di panggil pada objek <div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> (sekarang nilai elem adalah 5, bukan referensi dari <div id="elem">) alert(elem); // 5 </script>7. ini mencari <div id="elem"> <div id="elem-content">Element</div> </div> <script> // elem is a reference to DOM-element with id="elem" (elem adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: window ['elem-content']) </script>3 yang diberikan di seluruh dokumen

Sejauh ini, metode yang paling serba guna, <div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> (sekarang nilai elem adalah 5, bukan referensi dari <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 yang sama dengan selector CSS

Disini kita melihat 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 pada anak terakhir

________dua puluh_______

Metode ini memang kuat, karena bisa menggunakan pemilih CSS

Bisa menggunakan kelas-pseudo

Juga mendukung kelas-pseudo pada CSS selector 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. Contoh, <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 dari elemen yang penunjuknya aktif sekarang(pada urutan bersarang. dari luar <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 hingga yang bersarang)

Pemanggilan <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 yang diberikan pemilih CSS

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 cara ini 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 cara ini lebih cepat dan juga singkat untuk ditulis

Metode sebelumnya digunakan untuk mencari DOM

metode tidak mencari apapun, metode ini hanya memeriksa apakan <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 sama dengan selector CSS yang diberikan. Metode ini mengembalikan <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children (bisa berisi koleksi apa saja daripada 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 (bisa berisi koleksi apa saja daripada 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 akan berguna saat kita mengulang elemen yang banyak (seperti array atau yang lain) dan mencoba untuk menyaring apa yang kita inginkan

kontur

<a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children (bisa berisi koleksi apa saja daripada document.body.children) for (let elem of document.body.children) { if (elem.matches('a[href$="zip"]')) { alert("The archive reference: " + elem.href ); } } </script>

Leluhur dari elemen adalah. parent, parent dari parent, parent dan lainnya. Leluhur yang sama membentuk rantai induk dari elemen atas

Metode <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children (bisa berisi koleksi apa saja daripada 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 sendiri juga dimasukkan pada 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 (bisa berisi koleksi apa saja daripada 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 selektor, maka pencariaan akan berhenti, dan mengembalikan pada leluhur

kontur

<h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 1</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 (karena h1 bukan ancestor)) </script>

Terdapat juga metode lainnya untuk mencari node dengan tag, kelas, dan lainnya

Hari ini, kebanyakan dari metode ini menjadi sejarah, karena metode <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children (bisa berisi koleksi apa saja daripada 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 singkat

Jadi kami menjelaskannya disini untuk lebih lengkap, sementara anda masih bisa menemukan di kode skrip lama

<a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children (bisa berisi koleksi apa saja daripada 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 koleksi dari mereka. parameter <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children (bisa berisi koleksi apa saja daripada 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 (bisa berisi koleksi apa saja daripada 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 apapun”
<a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children (bisa berisi koleksi apa saja daripada 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 diberikan kelas CSS
<h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 1</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 (karena h1 bukan 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 1</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 (karena h1 bukan ancestor)) </script>1, lebar dokumen. Sangat jarang digunakan

kontur

________Empat.Lima_______

Mari kita cari semua tag <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 1</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 (karena h1 bukan ancestor)) </script>2 pada 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 huruf ________37______3

Pengembang pemula terkadang melupakan huruf <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 1</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 (karena h1 bukan ancestor)) </script>3. Hari itu, mereka mencoba memanggil <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 1</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 (karena h1 bukan ancestor)) </script>5 dari <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 1</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 (karena h1 bukan ancestor)) </script>6

Tidak ada huruf <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 1</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 (karena h1 bukan ancestor)) </script>3 pada <div id="elem"></div> <script> let elem = 5; // now elem is 5, not a reference to <div id="elem"> (sekarang nilai elem adalah 5, bukan referensi dari <div id="elem">) alert(elem); // 5 </script>_6, karena ini mengembalikan satu elemen. Tetapi <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 1</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 (karena h1 bukan ancestor)) </script>5 mengembalikan koleksi dari elemen, jadi harus ada huruf <h1>Contents</h1> <div class="contents"> <ul class="book"> <li class="chapter">Chapter 1</li> <li class="chapter">Chapter 1</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 (karena h1 bukan ancestor)) </script>3 didalamnya

Ini mengembalikan koleksi, bukan sebuah elemen

Kesalahan pemula lain yang tersebar luas adalah dengan menulis

// doesn't work (tidak bekerja) document.getElementsByTagName('input').value = 5;

Itu tidak akan bekerja, karena membutuhkan koleksi dari input dan menetapkan nilai pada koleksi daripada elemen di dalamnya

Kita harus melakukan iterasi dari koleksi atau mengambil elemen dari index, dan memasangnya, seperti ini

// should work (if there's an input) akan bekerja (jika ada input nya) document.getElementsByTagName('input')[0].value = 5;

Mencari elemen // get all divs in the document (mengambil semua div pada dokumen) let divs = document.getElementsByTagName('div');1

Semua metode // get all divs in the document (mengambil semua div pada dokumen) let divs = document.getElementsByTagName('div');2 mengembalikan koleksi langsung contoh koleksi selalu mencerminkan kondisi dokumen dan “pembaharuan otomatis” ketika terjadi perubahan

Contoh dibawah ini, ada dua kode skrip

Kode skrip pertama membuat referensi pada koleksi dari // get all divs in the document (mengambil semua div pada dokumen) let divs = document.getElementsByTagName('div');3. Untuk sekarang, panjangnya // get all divs in the document (mengambil semua div pada dokumen) let divs = document.getElementsByTagName('div');4
Kode skrip kedua berjalan setelah browser bertemu dengan satu // get all divs in the document (mengambil semua div pada dokumen) let divs = document.getElementsByTagName('div');3 lagi, jadi panjangnya // get all divs in the document (mengambil semua div pada dokumen) let divs = document.getElementsByTagName('div');6

Sebaliknya, // get all divs in the document (mengambil semua div pada dokumen) let divs = document.getElementsByTagName('div');_7 mengembalikan koleksi statis. Ini seperti array dari elemen yang tetap

Jika kita menggunakannya, maka keluaran kedua kode skrip adalah // get all divs in the document (mengambil semua div pada dokumen) let divs = document.getElementsByTagName('div');4

Sekarang kita bisa lebih mudah melihat perbedaanya. Koleksi statistik tidak bertambah setelah muncul // get all divs in the document (mengambil semua div pada dokumen) let divs = document.getElementsByTagName('div');_9 baru di dokumen

Terdapat 6 method utama untuk mencari node pada DOM

Metode Pencarian 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 (bisa berisi koleksi apa saja daripada 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 (mengambil semua div pada dokumen) 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"> (sekarang nilai elem adalah 5, bukan referensi dari <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 adalah referensi dari elemen-DOM dengan id="elem") elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name (id="elem-content" memiliki hypen didalam, jadi bukan nama variabel) // ...but we can access it using square brackets: window['elem-content'] (...tetapi kita bisa mengakses menggunakan kurung kotak: 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 1</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 (karena h1 bukan ancestor)) </script>1-✔_______47_______6tag 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 (bisa berisi koleksi apa saja daripada 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 (mengambil semua div pada dokumen) let divs = document.getElementsByTagName('div');_7, tetapi // doesn't work (tidak bekerja) document.getElementsByTagName('input').value = 5;_1 secara terkadang membantu atau dapat ditemukan pada kode skrip lama

selain itu

Terdapat // doesn't work (tidak bekerja) document.getElementsByTagName('input').value = 5;2 untuk menilai jika <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
Terdapat <a href="//example.com/file.zip">...</a> <a href="//ya.ru">...</a> <script> // can be any collection instead of document.body.children (bisa berisi koleksi apa saja daripada 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 ancestor terdekat yang cocok dengan CSS selector 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 memainkan diperiksa

Dan mari kita menyebutkan satu lagi metode untuk menilai hubungan anak-orang tua, karena terkadang berguna

Cara menggunakan nama kelas dokumen javascript

Pos Terkait

Cara menggunakan uppercase php

Cara menggunakan python getattr multiple levels

Apa saja tipe data dalam javascript?

Cara menggunakan google sheets strip

Apa itu font size css?

Excel 2007 tidak bisa diketik

Periksa apakah daftar tidak ada python

Cara menulis kubus dengan python

Sebutkan dan jelaskan yang membedakan modul dari program python umumnya.

Php pilih onchange dapatkan nilai

Toplist

Top 7 rothenburg ob der tauber sehenswürdigkeiten stadtplan 2022

Top 8 rufumleitung für bestimmte nummern android 2022

Top 8 mündliche prüfung 2. staatsexamen jura bayern 2022

Top 8 wenn kleinigkeiten am partner stören 2022

Top 7 hilfsmittel für behinderte im alltag 2022

Top 8 wann gilt lkw-fahrverbot in deutschland? 2022

Top 7 wookie und copilot von han solo in star wars 2022

Top 6 cafe da manha pobre 2022

Top 7 bildung und teilhabe mühlhausen telefonnummer 2022

Postingan terbaru

LIHAT SEMUA