JavaScript(二) DOM

標籤：

當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。

通過 id 尋找 HTML 元素:getElementById 這裡大小寫敏感,而且不像VS報錯提示效能那麼好,所以寫JavaScript成功後有些許的成就感..

如果您需要操作某個特定的元素，使用 getElementById() 方法:

getElementById 是在一個標籤或者一個範圍內,根據標籤名選擇,如果要選擇第3個 input 那麼 var t=getElementById("input")[2].

<html><head><script type="text/javascript">function getElements()  {  var x=document.getElementsByTagName("input")[2];  alert(x.value);  }</script></head><body><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input type="button" onClick="getElements()"value="How many input elements?" /></body></html>

 

docunment.getElementById("id")；根據id找，最多找一個
var a =docunment.getElementById("id");
docunment.getElementByName("name")；根據name找，找出來的是數組
docunment.getElementByTagName("name")；根據標籤名找，找出來的是數組
docunment.getElementByClassName("name") 根據classname找，找出來的是數組

既然是數組,那麼要選某一個就在後面加[] 從0開始 例:docunment.getElementByName("name")[5] 意思是根據name找出來的第6個.

______________________________________________華麗麗的分割線______________________________________________

對事件作出反應

我們可以在事件發生時執行 JavaScript，比如當使用者在 HTML 元素上點擊時。

如需在使用者點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：

onclick=JavaScript       onclick事件

  也可以這樣

onclick事件:

<head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>無標題文檔</title><script>function changetext(id){id.innerHTML="謝謝!";}</script></head><body><h1 onclick="changetext(this)">請點擊該文本</h1></body>

滑鼠移至上方:

<body><div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把滑鼠移到上面</div><script>function mOver(obj){obj.innerHTML="呵呵"}function mOut(obj){obj.innerHTML="來點我"}</script>
</body>

Onchange事件:

<head><script>function myFunction(){var x=document.getElementById("fname");x.value=x.value.toUpperCase();}</script></head><body>請輸入英文字元：<input type="text" id="fname" onchange="myFunction()"><p>當您離開輸入欄位時，會觸發將輸入文本轉換為大寫的函數。</p></body>

 

 

 

 

 

 

JavaScript(二) DOM