Apakah metode yang digunakan untuk memilih dan mengakses elemen pada html?

❮ Sebelumnya Berikutnya Referensi ❯

Pilih Object

Pilih objek merupakan HTML <select> elemen.

Mengakses Pilih Object

Anda dapat mengakses <select> elemen dengan menggunakan getElementById() :

Contoh

var x = document.getElementById("mySelect");

Tip: Anda juga dapat mengakses Pilih objek dengan mencari melalui unsur-unsur koleksi formulir.

Buat Pilih Object

Anda dapat membuat <select> elemen dengan menggunakan document. createElement() document. createElement() metode:

Contoh

var x = document.createElement("SELECT");

Pilih Koleksi Obyek

Pilih Object Properti

Metode Object pilih

Properti standar dan Acara

Pilih objek juga mendukung standar sifat dan peristiwa .

Pages terkait

Tutorial HTML: Bentuk HTML

Referensi HTML: HTML <select> tag

❮ Sebelumnya Berikutnya Referensi ❯

Properti navigasi DOM akan bekerja saat elemennya dekat dengan satu sama lain. Bagaimana jika tidak? Bagaimana cara mendapatkan elemen sembarang pada halaman?

Terdapat metode pencarian tamabahan untuk hal ini.

Jika elemen memiliki attribut

<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>

<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>

Contoh:

<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>

<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>

…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

Perilaku ini dideskripsikan pada , Jadi ini sudah standar. Tetapi ini didukung terutama untuk kompabilitas.

Browser berusaha membantu kita dengan mencampur namespace dari JS dan DOM. Hal ini baik baik saja untuk kode skrip sederhana, sebaris ke dalam HTML, tetapi umumnya ini tidak bagus. Bisa saja terdapat konflik penamaan. Dan juga, jika seseorang membaca kode JS tanpa melihat tampilan HTML, maka tidak akan kelihatan 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>

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>

<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>

<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>

<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>

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>

<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>

<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>

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>

<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>

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>

<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>

<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>

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>

<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>

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>

<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 kuat, karena bisa menggunakan selector CSS.

Bisa menggunakan kelas-pseudo

Juga mendukung kelas-pseudo pada selector 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>

<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>

<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>

<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>

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>

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>

<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 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>

<a href="http://example.com/file.zip">...</a>
<a href="http://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>

<a href="http://example.com/file.zip">...</a>
<a href="http://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>

Metode ini akan berguna saat kita mengulang elemen yang banyak (seperti array atau yang lain) dan mencoba untuk menyaring apa yang kita inginkan.

Contoh:

<a href="http://example.com/file.zip">...</a>
<a href="http://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>

Ancestors dari elemen adalah: parent, parent dari parent, parent dan lainnya. Ancestor yang bersama membentuk rantai parent dari elemen dari atas.

Metode

<a href="http://example.com/file.zip">...</a>
<a href="http://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>

<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>

Dengan kata lain, metode

<a href="http://example.com/file.zip">...</a>
<a href="http://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>

Contoh:

<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="http://example.com/file.zip">...</a>
<a href="http://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>

Jadi kita menjelaskannya disini untuk lebih lengkap, sementara kamu masih bisa menemukannya di kode skrip lama.

• <a href="http://example.com/file.zip">...</a>
  <a href="http://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 mengembalikan koleksi dari mereka. parameter

  <a href="http://example.com/file.zip">...</a>
  <a href="http://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="http://example.com/file.zip">...</a>
  <a href="http://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="http://example.com/file.zip">...</a>
  <a href="http://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 attribut

  <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.

Contoh:

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

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>

<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 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>

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>

<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>

<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>

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>

<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>

<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>

<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>

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 dibutuhkan koleksi dari input dan menetapkan nilai pada koleksi daripada elemen di dalamnya.

Kita harus melakukan iterasi dari koleksi atau mengambil elemen dari index, dan menetapkannya, 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');

<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>

Semua metode

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

Contoh dibawah ini, ada dua kode skrip.

1. 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.
2. 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.

<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>

Sebaliknya,

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

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');

<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>

Sekarang kita bisa lebih mudah melihat perbedaanya. Koleksi statis tidak bertambah setelah muncul

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

Terdapat 6 metode utama untuk mencari node pada DOM:

<a href="http://example.com/file.zip">...</a>
<a href="http://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>

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

<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>

<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>

<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>

<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>

<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>

<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>

<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>

Sejauh ini yang paling banyak digunakan adalah

<a href="http://example.com/file.zip">...</a>
<a href="http://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>

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

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

Selain itu:

• Terdapat

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

  2 untuk memeriksa 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 selector CSS.
• Terdapat

  <a href="http://example.com/file.zip">...</a>
  <a href="http://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 selector 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 juga diperiksa.

Dan mari kita sebutkan satu lagi metode untuk memeriksa hubungan child-parent, karena terkadang berguna:

Apakah method yang digunakan untuk memilih dan mengakses elemen pada HTML?

Method apakah yang digunakan untuk mendapatkan nama id dari sebuah HTML element?

Apa saja elemen elemen HTML?

Apa yang dimaksud dengan elemen HTML dan berikan contohnya?