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>bahagian seterusnya