Javascript 基礎(chǔ)教學(xué)如何取得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 標籤內(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偵錯頁面，可以按快捷鍵F12
################################################## ###########透過標籤名稱找出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>返回的是一個陣列集合,看如下程式碼：
<!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); //返回第一個標簽的名字
alert(sum[0].innerHTML); //顯示第一個標簽的內(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
取得相同名稱的元素,傳回一個物件陣列
如下程式碼：#
<!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 ?火狐和Google瀏覽器的區(qū)別?火狐和Google都是支援的，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> 
