Javascript 基礎教學如何取得html 元素
透過ID 取得html 元素
document.getElementById()
#實例：
<!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>大家注意下，如果我們把腳本語句放在head 標籤內，那麼我們將輸出null
那麼下面我們將看一個innerHTML 取得html元素的內容
下面我們寫一個實例：
<!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>這樣我們本身會輸出一個php中文網，然後執行js程式碼，然後彈出php中文網
我們同樣可以為sum 重新賦值，程式碼如下：
<!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>小夥伴們開啟firebug偵錯頁面，可以按快捷鍵F12
################################################## ###########透過標籤名稱找出HTML 元素#########
<!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>返回的是一個陣列集合,看如下程式碼：
<!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>下面我們來看以下，如何取得body節點對象，但是html中我們只有你一對body，並沒有第二對body
程式碼如下圖
<!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
取得相同名稱的元素,傳回一個物件陣列
如下程式碼：#
<!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>###注意IE 火狐和Google瀏覽器的區別 火狐和Google都是支援的，name屬性在ie 瀏覽器中，本身就不是div 的屬性，所以ie 就忽略掉了，一般name 我們應用於表單會比較多###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>回傳一個對象，下面我們來看一段程式碼：
<!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>下一節<!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>
