Javascript 基礎(chǔ)教程之如何獲取html 元素
通過ID 獲取html 元素
document.getElementById()
實例：
<!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>大家注意下，如果我們把腳本語句放在head 標(biāo)簽內(nèi)，那么我們將輸出null
那么下面我們將看一個innerHTML 獲取html元素的內(nèi)容
下面我們寫一個實例：
<!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>這樣我們本身會輸出一個php中文網(wǎng)，然后執(zhí)行js代碼，然后彈出php中文網(wǎng)
我們同樣可以給sum 重新賦值，代碼如下：
<!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>小伙伴們打開firebug調(diào)試頁面，可以按快捷鍵F12
通過標(biāo)簽名查找 HTML 元素
<!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>返回的是一個數(shù)組集合,看如下代碼：
<!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); //返回一個數(shù)組集合
//alert(sum.length);//返回數(shù)組數(shù)量
//alert(sum[0]); //返回HTMLLIElement li的節(jié)點對象
//alert(sum.item(0)); //同上，意義一樣
//alert(sum[0].tagName); //返回第一個標(biāo)簽的名字
alert(sum[0].innerHTML); //顯示第一個標(biāo)簽的內(nèi)容
</script>
</body>
</html>下面我們來看以下，如何獲取body節(jié)點對象，但是html中我們只有你一對body，并沒有第二對body
代碼如下所示
<!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
獲取相同名稱的元素,返回一個對象數(shù)組
如下代碼：
<!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>注意IE 火狐 和谷歌瀏覽器的區(qū)別 火狐和谷歌都是支持的，name屬性在ie 瀏覽器中，本身就不是div 的屬性，所以ie 就忽略掉了，一般name 我們應(yīng)用于表單會比較多
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>返回一個對象，下面我們來看一段代碼：
<!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> 
