Meningkatkan markup struktur dengan JavaScript

Titik utama

penandaan berstruktur yang dipertingkatkan dengan JavaScript dapat meningkatkan kebolehcapaian dan pemeliharaan kandungan laman web sambil mengurangkan saiz fail. JavaScript boleh digunakan secara berkesan untuk menambahkan fungsi secara dinamik ke elemen HTML, seperti memasukkan pautan rujukan secara automatik ke dalam rujukan blok menggunakan atribut
• .
• Mengintegrasikan JavaScript dengan tag berstruktur membolehkan anda membuat antara muka pengguna yang dinamik, seperti panel tab tanpa penyegaran halaman. cite
Adalah penting untuk memastikan bahawa peningkatan JavaScript tidak menghalang fungsi asas laman web; Teknologi JavaScript Advanced seperti pengendalian acara dan operasi DOM boleh digunakan tanpa mengganggu skrip sedia ada atau lalai penyemak imbas, memastikan keserasian dan meningkatkan pengalaman pengguna. Beberapa tahun yang lalu, kemahiran utama dalam penulisan HTML adalah untuk menguasai kemahiran meja yang cukup untuk meyakinkan dua pelayar utama untuk melakukan lebih kurang seperti yang anda kehendaki. Web moden sangat berbeza, dan kualiti markup anda bergantung pada bagaimana anda menggunakan unsur -unsur struktur seperti tajuk, perenggan, dan senarai untuk menggambarkan kandungan anda. Manfaat pendekatan ini telah dijelaskan beberapa kali: lebih mudah untuk mengekalkan kod, saiz fail yang lebih kecil, kebolehcapaian yang lebih baik, dan keupayaan untuk mengawal rupa dan nuansa laman web dari satu stylesheet tunggal, dan bukannya mengubahnya dalam blok besar blok yang ditandai yang merangkumi beberapa halaman. Kelebihan yang kurang sering dibincangkan ialah tag berstruktur dengan baik membuka pintu kepada peningkatan laman web tambahan berdasarkan teknologi pihak ketiga pelanggan, JavaScript. Artikel ini akan meneroka dua cara JavaScript dan tag berstruktur dengan baik dapat bekerjasama. Contoh pertama akan menunjukkan bagaimana untuk meningkatkan rujukan blok dengan menyambungkan ke atribut Cite. Contoh kedua akan menunjukkan skrip "amalan terbaik" untuk membina pautan yang togol panel kelihatan pada halaman.
Rujukan blok
Untuk contoh pertama kami, mari kita lihat elemen rujukan blok yang tidak mencolok. Unsur ini sering disalah anggap untuk memohon lekukan, tetapi penggunaannya yang betul adalah bahawa rujukan menandakan yang harus dipisahkan secara visual dari teks sekitarnya. Tag rujukan blok permulaan boleh mempunyai atribut CITE pilihan yang harus mengandungi URL halaman sumber petikan. Satu -satunya masalah dengan harta Cite ialah penyemak imbas sepenuhnya mengabaikannya. Tag purists mungkin menghargainya, tetapi dari sudut pandangan yang semata -mata praktikal, menggunakannya tidak mempunyai manfaat yang melampaui kepuasan menggunakan tanda yang betul. Di sinilah JavaScript masuk. Menggunakan DOM, anda boleh menambah pautan ke sumber petikan di bahagian bawah rujukan blok dengan atribut CITE. Berikut adalah kod fungsi yang melakukan ini:

Mari kita lihat lebih dekat pada badan fungsi.

Barisan kod ini menggunakan kaedah DOM getElementsByTagName untuk mencari semua elemen rujukan blok dalam halaman semasa dan memberikannya kepada array bernama quotes (sebenarnya htmlcollection, tetapi ia adalah struktur data yang berkelakuan seperti array).

for (var i = 0; i < quotes.length; i ) { ... }

Sekarang kita melintasi nod rujukan blok yang dikumpulkan. Setiap kali kami gelung, kami menggunakan kaedah

untuk mendapatkan atribut CITE dari elemen. Jika harta Cite ditetapkan, kami akan meneruskan ke bahagian yang menarik: Buat pautan "Sumber" di bahagian bawah petikan. getAttribute

