查詢元素

W3C為我們提供了比較方便的定位節點的方法和屬性，以便我們快速的對節點進行操作。分別為：

• getElementById()
  getElementById()方法，接受一個引數：獲取元素的 ID。如果找到相應的元素則返回該元素的 HTMLDivElement 物件，如果不存在，則返回 null。
  document.getElementById(‘box’); //獲取 id 為 box 的元素節點
  PS：上面的例子，預設情況返回 null，這無關是否存在 id="box"的標籤，而是執行順序問題。解決方法，1.把 script 呼叫標籤移到 html 末尾即可；2.使用 onload 事件來處理 JS，等待 html 載入完畢再載入 onload 事件裡的 JS。
  window.onload = function () { //預載入 html 後執行
  document.getElementById(‘box’);
  }；
  
  
  當我們通過 getElementById()獲取到特定元素節點時，這個節點物件就被我們獲取到了， 而通過這個節點物件，我們可以訪問它的一系列屬性

<div class="odiv1" id="box" title="標題屬性值">元素節點裡的內容</div>

document.getElementById('box').tagName;	// 獲取元素節點的標籤名
document.getElementById('box').innerHTML;	// 獲取元素節點裡的內容，非 W3C DOM 規範
/*注意，當使用innerHTML="<h1>123</h1>"*/改變元素節點內容插入標籤時，innerHTML屬性會解析標籤，網頁上會顯示h1級別的123
/*也可以使用innerTEXT="<h1>123</h1>"*/在內容中寫入標籤，但是innerTEXT不會解釋標籤，他會在網頁中原樣顯示<h1>123</h1>

document.getElementById('box').id;					//獲取 id 
document.getElementById('box').style;				//獲CSS StyleDeclaration 物件
document.getElementById('box').style.color;		//獲取 style 物件中 color 的值
document.getElementById('box').className;			// 獲 取 class
document.getElementById('box).style.color="red";			// 以上所有值都可以修改
 

• getElementByTagName()
  getElementsByTagName()方法將返回一個物件陣列 HTMLCollection(NodeList)，這個陣列儲存著所有相同元素名的節點列表。

document.getElementsByTagName("*");			// 獲取所有元素；
document.getElementsByTagName("li");			//獲取所有的 li 標籤
document.getElementsByTagName("li")[0];			// 獲取第一個li標籤

• getElementsByName()
  getElementsByName()方法可以獲取相同name的元素，返回一個物件陣列

document.getElementByName("add");			獲取name屬性值為add的元素

• getAttribute()獲取元素中某個屬性的值

document.getElementById('box').getAttribute('id');//獲取元素的 id 值
document.getElementById('box').id;	//獲取元素的 id 值

document.getElementById('box').getAttribute('mydiv');//獲取元素的自定義屬性值document.getElementById('box').mydiv

• removeAttribute()移除屬性

document.getElementById("box").removeAttribute("value");

滑鼠移入，移出控制

.button{
	height: 20px;
	heigh: 20px;
	border: 1px solid black;
}
.odiv1{
	height: 100px;
	width: 100px;
	background: yellow;
	display: none;
}
// 首先讓#event隱藏，當滑鼠移入button按鈕時，onmouseover屬性值內的"event2.style.display="block"可以讓#event顯示出來
// onmouseout滑鼠移出按鈕時又會讓#event2-"event2.style.display="block"隱藏
<button class="button" id="event1" onmouseover="event2.style.display='block';"
        onmouseout="event2.style.display='none'">登陸</button>
<div class="odiv1" id="event2">滑鼠移入後顯示的效果</div>

使用函式做滑鼠的移入移出

.odiv1{
            height: 200px;
            width: 200px;
            background: red;
        }
<div class="odiv1" id="box1" onmouseover="toGreen()" onmouseout="toRed()"></div>
<script>
/*使用function 函式名()定義函式*/
     function toGreen(){
     /*可以將重複的程式碼放在一個變數中，這個變數只能在這個函式的作用域中使用*/
         var arg = document.getElementById('box1');
         arg.style.height='300px';
         arg.style.width='300px';
         arg.style.background='green';
     }
     function toRed(){
         var arg = document.getElementById('box1');
         arg.style.height='200px';
         arg.style.width='200px';
         arg.style.background='red';
     }
 </script>