Rumah >hujung hadapan web >tutorial js >Meningkatkan markup struktur dengan JavaScript
Titik utama
cite
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 ) { ... }
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
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
. Pada ketika ini, serpihan dokumen baru yang kami bina bersamaan dengan HTML berikut: var p = document.createElement('p'); p.className = 'blockquotesource'; p.appendChild(a);
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
window.onload
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.
Kemudian, ini adalah tanda paling mudah yang boleh berfungsi:
`
panel 1
|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
, 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'; }
link.onclick = et_toggle;
Akhirnya, kami menetapkan fungsi
, menyebabkan fungsi dipanggil setiap kali pautan diaktifkan. Langkah seterusnya adalah untuk menentukan fungsi. et_toggle
onclick
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);
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.
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
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.
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.
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.
document.createTextNode()
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()
.
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.
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';
.
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';
.
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);
.
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!