Tutorial asas Javascript: bagaimana untuk mendapatkan elemen html

Dapatkan elemen html melalui ID

dokumen.getElementById()

Contoh:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>getElementById</title>	
</head>
<body>
	<h2><a href="www.php.cn">Javascript DOM</a></h2>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById('sp');
		document.write(sum);
	</script>
</body>
</html>

Sila ambil perhatian bahawa jika kita meletakkan pernyataan skrip dalam teg kepala, maka kita akan mengeluarkan null

Kemudian di bawah kita akan melihat innerHTML untuk mendapatkan kandungan elemen html

Mari kita tulis contoh di bawah:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById("sp");
		alert(sum.innerHTML);
	</script>
</body>
</html>

Dengan cara ini, kami akan mengeluarkan laman web php Cina, kemudian laksanakan kod js, dan kemudian muncul laman web php Cina

Kami juga boleh menetapkan semula jumlah, kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementById("sp");
		sum.innerHTML="玩转javascript";
		alert(sum.innerHTML);
	</script>
</body>
</html>

Rakan-rakan, buka halaman penyahpepijatan pepijat api, anda boleh menekan kekunci pintasan F12

Cari elemen HTML mengikut nama tag

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum = document.getElementsByTagName("p");
		document.write(sum);
	</script>
</body>
</html>

mengembalikan koleksi tatasusunan, lihat kod berikut:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

	<script type="text/javascript">
		var sum=document.getElementsByTagName("li");
		//alert(sum);  //返回一个数组集合
		//alert(sum.length);//返回数组数量
		//alert(sum[0]);  //返回HTMLLIElement  li的节点对象
		//alert(sum.item(0)); //同上，意义一样
		//alert(sum[0].tagName);  //返回第一个标签的名字
		alert(sum[0].innerHTML);  //显示第一个标签的内容
	</script>
</body>
</html>

Mari lihat perkara berikut, bagaimana untuk mendapatkan objek nod badan, tetapi Dalam html, kita hanya mempunyai sepasang badan, dan tiada pasangan badan kedua

Kodnya adalah seperti berikut

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
	<p id="sp">php中文网</p>

	<script type="text/javascript">
		var sum=document.getElementsByTagName("body")[0];
		alert(sum);
	</script>
</body>
</html>

getElementsByName

Dapatkan elemen dengan nama yang sama dan kembalikan tatasusunan objek

Yang berikut kod:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByName("test")[0];
		alert(sum);
	</script>
</body>
</html>

Perhatikan perbezaan antara IE Firefox dan Google Chrome Kedua-dua Firefox dan Google menyokongnya Atribut nama dalam pelayar IE bukanlah atribut div itu sendiri, jadi IE mengabaikannya. apabila kita menggunakan nama pada borang, Lagi

getElementsByClassName

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test" class="dv">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByClassName("dv");
		alert(sum);
	</script>
</body>
</html>

mengembalikan objek

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>	
</head>
<body>
		<div name="test" class="dv">php 中文网</div>

	<script type="text/javascript">
		var sum=document.getElementsByClassName("dv")[0];
		alert(sum);
	</script>
</body>
</html>

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>getElementById</title> </head> <body> <h2><a href="www.php.cn">Javascript DOM</a></h2> <p id="sp">php中文网</p> <script type="text/javascript"> var sum = document.getElementById('sp'); document.write(sum); </script> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Tutorial asas Javascript: bagaimana untuk mendapatkan elemen html

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]