Rumah >hujung hadapan web >tutorial js >Pandangan mendalam pada jenis dan penggunaan pemilih JavaScript
Pandangan mendalam pada jenis dan penggunaan pemilih JavaScript
- 王林asal
- 2023-12-26 12:38:511394semak imbas
Teroka secara mendalam pelbagai jenis dan penggunaan pemilih JavaScript
Pengenalan:
JavaScript ialah bahasa skrip berkuasa yang digunakan secara meluas dalam pembangunan web. Semasa proses pembangunan, kita selalunya perlu mendapatkan atau memanipulasi elemen HTML melalui pemilih. JavaScript menyediakan pelbagai jenis pemilih untuk memenuhi keperluan yang berbeza. Artikel ini akan meneroka secara mendalam jenis dan kegunaan pemilih JavaScript yang berbeza serta memberikan contoh kod konkrit.
1. pemilih getElementById
getElementById mendapat elemen HTML yang sepadan melalui atribut ID elemen. Ini adalah pemilih paling asas.
Kod contoh: Dapatkan elemen melalui getElementById dan ubah suai kandungannya.
<!DOCTYPE html>
<html>
<head>
<script>
function changeContent() {
var element = document.getElementById("myElement");
element.innerHTML = "Hello, World!";
}
</script>
</head>
<body>
<div id="myElement">原内容</div>
<button onclick="changeContent()">点击修改内容</button>
</body>
</html> 2. pemilih getElementsByClassName
getElementsByClassName mendapat set elemen HTML melalui nama kelas elemen. Apabila terdapat elemen dengan nama kelas yang sama dalam halaman, elemen ini boleh dikendalikan dalam kelompok.
Contoh kod: Dapatkan set elemen melalui getElementsByClassName dan ubah suai gayanya.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
function addHighlight() {
var elements = document.getElementsByClassName("myElement");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add("highlight");
}
}
</script>
</head>
<body>
<div class="myElement">元素1</div>
<div class="myElement">元素2</div>
<div class="myElement">元素3</div>
<button onclick="addHighlight()">点击添加样式</button>
</body>
</html> 3. pemilih getElementsByTagName
getElementsByTagName mendapat satu set elemen HTML melalui nama tag bagi elemen tersebut. Anda boleh menentukan nama teg tertentu untuk memilih elemen.
Kod contoh: Dapatkan teg p melalui getElementsByTagName dan ubah suai kandungannya.
<!DOCTYPE html>
<html>
<head>
<script>
function changeContent() {
var elements = document.getElementsByTagName("p");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "这是第" + (i+1) + "个段落";
}
}
</script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<button onclick="changeContent()">点击修改内容</button>
</body>
</html>4. querySelector
querySelector memilih elemen HTML melalui sintaks pemilih CSS. Elemen boleh diperolehi berdasarkan ID elemen, nama kelas, nama tag dan kaedah pemilihan lain.
Kod contoh: Dapatkan elemen padanan pertama melalui querySelector dan ubah suai gayanya.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
function addHighlight() {
var element = document.querySelector(".myElement");
element.classList.add("highlight");
}
</script>
</head>
<body>
<div class="myElement">元素1</div>
<div class="myElement">元素2</div>
<div class="myElement">元素3</div>
<button onclick="addHighlight()">点击添加样式</button>
</body>
</html>Ringkasan:
Artikel ini mengambil penerokaan mendalam tentang pelbagai jenis dan kegunaan pemilih JavaScript, dan menyediakan contoh kod konkrit. Melalui pemilih seperti getElementById, getElementsByClassName, getElementsByTagName dan querySelector, kami boleh mendapatkan dan mengendalikan elemen HTML dengan mudah. Penggunaan pemilih yang fleksibel boleh membantu kami membangunkan aplikasi JavaScript dengan lebih cekap.
Atas ialah kandungan terperinci Pandangan mendalam pada jenis dan penggunaan pemilih JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!