var a = document.createElement('a'); a.setAttribute('href', cite); a.setAttribute('title', cite); Apabila kita mahu menambah elemen HTML baru secara dinamik ke halaman menggunakan DOM, cara yang betul untuk melakukan ini adalah untuk mencipta unsur -unsur ini secara programatik menggunakan kaedah

. Garis di atas membuat elemen 'A' baru dan berikannya atribut HREF dan tajuk, yang kedua -duanya ditetapkan sebagai URL dari petikan.

createElement

Kami mahu elemen pautan mengandungi beberapa teks yang pengguna boleh mengklik untuk mengaktifkan pautan. Nod teks asal dibuat menggunakan kaedah a.appendChild(document.createTextNode('Source'));. Dom merawat elemen HTML sebagai membentuk pokok, jadi untuk menambah teks ke pautan yang baru dibuat, kita perlu memanggil kaedah

.

createTextNode appendChild

Untuk membolehkan kita menggunakan pautan baru gaya fleksibel menggunakan CSS, kita boleh membungkusnya dalam elemen perenggan. Kod di atas mencipta elemen sedemikian, menetapkan kelasnya kepada "blockquotesource" untuk menyediakan cangkuk CSS, dan kemudian menambah pautan kepadanya menggunakan

. Pada ketika ini, serpihan dokumen baru yang kami bina bersamaan dengan HTML berikut: var p = document.createElement('p'); p.className = 'blockquotesource'; p.appendChild(a);

appendChild

Pada masa ini, coretan kami masih tidak kelihatan kerana walaupun kami menciptanya dalam ingatan, kami belum melampirkannya kepada dokumentasi kami. Inilah baris terakhir dalam fungsi: <p> <a href="https://www.php.cn/link/a725c77dfdec0a53250d0709ed36e1fe" title="https://www.php.cn/link/a725c77dfdec0a53250d0709ed36e1fe">Source</a> </p>

adalah elemen rujukan blok yang sedang kita kerjakan. quotes[i].appendChild(p); Lampirkan perenggan baru kami ke rujukan blok supaya ia dapat dilihat.

Terdapat dua langkah lagi. Pertama, kita perlu menjalankan fungsi di atas apabila halaman pertama dimuatkan. Terdapat banyak cara untuk mencapai matlamat ini. Cara paling mudah ialah menambah panggilan ke fungsi ke harta onload elemen badan dokumen: quotes[i] appendChild Ini berfungsi dengan baik, tetapi kita boleh melakukannya dengan lebih baik. Oleh kerana fungsi JavaScript kami akan dihoskan dalam fail luaran, tidakkah lebih bermakna bagi fail luaran untuk menyebabkan fungsi dijalankan? Pendekatan naif adalah menggunakan kod JavaScript berikut:

window.onload = extractBlockquoteCitations;

//

Perhatikan bahawa kami memberikan nama fungsi, tetapi abaikan () pada akhirnya, yang akan menyebabkan fungsi dilaksanakan. JavaScript menyokong gaya pengaturcaraan berfungsi, yang bermaksud bahawa fungsi boleh diluluskan sebagai parameter, disimpan dalam struktur data, dan bahkan dapat dikembalikan dari fungsi lain seperti objek data lain. Saya akan membincangkan topik ini lebih lanjut dalam jawatan masa depan, tetapi hasilnya ialah memberikan fungsi kepada

akan menyebabkan ia dilaksanakan selepas beban halaman. window.onload Walau bagaimanapun, penyelesaian ini juga mempunyai satu kelemahan. Jika anda ingin menggunakan pelbagai skrip yang dilaksanakan selepas beban halaman selesai pada halaman yang diberikan, skrip terakhir yang mendaftarkan dirinya kepada

akan menjadi satu -satunya skrip yang dilaksanakan. Apa yang benar -benar diperlukan adalah cara untuk melampirkan fungsi kami ke pengendali onload objek tetingkap tanpa menimpa apa yang sudah ada. Malangnya, Internet Explorer dan pelayar lain berbeza dalam cara mengendalikan lampiran acara dinamik; Berikut adalah fungsi:

window.onload

Berikut adalah kod untuk menambah fungsi blockquotes kami ke acara beban objek tetingkap:

function extractBlockquoteCitations() {
    var quotes = document.getElementsByTagName('blockquote');
    for (var i = 0; i < quotes.length; i++) {
        var cite = quotes[i].getAttribute('cite');
        if (cite) {
            var a = document.createElement('a');
            a.setAttribute('href', cite);
            a.setAttribute('title', cite);
            a.appendChild(document.createTextNode('Source'));
            var p = document.createElement('p');
            p.className = 'blockquotesource';
            p.appendChild(a);
            quotes[i].appendChild(p);
        }
    }
}

