Panduan HTML5 - 2. Cara Mengoperasikan Metadata Dokumen

Penulis：Eve Cole Waktu Pembaruan：2025-04-28 13:32:02

Konten hari ini adalah tentang cara memanipulasi objek dokumen.

1. Operate Document Metadata

Pertama, mari kita lihat atribut terkait:

Karakteret: Dapatkan metode pengkodean dari dokumen saat ini, dan properti ini hanya baca;

Charset: Dapatkan atau atur metode pengkodean dari dokumen saat ini;

CompatMode: Dapatkan mode kompatibilitas dari dokumen saat ini;

Cookie: Dapatkan atau atur objek cookie dari dokumen saat ini;

DefaultCharset: Dapatkan metode pengkodean default dari browser;

DefaultView: Dapatkan objek jendela dari dokumen saat ini;

DIR: Dapatkan atau atur penyelarasan teks dari dokumen saat ini;

Domain: Dapatkan atau atur nilai Domian dari dokumen saat ini;

Implementasi: Memberikan informasi tentang fitur DOM yang didukung;

LastModified: Dapatkan waktu modifikasi terakhir dari dokumen (jika tidak ada waktu modifikasi terakhir, ia mengembalikan waktu saat ini);

Lokasi: memberikan informasi URL dari dokumen saat ini;

ReadyState: Mengembalikan status dokumen saat ini, yang merupakan properti read-only;

Penanggulangan: Mengembalikan informasi URL dokumen yang terhubung ke dokumen saat ini;

Judul: Dapatkan atau atur judul dokumen saat ini.

Mari kita lihat contoh berikut:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

</head>

<body>

document.writeln ('<pr Pre>');

document.writeln ('karakter:' + document.characterset);

document.writeln ('charset:' + document.charset);

Document.writeln ('CompatMode:' + Document.COMPATMODE);

document.writeln ('defaultCharset:' + document.defaultcharset);

document.writeln ('dir:' + document.dir);

document.writeln ('domain:' + document.domain);

document.writeln ('lastmodified:' + document.lastmodified);

Document.writeln ('Referrer:' + document.referrer);

document.writeln ('judul:' + document.title);

document.write ('</pr Pre>');

</script>

</body>

</html>

Hasil (hasil yang ditampilkan oleh browser yang berbeda mungkin berbeda):

2. Cara memahami mode kompatibilitas

Properti CompatMode memberi tahu Anda bagaimana browser menangani dokumen saat ini. Ada terlalu banyak HTML non-standar sekarang karena browser akan mencoba menampilkan halaman-halaman ini bahkan jika mereka tidak mematuhi spesifikasi HTML. Beberapa konten bergantung pada fitur unik yang ada dalam perang browser sebelumnya, dan batu atribut ini tidak mematuhi norma. CompatMode Mengembalikan satu atau dua nilai, sebagai berikut:

