Akses DOM HTML


Akses HTML DOM - Cari elemen HTML.

Mengakses elemen HTML (nod)

Mengakses elemen HTML adalah bersamaan dengan mengakses nod

Anda boleh mengakses elemen HTML dengan cara yang berbeza:

  • Dengan menggunakan kaedah getElementById()

  • Dengan menggunakan kaedah getElementsByTagName()

  • Dengan menggunakan kaedah getElementsByClassName() >

getElementById() kaedah

getElementById() kaedah mengembalikan elemen dengan ID yang ditentukan:

Syntax

nod.getElementById("id");
Contoh berikut mendapat elemen dengan id="intro":

Instance

<html><!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b> method!</p>

<script>
x=document.getElementById("intro");
document.write("<p>The text from the intro paragraph: " + x.innerHTML + "</p>");
</script>

</body>
</html>

Run Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian

kaedah getElementsByTagName()

getElementsByTagName() mengembalikan semua elemen dengan nama teg yang ditentukan.

Sintaks

nod.getElementsByTagName("tagname");
Contoh berikut kembali Mengandungi senarai semua <p> elemen dalam dokumen:

Instance

<html><!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<script>
x=document.getElementsByTagName("p");
document.write("Text of first paragraph: " + x[0].innerHTML);
</script>

</body>
</html>

Run Instance»Klik Butang "Run" Contoh" untuk melihat contoh dalam talian

Contoh berikut mengembalikan senarai yang mengandungi semua <p> elemen dalam dokumen dan <p> elemen ini hendaklah turunan daripada elemen dengan id="main" ( Anak, cucu, dll.):

Instance

<html><!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>

<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
</div>

<script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("First paragraph inside the div: " + x[0].innerHTML);
</script>

</body>
</html>

Run Instance»Klik butang "Run Instance" untuk melihat Contoh dalam talian

Kaedah getElementsByClassName()

Jika anda ingin mencari semua elemen HTML dengan nama kelas yang sama, gunakan kaedah ini :

document.getElementsByClassName("intro");
Contoh di atas mengembalikan senarai semua elemen yang mengandungi class="intro":

Nota: getElementsByClassName() tidak berfungsi dalam Internet Explorer 5,6,7,8.

←
→