Pengenalan ringkas kepada sokongan JavaScript untuk model objek dokumen tradisional

Pengenalan ringkas kepada sokongan JavaScript untuk model objek dokumen tradisional_Pengetahuan asas

WBOY

Lepaskan： 2016-05-16 15:54:39

asal

964 orang telah melayarinya

Ini ialah model yang telah diperkenalkan dalam versi bahasa JavaScript yang lebih awal. Semuanya disokong oleh semua penyemak imbas, tetapi hanya membenarkan akses kepada bahagian penting tertentu fail, seperti borang, elemen borang dan imej.

Model ini menyediakan beberapa sifat baca sahaja seperti tajuk, URL dan perubahan terakhir yang memberikan maklumat tentang dokumen secara keseluruhan. Selain itu terdapat pelbagai kaedah yang disediakan oleh model ini yang boleh digunakan untuk menetapkan dan mendapatkan nilai harta dokumen.
Dokumenkan sifat dalam DOM tradisional:

Berikut ialah senarai sifat dokumen yang boleh diakses menggunakan DOM tradisional:

2015616103205974.jpg (662×762)

2015616103233946.jpg (655×726)

Kaedah dokumen dalam DOM tradisional:

Berikut ialah senarai kaedah yang disokong oleh DOM tradisional:

2015616103255189.jpg (681×498)

Contoh:

Kami boleh mencari sebarang elemen HTML, sebarang dokumen HTML menggunakan HTML DOM. Contohnya, jika dokumen web mengandungi elemen borang, maka menggunakan JavaScript, kita boleh memanggilnya document.forms[0]. Jika dokumen web mengandungi dua elemen borang, bentuk pertama dipanggil document.forms[0] dan yang kedua ialah document.forms[1].

Menggunakan struktur hierarki dan sifat yang diberikan di atas, anda boleh menggunakan document.forms[0].elemen[0], dsb.

Berikut ialah contoh mengakses sifat dokumen menggunakan kaedah DOM tradisional:

<html>
<head>
<title> Document Title </title>
<script type="text/javascript">
<!--
function myFunc()
{
  var ret = document.title;
  alert("Document Title : " + ret );

  var ret = document.URL;
  alert("Document URL : " + ret );

  var ret = document.forms[0];
  alert("Document First Form : " + ret );

  var ret = document.forms[0].elements[1];
  alert("Second element : " + ret );

}
//-->
</script>
</head>
<body>
<h1 id="title">This is main title</h1>
<p>Click the following to see the result:</p>

<form name="FirstForm">
<input type="button" value="Click Me" onclick="myFunc();" />
<input type="button" value="Cancel">
</form>

<form name="SecondForm">
<input type="button" value="Don't ClickMe"/>
</form>

</body>
</html>

Salin selepas log masuk

NOTA: Contoh ini mengembalikan objek seperti bentuk dan kandungan, dan kita perlu menggunakan sifat objek ini yang tidak dibincangkan dalam tutorial ini untuk mengakses nilainya.