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="ipnx.cn">Javascript DOM</a></h2>
<p id="sp">php中文網(wǎng)</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中文網(wǎng)</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中文網(wǎng)</p>
<script type="text/javascript">
var sum = document.getElementById("sp");
sum.innerHTML="玩轉(zhuǎn)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中文網(wǎng)</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中文網(wǎng)</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
var sum=document.getElementsByTagName("li");
//alert(sum); //返回一個(gè)數(shù)組集合
//alert(sum.length);//返回?cái)?shù)組數(shù)量
//alert(sum[0]); //返回HTMLLIElement li的節(jié)點(diǎn)對(duì)象
//alert(sum.item(0)); //同上，意義一樣
//alert(sum[0].tagName); //返回第一個(gè)標(biāo)簽的名字
alert(sum[0].innerHTML); //顯示第一個(gè)標(biāo)簽的內(nèi)容
</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中文網(wǎng)</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 中文網(wǎng)</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 中文網(wǎng)</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 中文網(wǎng)</div>
<script type="text/javascript">
var sum=document.getElementsByClassName("dv")[0];
alert(sum);
</script>
</body>
</html> 