CSS1COMPAT: Dokumen mematuhi spesifikasi HTML yang valid (tidak harus html5/"> html5, halaman HTML4 yang diverifikasi juga mengembalikan nilai ini);

BackCompat: Dokumen ini berisi fitur yang tidak mematuhi spesifikasi, memicu mode kompatibilitas.

3. Gunakan objek lokasi

Document.Location Mengembalikan objek lokasi, memberi Anda informasi alamat dokumen berbutir halus, dan memungkinkan Anda untuk menavigasi ke dokumen lain.

Protokol: Dapatkan atau atur protokol untuk URL dokumen;

Host: Dapatkan atau atur informasi host dari URL dokumen;

HREF: Dapatkan atau atur informasi alamat dokumen;

HostName: Dapatkan atau atur nama host dokumen;

Pencarian: Dapatkan atau atur informasi dari bagian URL Query Document;

Hash: Dapatkan atau atur informasi tentang bagian URL Hash Part;

tetapkan (<rerl>): Navigasi ke URL tertentu;

ganti (<rerl>): Hapus dokumen saat ini dan navigasikan ke URL yang ditentukan;

Reload (): Muat ulang dokumen saat ini;

ResolveUrl (<rerl>): Ubah jalur relatif ke jalur absolut.

Mari kita lihat contoh berikut :

<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

</head>

<body>

document.writeln ('<pr Pre>');

document.writeln ('protokol:' + document.location.protocol);

document.writeln ('host:' + document.location.host);

document.writeln ('hostname:' + document.location.hostname);

document.writeln ('port:' + document.location.port);

document.writeln ('pathname:' + document.location.pathname);

document.writeln ('pencarian:' + document.location.search);

document.writeln ('hash:' + document.location.hash);

document.writeln ('</pr Pre>');

</script>

</body>

</html>

hasil:

4. Baca dan tulis cookie

Melalui atribut cookie, Anda dapat menambah, memodifikasi, dan membaca cookie dalam dokumen. Seperti yang ditunjukkan dalam contoh berikut:

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

</head>

<body>

</p>

Tambahkan cookie </tutton>

Perbarui cookie </button>

Hapus Cookie </button>

var cookiecount = 0;

document.geteLementById ('update'). onClick = updateCookie;

document.geteLementById ('write'). onClick = createCookie;

document.geteLementById ('clear'). onClick = clearcookie;

readcookies ();

fungsi readCookies () {

document.geteLementById ('cookiedata'). innerhtml =! document.cookie? '': document.cookie;

}

function updateCookie () {

document.cookie = 'cookie_' + cookiecount + '= update_' + cookiecount;

readcookies ();

}

fungsi createCookie () {

cookiecount ++;

document.cookie = 'cookie_' + cookiecount + '= value_' + cookiecount;

readcookies ();

}

fungsi clearcookie () {

var exp = new date ();

exp.settime (exp.getTime () - 1);

var arrstr = document.cookie.split (";");

untuk (var i = 0; i <arrstr.length; i ++) {

var temp = arrstr [i] .split ("=");

if (temp [0]) {

document.cookie = temp [0] + "=; Expires =" + exp.togmtString ();

};

}

cookiecount = 0;

readcookies ();

}

</script>

</body>

</html>

hasil:

5. Memahami ReadyState

Document.readyState membantu Anda memahami keadaan halaman saat ini selama proses pemuatan halaman dan penguraian. Satu hal yang perlu diingat adalah bahwa browser akan segera dieksekusi saat menemukan elemen skrip, kecuali Anda menggunakan atribut tundukan untuk menunda eksekusi skrip. ReadyState memiliki tiga nilai yang mewakili negara bagian yang berbeda.

Memuat: Browser memuat dan melaksanakan dokumen;

Interaktif: Dokuen telah menyelesaikan penguraian, tetapi browser memuat sumber daya eksternal lainnya (media, gambar, dll.);

Lengkap: Parsing halaman selesai, dan sumber daya eksternal diselesaikan di rumah.

Selama seluruh proses pemuatan dan penguraian browser, nilai ReadyState akan berubah satu per satu dari pemuatan, berinteraksi dan lengkap. Ketika digunakan bersama dengan peristiwa ReadyStateChange (dipicu ketika keadaan ReadyState berubah), ReadyState menjadi sangat berharga.

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

document.onreadystatechange = function () {

if (document.readystate == "interaktif") {

document.geteLementById ("pressMe"). onClick = function () {

document.geteLementById ("hasil"). innerHtml = "tombol ditekan";

}

</script>

</head>

<body>

Tekan saya </tutton>

</body>

</html>

Kode di atas menggunakan acara ReadyStateChange untuk mencapai efek eksekusi yang tertunda. Hanya ketika seluruh halaman pada halaman diuraikan dan dihubungi, nilai ReadyState akan menjadi interaktif. Pada saat ini, acara klik akan terikat ke tombol PressMe. Operasi ini memastikan bahwa semua elemen HTML yang diperlukan ada dan mencegah kesalahan terjadi.

6. Dapatkan informasi tentang implementasi atribut DOM

Properti Dokumen. Implementasi membantu Anda memahami implementasi browser dari properti DOM. Properti ini mengembalikan objek domimplementasi, yang berisi metode hasfeature, yang melaluinya Anda dapat memahami implementasi browser dari properti tertentu.

<! Doctype html>

<Html>

<head>

<Title> Contoh </iteme>

</head>

<body>

fitur var = ["core", "html", "css", "selectors-api"];

level var = ["1.0", "2.0", "3.0"];

document.writeln ("<pr Pre>");

untuk (var i = 0; i <fitur.length; i ++) {

document.writeln ("Memeriksa fitur:" + fitur [i]);

untuk (var j = 0; j <levels.length; j ++) {

Document.write (fitur [i] + "level" + level [j] + ":");

document.writeln (document.implementation.hasfeature (fitur [i], level [j]));

}

Document.write ("</pr Pre>")

</script>

</body>

</html>

Memengaruhi: