測試大牛必會的前端--javascript基礎知識
阿新 • • 發佈：2018-12-15
文件物件模型
dom 就是一個html
dom 把 html 劃分成了一個樹結構
dom能夠操作分支，改變樣式改變內容
dom是有分支的
document 是具體的物件，是dom的一種實現方式，可以通過doucument 節點可以遍歷文件裡的所有子節點
document 能夠操作頁面上的元素
dom 可以看成是一個頁面
<!DOCTYPE html> <html> <head> <meta charset="{utf-8}"> <title></title> <meta charset="utf-8" /> </head> <body> <!--表單---> <form> <!--文字輸入框，只是一個input元素，型別是text，text就是一個文字輸入框---> 使用者名稱：<input id="user",type="text" placeholder="請輸入使用者名稱"/><br /> 密碼框：<input type="password" placeholder="請輸入密碼" /><br /> <input type="submit" id="btn" value="按鈕"/> </form> </body> <!--js程式碼 通過標籤名稱，通過class，通過id document 指的是整個文件， getElement 拿到元素 在js裡面，沒有區分型別，儲存都用var，不管是數字還是啥都用var window.onload=function 把整個頁面載入完成後，在執行這個裡面的內容， window.onload 頁面圖形效果載入完成 function 是一個函式，是一個固定寫法，就是你要做什麼事情，在這個函式裡面去寫 --> <script> // var ouser=ocument.getElementById("user") // alert(ouser) //點選事件 window.onload=function(){ var obtn=document.getElementById("btn") // obtn.onclick=function(){ // alert("我被點選了") // } //雙擊事件，這種事件一般都是在按鈕上面使用的 // obtn.ondblclick=function(){ // alert("我被雙擊了") // } //失去焦點，主要用於文字框上面，主要用於表單的驗證 var oUser=document.getElementById("user"); // oUser.onblur=function(){ // alert("我不見了") // } //聚焦，主要用於修改文字框樣式 // oUser.onfocus=function(){ // alert("你好，我是樑明曉哦") // } //改變事件,一般用於三級聯動,省市縣 // oUser.onchange=function(){ // alert("我被改變了") // } oUser.onmousemove=function(){ alert("滑鼠移動") } } </script> </html>