Langkah terakhir adalah gaya petikan dengan CSS. Berikut adalah coretan kod CSS yang agak mudah yang mengendalikan rujukan blok: addEvent(window, 'load', extractBlockquoteCitations);

Produk siap boleh dilihat di sini.

function addEvent(obj, evType, fn){
    if (obj.addEventListener){
        obj.addEventListener(evType, fn, false);
        return true;
    } else if (obj.attachEvent){
        var r = obj.attachEvent("on"+evType, fn);
        return r;
    } else {
        return false;
    }
}

suis panel

Sekarang, mari kita pertimbangkan kesan dinamik yang lebih maju - penukar panel. Matlamat di sini adalah untuk meletakkan pelbagai panel pada halaman (menggunakan tag div) dan memaparkan hanya satu panel pada satu masa. Satu set pautan yang sentiasa kelihatan boleh digunakan untuk memilih panel yang dipaparkan sekarang. Ini berguna untuk membina antara muka tab untuk melayari pelbagai skrin yang berkaitan tanpa menyegarkan halaman setiap kali anda memilih tab.

Apabila menggunakan JavaScript untuk meningkatkan halaman anda, anda perlu mengingati peraturan yang baik bahawa halaman itu masih mesti tersedia walaupun JavaScript dilumpuhkan. Dalam kes ini, ini bermakna penyelesaian yang ideal harus berfungsi seperti yang diiklankan apabila JavaScript diaktifkan, tetapi dalam persekitaran bukan JavaScript, semua panel harus dipaparkan pada halaman, setiap pautan terus menghubungkan ke panel yang berkaitan, dan menggunakan coretan URL.

Kemudian, ini adalah tanda paling mudah yang boleh berfungsi:

`

panel 1

|

ini panel 1 ini panel 2 `

Mengejutkan, di atas hampir semua markup yang kita perlukan untuk mengaitkan beberapa JavaScript untuk mencipta kesan yang diingini. Kami boleh meneruskan kod di atas, tetapi mari tambahkan kelas ke pautan untuk menjelaskan bahawa kami ingin melakukan operasi khas pada mereka:

<a href="https://www.php.cn/link/65dfa16ba6de9bdb34ea435c9fe2a425" class="toggle">Panel 1</a> | <a href="https://www.php.cn/link/379d08c7a38df48c777c07ea990a3bcf" class="toggle">Panel 2</a>

//

Berikut adalah bagaimana JavaScript berfungsi. Apabila halaman dimuatkan, skrip akan mengimbas semua pautan pada halaman untuk sebarang pautan yang mengandungi "togol" di kelasnya. Untuk sebarang pautan yang dijumpai, atribut HREF diperiksa dan elemen yang ditentukan diposisikan dan ditambah ke array elemen sasaran. Semua elemen lain kecuali elemen pertama akan "ditutup", jadi apabila halaman dimuat, hanya panel pertama akan tetap kelihatan. Pautan itu sendiri akan melampirkan pengendali acara JavaScript supaya apabila ia diaktifkan, panel yang sepadan mereka boleh dipaparkan.

Skrip lengkap boleh dilihat di sini. Berikut adalah penjelasan langkah demi langkah tentang bagaimana kod berfungsi.

var et_toggleElements = []; Baris pertama mencipta array kosong global yang akan menjimatkan rujukan kepada elemen panel pada halaman. Kerana skrip ini mempunyai pembolehubah global dan banyak fungsi, kami awalan setiap fungsi dengan "Et_" (untuk "mudah togol") - yang mengurangkan kemungkinan bahawa fungsi kami akan mempunyai konflik nama dengan skrip lain yang dimuatkan pada halaman yang sama.

Setakat ini, kami telah memulakan beberapa pembolehubah, menetapkan bendera pertama untuk benar, dan mula melangkah ke atas semua pautan dalam dokumen. Mengisytiharkan pembolehubah menggunakan /* Initialisation */ function et_init() { var i, link, id, target, first; first = true; for (i = 0; (link = document.links[i]); i ) { ... } sangat penting kerana ia memastikan bahawa pembolehubah adalah setempat kepada fungsi. Tanpa langkah ini, mereka akan dapat diakses secara global dan boleh mengganggu skrip lain.

var

Keadaan ini memeriksa sama ada kelas yang dihubungkan sekarang mengandungi "togol". Kami menggunakan ungkapan biasa dan bukan hanya menyemak

, kerana sifat kelas boleh mengandungi pelbagai kelas, dipisahkan oleh ruang. if (/btoggleb/.exec(link.className)) { ... } adalah ungkapan biasa;

link.className == 'toggle' /btoggleb/ Jika senarai kelas yang dipautkan mengandungi togol, kami mengandaikan bahawa sasaran pautan adalah coretan URL. b

Pecahkan pautan href pada tag # - kita tahu bahawa bahagian yang kami berminat adalah selepas #, jadi kami terus mengindeks array hasil menggunakan id = link.href.split('#')[1]; untuk mengekstrak ID sasaran.

di sini, kita membuat andaian lain bahawa pautan menunjukkan elemen itu wujud. Kami menggunakan kaedah getElementById() untuk mendapatkan elemen dan kemudian menambahkannya ke pelbagai elemen kami dengan memberikannya ke indeks array yang sama dengan panjang semasa array. Ini berfungsi kerana array mula mengindeks dari 0, tetapi panjang array dari 1;

if (first) { first = false; } else { target.style.display = 'none'; }

Ini adalah di mana logo pertama yang kami tentukan sebelum ini dimainkan. Kami mahu panel pertama di laman web itu tetap kelihatan, sementara yang lain tersembunyi menggunakan setara JavaScript dengan "Paparan: Tiada" dalam CSS. Bendera ini membolehkan kita melakukan ini.

link.onclick = et_toggle; Akhirnya, kami menetapkan fungsi

ke acara yang dipautkan

, menyebabkan fungsi dipanggil setiap kali pautan diaktifkan. Langkah seterusnya adalah untuk menentukan fungsi. et_toggle onclick

Sekali lagi, kami menggunakan kaedah

function extractBlockquoteCitations() {
    var quotes = document.getElementsByTagName('blockquote');
    for (var i = 0; i < quotes.length; i++) {
        var cite = quotes[i].getAttribute('cite');
        if (cite) {
            var a = document.createElement('a');
            a.setAttribute('href', cite);
            a.setAttribute('title', cite);
            a.appendChild(document.createTextNode('Source'));
            var p = document.createElement('p');
            p.className = 'blockquotesource';
            p.appendChild(a);
            quotes[i].appendChild(p);
        }
    }
}

untuk mengekstrak ID dari pautan.

split Sekarang kita tahu panel mana yang hendak dipaparkan, kita boleh melangkah melalui array elemen kami dan menutup semua elemen lain kecuali yang ID yang sesuai dengan ID panel yang dikehendaki.

Dengan kembali palsu, kami menghalang pautan daripada diikuti apabila diaktifkan, yang boleh menyebabkan lompatan yang tidak diingini pada halaman yang dilihat dalam penyemak imbas.

Langkah terakhir adalah untuk mendaftarkan fungsi

ke acara beban tetingkap menggunakan fungsi

yang diterangkan sebelum ini. addEvent et_init

anda boleh melihat kod penyelesaian yang berjalan di sini. addEvent(window, 'load', et_init);

Kesimpulan

Dalam artikel ini, kita melihat dua cara penanda berstruktur yang baik boleh digunakan dengan JavaScript dan W3C DOM untuk kesan berguna. Saya harap post ini memberi inspirasi kepada anda untuk mencari cara baru untuk menggunakan JavaScript dan penandaan pintar.

bacaan selanjutnya

Terdapat banyak contoh lain kesan JavaScript yang sangat baik berdasarkan tag berstruktur. Berikut adalah beberapa contoh yang patut memberi perhatian kepada:

Labels.js Aaron Boodman

tajuk bagus oleh Stuart Langridge
Stuart Langridge's Aqlists
Stuart Langridge's Sorttable
Kandungan Jadual Peter Paul-Koch
• soalan yang sering ditanya mengenai tag berstruktur dalam javascript

Apakah tag berstruktur dalam JavaScript?

Tag berstruktur dalam JavaScript adalah penggunaan elemen HTML untuk menggambarkan kandungan dan struktur dokumen web. Unsur -unsur ini termasuk tajuk, perenggan, senarai, dan banyak lagi. JavaScript boleh memanipulasi unsur -unsur ini untuk membuat laman web yang dinamik dan interaktif. Sebagai contoh, JavaScript boleh mengubah kandungan elemen HTML, menukar gaya (CSS) elemen HTML, dan juga menambah elemen HTML baru.

Bagaimanakah JavaScript berinteraksi dengan elemen HTML?

JavaScript berinteraksi dengan elemen HTML melalui Model Objek Dokumen (DOM). DOM mewakili struktur laman web, yang JavaScript boleh beroperasi. Sebagai contoh, JavaScript boleh menggunakan kaedah document.createTextNode() untuk membuat nod teks baru dan kemudian masukkannya ke elemen HTML yang sedia ada.

Apakah nod teks dalam JavaScript?

Nod teks dalam JavaScript adalah jenis nod yang mewakili kandungan teks elemen atau atribut. Ia boleh dibuat menggunakan kaedah document.createTextNode(). Kaedah ini mewujudkan nod teks baru yang boleh dilampirkan pada elemen HTML yang sedia ada, yang membolehkan anda menambah teks secara dinamik ke laman web.

Bagaimana untuk menambah JavaScript ke HTML?

JavaScript boleh ditambah kepada HTML dalam beberapa cara. Anda boleh menggunakan tag <script></script> untuk memasukkannya secara langsung dalam fail HTML, atau anda boleh menggunakan atribut <script></script> tag src untuk menghubungkan ke fail JavaScript luaran. Anda juga boleh menggunakan sifat acara seperti onclick atau onload untuk menjalankan kod JavaScript apabila peristiwa tertentu berlaku.

bagaimana menggunakan document.createTextNode() kaedah?

Kaedah

document.createTextNode() digunakan untuk membuat nod teks baru. Mula -mula hubungi kaedah ini dengan teks yang ingin anda tambahkan sebagai parameter. Ini mengembalikan nod teks baru, yang kemudiannya boleh dilampirkan pada elemen HTML yang sedia ada menggunakan kaedah appendChild().

Apakah Model Objek Dokumen (DOM)?

Model Objek Dokumen (DOM) adalah antara muka pengaturcaraan untuk dokumen HTML dan XML. Ia mewakili struktur dokumen sebagai pokok objek, setiap objek yang mewakili sebahagian daripada dokumen. JavaScript boleh berinteraksi dengan DOM untuk memanipulasi kandungan dan struktur laman web.

Bagaimana untuk menukar kandungan elemen HTML menggunakan JavaScript?

anda boleh menukar kandungan elemen HTML menggunakan atribut innerHTML dalam JavaScript. Harta ini boleh digunakan untuk mendapatkan atau menetapkan kandungan HTML elemen. Sebagai contoh, jika terdapat elemen dengan id "myelement", ia boleh diubah seperti ini: document.getElementById('myElement').innerHTML = 'New content';.

Bagaimana untuk menukar gaya elemen HTML menggunakan JavaScript?

Anda boleh menukar gaya elemen HTML menggunakan atribut style dalam JavaScript. Harta ini adalah objek yang mengandungi semua sifat CSS elemen. Sebagai contoh, jika terdapat elemen dengan id "myelement", ia boleh diubah seperti ini: document.getElementById('myElement').style.color = 'red';.

Bagaimana untuk menambah elemen HTML baru menggunakan JavaScript?

anda boleh menambah elemen HTML baru menggunakan kaedah createElement() dalam JavaScript. Kaedah ini mewujudkan elemen baru, yang kemudiannya boleh dilampirkan pada elemen sedia ada menggunakan kaedah appendChild(). Sebagai contoh, anda boleh membuat perenggan baru dan menambahkannya ke badan dokumen seperti berikut: var p = document.createElement('p'); document.body.appendChild(p);.

Apakah sifat acara dalam JavaScript?

Atribut Acara dalam JavaScript digunakan untuk menentukan kod JavaScript untuk dijalankan apabila peristiwa tertentu berlaku. Acara ini mungkin termasuk mengklik butang (onclick), memuatkan halaman (onload), atau menggerakkan tetikus ke atas elemen (onmouseover), dan lain -lain. Kod untuk acara ditakrifkan secara langsung dalam sifat elemen HTML.

Atas ialah kandungan terperinci Meningkatkan markup struktur dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!