Bagaimana untuk memaparkan tajuk dokumen menggunakan JavaScript?-html tutorial-php.cn

Bagaimana untuk memaparkan tajuk dokumen menggunakan JavaScript?

PHPz

Lepaskan： 2023-08-24 09:49:32

ke hadapan

1622 orang telah melayarinya

Bagaimana untuk memaparkan tajuk dokumen menggunakan JavaScript?

Dalam tutorial ini, kita akan memahami dua pendekatan untuk memaparkan tajuk dokumen menggunakan JavaScript.

Menggunakan document.title Property

Salah satu kaedah yang paling banyak digunakan dalam JavaScript untuk mengakses tajuk dokumen HTML ialah menggunakan sifat document.title Dalam contoh berikut, anda akan belajar untuk mendapatkan akses kepada tajuk tersebut selepas mengakses tajuk dalam JavaScript, anda boleh memanipulasinya ubah cara ia dipaparkan pada tapak web.

Tatabahasa

Di sini anda boleh melihat bagaimana menggunakan kaedah onClick kita boleh menetapkan HTML dalaman perenggan dalam dokumen. document.title digunakan untuk mendapatkan tajuk dan memaparkan tajuk apabila butang yang ditentukan diklik.

title.innerHTML = document.title;

Salin selepas log masuk

Algoritma

Langkah 1 − Tulis tajuk dalam fail dokumen HTML.

Langkah 2 - Buat butang menggunakan kaedah onClick untuk mendapatkan tajuk.

Langkah 3 − Buat tag perenggan untuk memaparkan tajuk yang ditangkap.

Langkah 4 - Tetapkan pembolehubah yang diperlukan untuk elemen berbeza dalam dokumen.

Langkah 5 − Buat fungsi untuk butang onClick.

Langkah 6 − Berikan pembolehubah dalaman teg perenggan menggunakan kaedah document.title.

Terjemahan bahasa Cina bagi

Contoh 1

ialah:

Contoh 1

Anda boleh lihat di bawah, bagaimana kami mengakses tajuk dokumen tanpa memberikannya sebarang id atau kelas dalam fail HTML. Tajuk boleh diakses menggunakan document.title.

<html>
   <head>
      <title> This is the title accessed from the document </title>
   </head>
   <body>
      <h3> Please click the button to get the title of the document</h3>
      <button id="titleBtn" onClick="titleButton()">Check Title</button>
      <p id="result"></p>
      <script>
         var paraTitle = document.getElementById('result');
         function titleButton() {
            paraTitle.innerHTML = document.title;
            document.getElementById('titleBtn').style.visibility = 'hidden';
         }
      </script>
   </body>
</html>

Salin selepas log masuk

Menggunakan Kaedah etElementsByTagName()

Biasanya, kita perlu menggunakan fungsi JavaScript untuk mendapatkan tajuk untuk beroperasi pada platform yang berbeza. Dalam kaedah ini, anda akan belajar cara menggunakan harta document.getElementsByTagName() untuk mendapatkan tajuk. Kaedah ini menerima nama teg sebagai parameter dan mengembalikan koleksi semua elemen dengan nama teg yang ditentukan.

Tatabahasa

document.getElementsByTagName("title")[idx];

Salin selepas log masuk

Di sini "tajuk" ialah parameter kepada kaedah.

Kaedah ini akan mengembalikan koleksi semua elemen dengan label "tajuk".

Kita perlu menggunakan pengindeksan pada koleksi yang diterima untuk mendapatkan elemen yang berbeza Di sini idx ialah indeks tajuk Sebagai contoh, untuk mendapatkan tajuk pertama kita menetapkan idx kepada 0, dan dalam yang sama. cara untuk mendapatkan gelaran kedua kita tetapkan idx kepada 1.

Algoritma

Langkah 1 − Tulis sesuatu dalam tag tajuk dokumen HTML.

Langkah 2 - Buat label butang untuk boleh menggunakan kaedah onClick.

Langkah 3 − Buat teg perenggan dan berikan mereka id untuk mendapatkan akses dalam JavaScript.

Langkah 4 - Anda boleh menetapkan id atau kelas kepada semua elemen penting dalam dokumen anda.

Langkah 5 − Buat pembolehubah berbeza yang boleh merebut elemen yang diperlukan.

Langkah 6 - Buat fungsi untuk kaedah onClick.

Langkah 7 - Pembolehubah yang dibuat untuk perenggan hendaklah ditetapkan kepada innerHTML menggunakan atribut tagName().

Contoh 2

Dalam contoh ini, kami akan memilih tajuk mengikut nama tag. Anda akan belajar cara mendapatkan tajuk dengan cepat daripada dokumen HTML menggunakan kaedah document.getElementsByTagName(). Kami menambah dua pengepala pada dokumen HTML. Kami mencari dua tajuk ini menggunakan dua butang.

<html>
   <head>
      <title> This is the first title accessed using index 0. </title>
      <title> This is the second title accessed using index 1.</title>
   </head>
   <body>
      <h3>Getting the Title of the document using Tag Name. </h3>
      <button id="titleBtn" onClick="titleButton()">Check First Title</button>
      <button id="secondBtn" onClick="secondButton()">Check Second Title</button>
      <p id="paraTitle"> </p>
      <script>
         var paraTitle = document.getElementById('paraTitle');
         function titleButton() {
            var title = document.getElementsByTagName("title")[0];
            paraTitle.innerHTML = title.innerHTML;
         }
         function secondButton() {
            var title = document.getElementsByTagName("title")[1];
            paraTitle.innerHTML = title.innerHTML;
         }
      </script>
   </body>
</html>

Salin selepas log masuk

Di sini anda dapat melihat bahawa kami telah menambah dua butang yang memaparkan tajuk berbeza dalam dokumen. Daripada output ini, anda boleh memahami bahawa menambah 0 indeks selepas atribut tagName() boleh membantu mendapatkan tajuk pertama.

Properti document.title dan kaedah getElementByTagName() kedua-duanya digunakan untuk mengakses tajuk dokumen. Anda boleh mencuba kedua-dua kaedah dalam JavaScript dan pilih kaedah pilihan anda. Jika anda ingin memanipulasi tingkah laku pengepala dokumen, menggunakan JavaScript untuk mengakses pengepala mungkin merupakan titik permulaan yang baik.

Atas ialah kandungan terperinci Bagaimana untuk memaparkan tajuk dokumen menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!