Cara cepat memulai dengan VUE3.0: Masuk ke pembelajaran
Rekomendasi terkait: Tutorial JavaScript
1. Dapatkanelemen operasi.
Objek dokumen menyediakan beberapa metode untuk menemukan elemen berdasarkan id, nama, dan kelasnya. Dapatkan elemen operasi melalui atribut dan nama tag.
Ringkasan:
Kecuali metode document.getElementById() mengembalikan elemen dengan id yang ditentukan, metode lain mengembalikan koleksi yang memenuhi persyaratan. Untuk mendapatkan salah satu objek, Anda bisa mendapatkannya dengan subskrip yang dimulai dari 0 secara default.
Objek dokumen menyediakan beberapa properti yang dapat digunakan untuk memperoleh elemen dalam dokumen. Misalnya, dapatkan semua tag formulir, tag gambar, dll.
Perhatikan bahwa
elemen operasi yang diperoleh melalui metode objek dokumen dan properti objek dokumen mewakili objek yang sama. Misalnya, document.getElementsByTagName('body')[0] kongruen dengan document.body.
Metode objek dokumen baru HTML5
Agar lebih mudah mendapatkan elemen untuk pengoperasian, HTML5 menambahkan dua metode baru pada objek dokumen, yaitu querySelector() dan querySelectorAll().
Karena kedua metode ini digunakan dengan cara yang sama, berikut ini penggunaan metode document.querySelector() sebagai contoh.
Dalam operasi DOM, objek elemen juga menyediakan metode untuk memperoleh elemen tertentu dalam suatu elemen. Dua metode yang umum digunakan adalah getElementsByClassName() dan getElementsByTagName(). Mereka digunakan dengan cara yang sama seperti metode dengan nama yang sama di objek dokumen.
Selain itu, objek elemen juga menyediakan atribut anak untuk mendapatkan elemen anak dari elemen yang ditentukan. Misalnya, dapatkan elemen turunan ul pada contoh di atas.
Objek HTMLCollection
Perbedaan antara objek HTMLCollection dan NodeList:
Tip: Untuk koleksi yang dikembalikan oleh metode getElementsByClassName(), metode getElementsByTagName() dan atribut anak, id dan nama dapat secara otomatis dikonversi menjadi atribut.
2. Konten elemen
Dalam JavaScript, jika Anda ingin mengoperasikan konten elemen yang diperoleh, Anda dapat menggunakan properti dan metode yang disediakan oleh DOM.
Berikan sebuah contoh
Implementasi kode
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<title>Operasi konten elemen</title>
</kepala>
<tubuh>
<p id="kotak">
Paragraf pertama...
<p>
Paragraf kedua...
<a href="http://www.example.com">ketiga</a>
</p>
</p>
<skrip>
var kotak = dokumen.getElementById('kotak');
console.log(kotak.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</skrip>
</tubuh>
</html> Perhatikan bahwa
masalah kompatibilitas browser mungkin terjadi saat menggunakan atribut innerText. Oleh karena itu, disarankan
untuk menggunakan innerHTML untuk mendapatkan atau mengatur konten teks elemen sebanyak mungkin selama pengembangan. Pada saat yang sama, ada perbedaan tertentu antara atribut innerHTML dan metode document.write() dalam mengatur konten. Metode yang pertama bertindak pada elemen yang ditentukan, sedangkan metode yang kedua merekonstruksi seluruh halaman dokumen HTML. Oleh karena itu, pembaca harus memilih metode implementasi yang sesuai dengan kebutuhan aktual selama pengembangan
[Kasus] Mengubah ukuran kotak
Ide implementasi kode :
① Tulis HTML dan atur ukuran p.
② Selesaikan perubahan ukuran kotak sesuai dengan jumlah klik pengguna.
③ Jika jumlah klik ganjil, kotak menjadi lebih besar; jika jumlah klik genap, kotak menjadi lebih kecil.
Implementasi kode
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<gaya>
.box{width:50px;height:50px;background:#eee;margin:0 auto;}
</gaya>
</kepala>
<tubuh>
<p id="kotak" kelas="kotak"></p>
<skrip>
var kotak = dokumen.getElementById('kotak');
var i = 0; // Simpan berapa kali pengguna mengklik kotak box.onclick = function() { // Menangani event klik pada kotak ++i;
if (i % 2) { // Jumlah klik ganjil dan menjadi lebih besar this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = 'besar';
} else { // Jumlah klik genap dan menjadi lebih kecil this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = 'kecil';
}
};
</skrip>
</tubuh>
</html> 3. Atribut elemen
Di DOM, untuk memfasilitasi JavaScript memperoleh, memodifikasi, dan menelusuri atribut yang relevan dari elemen HTML yang ditentukan, atribut dan metode operasi disediakan.
Anda dapat menggunakan atribut atribut untuk mendapatkan semua atribut elemen HTML, serta jumlah semua atribut, panjangnya.
Berikan sebuah contoh
Implementasi kode
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<title>Operasi atribut elemen</title>
<gaya>
.abu-abu{latar belakang: #CCC;}
#tebal{berat font: lebih tebal;}
</gaya>
</kepala>
<tubuh>
<p>kata ujian.</p>
<skrip>
// Dapatkan elemen p var ele = document.getElementsByTagName('p')[0];
// ① Menampilkan jumlah atribut ele saat ini console.log('Jumlah atribut sebelum operasi: ' + ele.attributes.length);
// ② Tambahkan atribut ke ele dan periksa jumlah atribut ele.setAttribute('align', 'center');
ele.setAttribute('judul', 'Teks tes');
ele.setAttribute('kelas', 'abu-abu');
ele.setAttribute('id', 'tebal');
ele.setAttribute('style', 'ukuran font:24px;batas:1px hijau solid;');
console.log('Jumlah atribut setelah menambahkan atribut: ' + ele.attributes.length);
// ③ Dapatkan nilai atribut gaya dari ele console.log('Dapatkan nilai atribut gaya:' + ele.getAttribute('style'));
// ④ Hapus atribut style dari ele dan periksa atribut yang tersisa ele.removeAttribute('style');
console.log('Lihat semua properti:');
for (var i = 0; i < ele.attributes.length; ++i) {
console.log(ele.atribut[i]);
}
</skrip>
</tubuh>
</html> 4. Tinjauan gaya elemen
: Memodifikasi gaya melalui pengoperasian atribut elemen.
Sintaks gaya elemen: gaya.Nama atribut.
Persyaratan: Anda perlu menghilangkan tanda hubung "-" pada nama gaya CSS dan menggunakan huruf kapital pada huruf awal bahasa Inggris kedua.
Contoh: Untuk mengatur warna latar belakang, warna latar, perlu diubah menjadi warna latar belakang dalam operasi atribut gaya.
Perhatikan bahwa
gaya float di CSS bertentangan dengan kata-kata khusus JavaScript, dan browser yang berbeda memiliki solusi yang berbeda
. Misalnya, IE9-11, Chrome, dan FireFox dapat menggunakan "float" dan "cssFloat", browser Safari menggunakan "float", dan IE6~8 menggunakan "styleFloat".
Pertanyaan: Suatu elemen dapat memiliki beberapa penyeleksi kelas. Bagaimana cara mengoperasikan daftar pemilih selama pengembangan?
Solusi asli: Gunakan atribut className dari objek elemen untuk mendapatkan hasil. Hasil yang diperoleh adalah tipe karakter, dan kemudian proses string sesuai dengan situasi sebenarnya.
Metode yang disediakan oleh HTML5: daftar pemilih kelas dari elemen classList baru (hanya baca).
Misalnya: Jika nilai kelas elemen p adalah "judul daftar navigasi header kotak", bagaimana cara menghapus header?
Solusi HTML5: elemen p object.classList.toggle("header
");
Implementasi kode
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<title>Penggunaan classList</title>
<gaya>
.bg{latar belakang:#ccc;}
.strong{ukuran font:24px;warna:merah;}
.smooth{height:30px;width:120px;border-radius:10px;}
</gaya>
</kepala>
<tubuh>
<ul>
<li>PHP</li>
<li class="bg">JavaScript</li>
<li>C++</li>
<li>Jawa</li>
</ul>
<script> // Dapatkan elemen li kedua var ele = document.getElementsByTagName('li')[1]; // Jika tidak ada kelas kuat di elemen li, tambahkan if (!ele.classList.contains('strong ' )) { ele.classList.add('strong'); // Jika tidak ada kelas smooth di elemen li, tambahkan; jika dihapus, ele.classList.toggle('smooth'); log('Tambahkan dan ganti gaya Setelah: '); console.log(ele);
<skrip>
ele.classList.hapus('bg');
console.log('Setelah penghapusan:');
konsol.log(ele);
</skrip>
</tubuh>
</html> Selain itu, atribut classList juga menyediakan banyak metode operasi dan properti terkait lainnya.
5. [Kasus] Efek peralihan bilah tab
Ide implementasi kode :
① Tulis HTML untuk mendesain struktur dan gaya bilah tab, di mana kelas sama dengan saat ini untuk menunjukkan tab yang sedang ditampilkan, dan defaultnya adalah tab pertama.
② Dapatkan semua tag dan konten tampilan yang sesuai dengan tag.
③ Melintasi dan menambahkan acara mouse-over untuk setiap label. Dalam fungsi pemrosesan acara, melintasi semua konten tampilan yang sesuai dengan label, tambahkan arus melalui metode add() classList, jika tidak gunakan hapus() Metode keluar dari arus.
Implementasi kode
<!DOCTYPEhtml>
<html>
<kepala>
<meta charset="UTF-8">
<title>Efek peralihan bilah tab</title>
<gaya>
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
.tab-head{tinggi:31px;}
.tab-head-p{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text- sejajarkan:tengah;kursor:penunjuk;warna:#fff;}
.tab-head .current{latar belakang:#fff;border-bottom:1px solid #fff;color:#000;}
.tab-head-r{perbatasan-kanan:0;}
.tab-body-p{display:none;margin:20px 10px;}
.tab-body .current{display:block;}
</gaya>
</kepala>
<tubuh>
<p kelas="kotak-tab">
<p kelas="kepala-tab">
<p class="tab-head-p current">Tab satu</p>
<p class="tab-head-p">Tab 2</p>
<p class="tab-head-p">Tab tiga</p>
<p class="tab-head-p tab-head-r">Tab empat</p>
</p>
<!--jkdjfk?-->
<p kelas="tab-body">
<p class="tab-body-p saat ini"> 1 </p>
<p kelas="tab-body-p"> 2 </p>
<p kelas="tab-body-p"> 3 </p>
<p kelas="tab-body-p"> 4 </p>
</p>
</p>
<skrip>
// Dapatkan semua objek elemen tab pada bilah tab var tabs = document.getElementsByClassName('tab-head-p');
// Dapatkan semua objek konten pada bilah tab var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // Melintasi objek elemen tabs[i].onmouseover = function() { // Menambahkan event mouseover ke objek elemen tag for ( var i = 0; i < ps.length; ++i) { // Melintasi objek elemen konten pada bilah tab if (tabs[i] == this) { // Menampilkan elemen li ps[i] yang digunakan mouse saat ini telah meluncur ke .classList.add('current');
tabs[i].classList.add('saat ini');
} else { // Sembunyikan elemen li lainnya ps[i].classList.remove('current');
tabs[i].classList.remove('saat ini');
}
}
};
}
</skrip>
</tubuh>
</html> Rekomendasi terkait: tutorial javascript
Di atas adalah rincian isi operasi elemen HTML yang dijelaskan secara rinci dengan contoh JavaScript. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di situs web php Cina!
