DOM節點操作
DOM節點操作
在JavaScript中，可以通過以下2種方式來選中指定元素：
（1）getElementById()；
在JavaScript中，如果想通過id來選中元素，我們可以使用document物件的getElementById()方法。
getElementById()方法類似於CSS中的id選擇器。
語法：
|
1 |
|
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="lvye">1</div> <script type="text/javascript"> var e = document.getElementById("lvye"); e.style.color = "red"; </script> </body> </html>
分析：
這裡使用document.getElementById()的方法獲取id為lvye的div元素，然後把這個DOM物件賦值給變數e，然後使用DOM物件的style物件來設定div元素顏色為紅色。
getElementsByName()；
在JavaScript中，如果想通過name來選中元素，我們可以使用document物件的getElementsByName()方法。
語法：
|
1 |
|
說明：
getElementsByName()方法都是用於獲取表單元素。
與getElementById()方法不同的是，使用該方法的返回值是一個數組，而不是一個元素。因此，我們想要獲取具體的某一個表單元素，就必須通過陣列下標來獲取。
注意，是getElementsByName()而不是getElementByName()。陣列嘛，當然是複數。
舉例：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <input name="web" id="radio1" type="radio" value="HTML"/> <input name="web" id="radio2" type="radio" value="CSS"/> <input name="web" id="radio3" type="radio" value="JavaScript"/> <input name="web" id="radio4" type="radio" value="jQuery"/> <script type="text/javascript"> alert(document.getElementsByName("web")[0].value); </script> </body> </html>
分析：
getElementsByName()方法在實際開發中比較少用，大家瞭解一下即可。
其實可以這樣說， getElementById()和getElementsByName()這兩種方法是“JavaScript選擇器”。
除了getElementById()和getElementsByName()這兩種方法，JavaScript還提供另外一種getElementByTagName()方法，這個方法類似於CSS中的元素選擇器。但是getElementByTagName()方法有個很大缺點，它會把整個頁面中相同的元素都選中。用起來也比較麻煩，實際開發中很少用到。
滑鼠事件
| 事件 | 說明 |
|---|---|
| onclick | 滑鼠單擊事件 |
| ondbclick | 滑鼠雙擊事件 |
| onmouseover | 滑鼠移入事件 |
| onmouseout | 滑鼠移出事件 |
| onmousemove | 滑鼠移動事件 |
| onmousedown | 滑鼠按下事件 |
| onmouseup | 滑鼠鬆開事件 |
鍵盤事件
JavaScript鍵盤事件只有3個：
| 方法 | 說明 |
|---|---|
| onkeydown | 按下鍵事件（包括數字鍵、功能鍵） |
| onkeypress | 按下鍵事件（只包含數字鍵） |
| onkeyup | 放開鍵事件（包括數字鍵、功能鍵） |