Bagaimana untuk mengendalikan tag html dengan javascript

JavaScript ialah bahasa skrip sebelah klien yang boleh digunakan untuk mengendalikan teg Html dalam halaman web untuk mencapai kesan dinamik dan interaksi pengguna.

Perkara pertama yang perlu ditekankan ialah JavaScript tidak mengendalikan secara langsung teg HTML yang dibuat, tetapi mendapatkan rujukan kepada teg yang ditentukan, dan kemudian menggunakan sifat dan kaedah dalam JavaScript untuk mengubah suai dan mengawal teg.

Pertama, kita perlu mendapatkan rujukan tag yang ditentukan. Kaedah yang biasa digunakan adalah seperti berikut:

1. Gunakan atribut id
   untuk mentakrifkan atribut id dalam teg HTML dan gunakan kaedah document.getElementById() dalam JavaScript untuk mendapatkan rujukan kepada tag. Contohnya:

Kod HTML

<div id="myDiv">这是一个Div标签</div>

Kod JavaScript

var myDiv = document.getElementById("myDiv");

2. Gunakan atribut kelas
   untuk mentakrifkan atribut kelas dalam teg HTML, Dan gunakan kaedah document.getElementsByClassName() dalam JavaScript untuk mendapatkan rujukan kepada semua teg kelas. Contohnya:

Kod HTML

<div class="myClass">这是一个class为myClass的Div标签</div>
<div class="myClass">这是另一个class为myClass的Div标签</div>

Kod JavaScript

var myDivs = document.getElementsByClassName("myClass");

3. Gunakan nama tag
   Gunakan document.getElementsByTagName( dalam JavaScript ) kaedah mendapatkan rujukan kepada semua tag dengan nama tag yang ditentukan. Contohnya:

Kod HTML

<div>这是一个Div标签</div>
<p>这是一个P标签</p>

Kod JavaScript

var divs = document.getElementsByTagName("div");//获取所有的div标签
var p = document.getElementsByTagName("p");//获取所有的p标签

4. Gunakan kaedah querySelector()
   Gunakan dokumen dalam JavaScript. Kaedah querySelector() mendapatkan rujukan kepada teg padanan pertama bagi pemilih yang ditentukan. Contohnya:

Kod HTML

这是一个class为myClass的Div标签
<div id="myDiv">这是一个Div标签</div>

Kod JavaScript

var myDiv = document.querySelector("#myDiv");//获取id为myDiv的标签
var myClass = document.querySelector(".myClass");//获取class为myClass的第一个标签

Selepas mendapatkan rujukan teg yang ditentukan, anda boleh menggunakan sifat dan kaedah dalam JavaScript ke tag Html dimanipulasi. Operasi yang biasa digunakan adalah seperti berikut:

1. Ubah suai kandungan dan atribut teg
   Anda boleh menggunakan atribut innerHTML dan setAttribute() kaedah teg untuk mengubah suai kandungan dan atribut teg . Contohnya:

Kod JavaScript

myDiv.innerHTML = "我是新内容";//修改myDiv的内容为"我是新内容"
myDiv.setAttribute("class", "newClass");//将myDiv的class属性改成"newClass"

2. Tunjukkan atau sembunyikan label
   Anda boleh menggunakan atribut style.display label untuk mengawal paparan atau menyembunyikan label. Contohnya:

Kod JavaScript

myDiv.style.display = "none";//将myDiv标签隐藏

3. Tambah atau padam teg
   Anda boleh menggunakan kaedah createElement() untuk mencipta teg baharu dan gunakan kaedah appendChild() untuk menambah teg baharu Teg ditambah di bawah teg yang ditentukan dan teg yang ditentukan dialih keluar daripada elemen induk menggunakan kaedah removeChild(). Contohnya:

Kod JavaScript

var newDiv = document.createElement("div");//创建新的div标签
newDiv.innerHTML = "我是新添加的div";//设置新标签的内容
myDiv.appendChild(newDiv);//将新标签添加到myDiv中
myDiv.parentNode.removeChild(myDiv);//将myDiv从它的父标签中删除

Ringkasnya, dengan mendapatkan rujukan teg yang ditentukan, anda boleh mengendalikan teg Html dalam JavaScript untuk mencapai kesan dinamik dan fungsi interaktif daripada halaman web. Sudah tentu, ini hanyalah puncak gunung es dalam cara JavaScript mengendalikan tag Html Masih terdapat banyak teknik berkuasa yang menunggu untuk kita terokai dan berlatih.

Atas ialah kandungan terperinci Bagaimana untuk mengendalikan tag html dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!