JS中节点操作实例
本文主要和大家分享JS中节点操作实例，主要以代码的形式和大家分享，希望能帮助到大家。
节点的增删改查
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1,.p2,.p3,.p4{ width: 300px; height: 100px; }
.p1{ background-color: green; }
.p2{ background-color: yellow; }
.p3{ background-color: rebeccapurple; }
.p4{ background-color: deeppink; }
</style></head><body><p class="p1">
<button onclick="add()">add</button>
hello p1</p><p class="p2">
<button onclick="del()">del</button>
hello p2</p><p class="p3">
<button onclick="change()">change</button>
<p>hello p3</p></p><p class="p4">hello p4</p><script>###############增加节点###################### function change() {
var img=document.createElement("img");//<img src="">
//img.setAttribute("src","meinv.jpg");
img.src="meinv.jpg"; var ele=document.getElementsByTagName("p")[0]; var father=document.getElementsByClassName("p3")[0];
father.replaceChild(img,ele)
}
###############修改节点###################### function add() {
var ele=document.createElement("p");//<p></p>
ele.innerHTML="<h1>hello p</h1>"; //ele.innerText="<h1>hello p</h1>";
ele.style.color="red";
ele.style.fontSize="10px"; var father=document.getElementsByClassName("p1")[0];
father.appendChild(ele)
}
###############删除节点###################### function del() {
var father=document.getElementsByClassName("p1")[0]; var son=father.getElementsByTagName("p")[0];
father.removeChild(son)
}</script></body></html>利用JS绑定事件的两种方式
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p onclick="func(this)">hello</p><p>hello p</p><script>
// 绑定事件方式一
function func(self) {
console.log(self)
alert(1234)
} // 绑定事件方式二
var ele=document.getElementsByTagName("p")[0]
ele.onclick=function () {
console.log(ele);
console.log(this);// alert(6666)
}</script></body></html>JS的class属性
<script>
var ele=document.getElementsByTagName("p")[0];
# class的名称
console.log(ele.className);
# 以列表返回class中值
console.log(ele.classList[0]);
# 以列表返回class中值
console.log(ele.classList[1]);
# 向列表中增加元素
ele.classList.add("hide")
console.log(ele.className);</script>Event对象：封装了事件的信息
可以用来阻止事件传播
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><form action="" id="form1">
<input type="text" name="username">
<input type="submit" value="提交"></form><script>
var ele=document.getElementById("form1");
ele.onsubmit=function (e) {// console.log("hello")
alert(1234); // 方式一 返回false
return false
// 方式二 preventDefault函数
//e.preventDefault()
}</script></body></html>相关推荐：
Atas ialah kandungan terperinci JS中节点操作实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1391
52
Tutorial penggunaan PyCharm: membimbing anda secara terperinci untuk menjalankan operasi
Feb 26, 2024 pm 05:51 PM
PyCharm ialah persekitaran pembangunan bersepadu (IDE) Python yang sangat popular. Ia menyediakan pelbagai fungsi dan alatan untuk menjadikan pembangunan Python lebih cekap dan mudah. Artikel ini akan memperkenalkan anda kepada kaedah operasi asas PyCharm dan menyediakan contoh kod khusus untuk membantu pembaca memulakan dengan cepat dan menjadi mahir dalam mengendalikan alat tersebut. 1. Muat turun dan pasang PyCharm Pertama, kita perlu pergi ke laman web rasmi PyCharm (https://www.jetbrains.com/pyc
Apakah sudo dan mengapa ia penting?
Feb 21, 2024 pm 07:01 PM
sudo (eksekusi superuser) ialah arahan utama dalam sistem Linux dan Unix yang membenarkan pengguna biasa menjalankan perintah tertentu dengan keistimewaan root. Fungsi sudo dicerminkan terutamanya dalam aspek berikut: Menyediakan kawalan kebenaran: sudo mencapai kawalan ketat ke atas sumber sistem dan operasi sensitif dengan membenarkan pengguna mendapatkan kebenaran superuser buat sementara waktu. Pengguna biasa hanya boleh mendapatkan keistimewaan sementara melalui sudo apabila diperlukan, dan tidak perlu log masuk sebagai pengguna super sepanjang masa. Keselamatan yang dipertingkatkan: Dengan menggunakan sudo, anda boleh mengelak daripada menggunakan akaun akar semasa operasi rutin. Menggunakan akaun akar untuk semua operasi boleh menyebabkan kerosakan sistem yang tidak dijangka, kerana sebarang operasi yang salah atau cuai akan mempunyai kebenaran penuh. dan
Langkah-langkah operasi dan langkah berjaga-jaga Deploy Linux
Mar 14, 2024 pm 03:03 PM
Langkah pengendalian dan langkah berjaga-jaga LinuxDeploy LinuxDeploy ialah alat berkuasa yang boleh membantu pengguna menggunakan pelbagai pengedaran Linux dengan pantas pada peranti Android, membolehkan pengguna mengalami sistem Linux yang lengkap pada peranti mudah alih mereka. Artikel ini akan memperkenalkan langkah pengendalian dan langkah berjaga-jaga LinuxDeploy secara terperinci dan memberikan contoh kod khusus untuk membantu pembaca menggunakan alat ini dengan lebih baik. Langkah-langkah operasi: Pasang LinuxDeploy: Pertama, pasang
Apa yang perlu dilakukan jika anda terlupa menekan F2 untuk kata laluan but win10
Feb 28, 2024 am 08:31 AM
Mungkin ramai pengguna mempunyai beberapa komputer yang tidak digunakan di rumah, dan mereka telah lupa sepenuhnya kata laluan kuasa hidup kerana mereka tidak digunakan untuk masa yang lama, jadi mereka ingin tahu apa yang perlu dilakukan jika mereka terlupa kata laluan? Kemudian mari kita lihat bersama-sama. Apa yang perlu dilakukan jika anda terlupa menekan F2 untuk kata laluan boot win10 1. Tekan butang kuasa komputer, dan kemudian tekan F2 semasa but (jenama komputer yang berbeza mempunyai butang yang berbeza untuk memasuki BIOS). 2. Dalam antara muka bios, cari pilihan keselamatan (lokasi mungkin berbeza untuk jenama komputer yang berbeza). Biasanya dalam menu tetapan di bahagian atas. 3. Kemudian cari pilihan SupervisorPassword dan klik padanya. 4. Pada masa ini, pengguna boleh melihat kata laluannya, dan pada masa yang sama mencari Didayakan di sebelahnya dan menukarnya kepada Dis.
Perkongsian langkah operasi tangkapan skrin Huawei Mate60 Pro
Mar 23, 2024 am 11:15 AM
Dengan populariti telefon pintar, fungsi tangkapan skrin telah menjadi salah satu kemahiran penting untuk kegunaan harian telefon bimbit. Sebagai salah satu telefon mudah alih utama Huawei, fungsi tangkapan skrin Huawei Mate60Pro secara semula jadi telah menarik banyak perhatian daripada pengguna. Hari ini, kami akan berkongsi langkah operasi tangkapan skrin telefon mudah alih Huawei Mate60Pro, supaya semua orang boleh mengambil tangkapan skrin dengan lebih mudah. Pertama sekali, telefon bimbit Huawei Mate60Pro menyediakan pelbagai kaedah tangkapan skrin, dan anda boleh memilih kaedah yang sesuai dengan anda mengikut tabiat peribadi anda. Berikut ialah pengenalan terperinci kepada beberapa pemintasan yang biasa digunakan:
Tutorial PHP PDO: Panduan Lanjutan daripada Asas kepada Penguasaan
Feb 19, 2024 pm 06:30 PM
1. Pengenalan kepada PDO PDO ialah perpustakaan sambungan PHP, yang menyediakan cara berorientasikan objek untuk mengendalikan pangkalan data. PDO menyokong pelbagai pangkalan data, termasuk Mysql, postgresql, oracle, SQLServer, dll. PDO membolehkan pembangun menggunakan API bersatu untuk mengendalikan pangkalan data yang berbeza, yang membolehkan pembangun bertukar dengan mudah antara pangkalan data yang berbeza. 2. PDO menyambung ke pangkalan data Untuk menggunakan PDO untuk menyambung ke pangkalan data, anda perlu mencipta objek PDO terlebih dahulu. Pembina objek PDO menerima tiga parameter: jenis pangkalan data, nama hos, nama pengguna pangkalan data dan kata laluan. Sebagai contoh, kod berikut mencipta objek yang bersambung ke pangkalan data mysql: $dsn="mysq
Ketahui contoh amalan terbaik penukaran penunjuk di Golang
Feb 24, 2024 pm 03:51 PM
Golang ialah bahasa pengaturcaraan yang berkuasa dan cekap yang boleh digunakan untuk membangunkan pelbagai aplikasi dan perkhidmatan. Di Golang, penunjuk ialah konsep yang sangat penting, yang boleh membantu kami mengendalikan data dengan lebih fleksibel dan cekap. Penukaran penunjuk merujuk kepada proses operasi penunjuk antara jenis yang berbeza Artikel ini akan menggunakan contoh khusus untuk mempelajari amalan terbaik penukaran penunjuk di Golang. 1. Konsep asas Di Golang, setiap pembolehubah mempunyai alamat, dan alamat adalah lokasi pembolehubah dalam ingatan.
Manipulasi rentetan PHP: cara praktikal untuk mengalih keluar ruang dengan berkesan
Mar 24, 2024 am 11:45 AM
Operasi Rentetan PHP: Kaedah Praktikal untuk Mengalih Keluar Ruang Secara Berkesan Dalam pembangunan PHP, kita sering menghadapi situasi di mana kita perlu mengalih keluar ruang daripada rentetan. Mengalih keluar ruang boleh menjadikan rentetan lebih bersih dan memudahkan pemprosesan dan paparan data seterusnya. Artikel ini akan memperkenalkan beberapa kaedah yang berkesan dan praktikal untuk mengalih keluar ruang, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan fungsi PHP terbina dalam trim() fungsi terbina dalam PHP boleh mengalih keluar ruang pada kedua-dua hujung rentetan (termasuk ruang, tab, baris baharu, dsb.), yang sangat mudah dan mudah. untuk menggunakan.
