javaScript事件，Bom，Dom物件

路過的大白發表於2020-11-12
JavaScript事件物件

javaScript修改html和css樣式

內容

你好！ 這是你第一次使用 **Markdown編輯器** 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章，瞭解一下Markdown的基本語法知識。

事件

事件 (Event) 是 JavaScript 應⽤跳動的⼼髒 ，進⾏互動，使⽹⻚動起來。當我們與瀏覽器中 Web ⻚⾯
進⾏某些型別的互動時，事件就發⽣了。事件可能是⽤戶在某些內容上的點選、⿏標經過某個特定元素 或按下鍵盤上的某些按鍵。事件還可能是 Web
瀏覽器中發⽣的事情，⽐如說某個 Web ⻚⾯載入完成， 或者是⽤戶滾動窗⼝或改變窗⼝⼤⼩。

常用事件

⼏個常⽤的事件： onclick 、onblur 、onfocus 、onload 、onchange
onmouseover、onmouseout、onkeyup、onkeydown

onload：當⻚⾯或影像載入完後⽴即觸發
onblur：元素失去焦點
onfocus：元素獲得焦點
onclick：⿏標點選某個物件
onchange：⽤戶改變域的內容
onmouseover：⿏標移動到某個元素上
onmouseout：⿏標從某個元素上離開
onkeyup：某個鍵盤的鍵被鬆開
onkeydown：某個鍵盤的鍵被按下

事件繫結

  1. 行內式：<button type="button" onclick="alert()">提交</button>
  2. 內聯式：在script標籤內寫事件，使用標籤內的事件繫結
    <script type="text/javascript"> function showpwd(){ document.getElementById("pwd").type="text"; } function namecheck(){ //location.reload(); var cur=document.getElementById("name"); var val=cur.value; if(val.length<=6){ cur.nextSibling.innerText="使用者名稱長度不夠"; return 0; } for(var one in val){ console.log(one); if(val.charAt(one)=='$'||val.charAt(one)=='#'){ cur.nextSibling.innerText="特殊字元"; return 0; } } //location.reload(); cur.nextSibling.innerText=""; return 1; } function pwdcheck(){ var cur=document.getElementById("pwd"); var val=cur.value; if(val.length<=9){ cur.nextSibling.innerText="密碼長度不夠"; return 0; } cur.nextSibling.innerText=""; return 1; } function hobbycheck(){ var items=document.getElementsByName("hobby"); var len=0; for(var i=0;i<items.length;i++){ if(items[i].checked){ len++; } } if(len==0){ document.getElementById("hb").innerText="請至少選擇一項"; return 0; }else{ document.getElementById("hb").innerText=""; return len; } } function sexcheck(){ var items=document.getElementsByName("sex"); var len=0; for(var i=0;i<items.length;i++){ if(items[i].checked){ len++; } } if(len==0){ document.getElementById("hb").innerText="請至少選擇一項"; return 0; }else{ document.getElementById("hb").innerText=""; return len; } } function submitcheck(){ if(namecheck()!=0&&pwdcheck()!=0){ if(hobbycheck()==0){ alert("請選擇至少一項"); return; } if(sexcheck()==0){ alert("性別不能為空"); return; } alert("驗證成功"); }else{ alert("使用者名稱密碼請規範"); } } </script>
<label for="pwd">密碼（大於9位）</label><input type="password" id="pwd" name="pwd" onblur="pwdcheck()"><span style="background-color: #FF0000;"></span><br />

3.引入式：外部引入js檔案，事件繫結外部方法

bom物件

BOM的核⼼物件是window，它表示瀏覽器的⼀個例項。window物件有雙重⻆⾊，它既是通過
JavaScript訪問瀏覽器窗⼝的⼀個接⼝，⼜是ECMAScript規定的Global物件。這意味著在⽹⻚中定義的任
何⼀個物件、變數和函式，都以window作為其Global物件，因此有權訪問parseInt()等⽅法。如果⻚⾯中
包含框架，則每個框架都擁有⾃⼰的window物件，並且儲存在frames集合中。在frames集合中，可以通
過數值索引（從0開始，從左⾄右，從上到下）或者框架的名稱來訪問相應的window物件。

windows物件

系統對話方塊

（1）訊息框:alert， 常⽤。
alert() ⽅法⽤於顯示帶有⼀條指定訊息和⼀個 OK 按鈕的警告框。
（2）輸⼊框:prompt，返回提示框中的值。
prompt() ⽅法⽤於顯示可提示⽤戶進⾏輸⼊的對話方塊。
引數（可選）：
第⼀個引數：要在對話方塊中顯示的純⽂本。
第⼆個引數：預設的輸⼊⽂本。
（3）確認框:confirm，返回 true/false.
confirm() ⽅法⽤於顯示⼀個帶有指定訊息和 OK 及取消按鈕的對話方塊

視窗

開啟：

<script type="text/javascript">
function openBaidu(){
 window.open('http://www.baidu.com','_self'); // _self、_blank等
 // window.open(); //空⽩窗⼝
}
</script> <input type="button" name="open" value="百度" onclick='openBaidu();' />

關閉

<input type="button" value="關閉窗⼝" onclick="window.close();" />

location

location 物件是window物件之⼀，提供了與當前窗⼝中載入的⽂檔有關的資訊，還提供了⼀些導航功
能。也可通過 window.location 屬性來訪問。
location 物件的屬性 href：設定或返回完整的 URL
location 物件的⽅法
reload()：重新載入當前⽂檔。
replace()：⽤新的⽂檔替換當前⽂檔。

<script type="text/javascript">
 function openBaidu(){
 // 沒有歷史記錄,⽤新的⽂檔替換當前⽂檔
 // window.location.replace("http://www.baidu.com");
 // console.log(window.location.href); // 獲取完整的url
 window.location.href = "http://www.baidu.com";
 }
</script> <body>
 <input type="text" value="" />
 <input type="button" value="重新整理" onclick="window.location.reload();" />
 <input type="button" value="百度" onclick="openBaidu();" />
</body

dom物件

DOM：Document Object Model ⽂檔物件模型
要實現⻚⾯的動態互動效果，bom 操作遠遠不夠，需要操作 html 才是核⼼。如何操作 html，就是
DOM。簡單的說，dom 提供了⽤程式動態控制 html 接⼝。DOM即⽂檔物件模型描繪了⼀個層次化的節
點樹，運⾏開發⼈員新增、移除和修改⻚⾯的某⼀部分。dom 處於javascript 的核⼼地位上。
每個載⼊瀏覽器的 HTML ⽂檔都會成為 Document 物件。Document 物件使我們可以從指令碼中對 HTML
⻚⾯中的所有元素進⾏訪問。Document 物件是 Window 物件的⼀部分，可通過 window.document 屬性
對其進⾏訪問。

獲取節點（標籤）

在這裡插入圖片描述### 建立節點
在這裡插入圖片描述### 插⼊節點
在這裡插入圖片描述

查詢,刪除節點

在這裡插入圖片描述 在這裡插入圖片描述

獲取表單

1、document.表單名稱
2、document.getElementById(表單 id);
3、document.forms[表單名稱] 4、document.forms[索引]; //從 0 開始

獲取表單元素

1)、通過 id 獲取：document.getElementById(元素 id);
2)、通過 form.名稱形式獲取: myform.元素名稱; name屬性值
3)、通過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
4)、通過 tagName 陣列 :document.getElementsByTagName(‘input’)[索引] // 從0開始

<body>
 <form id='myform' name="myform" action="" method="get"> 
 姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
 密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
 <input type="hidden" id="uno" name="uno" value="隱藏域" />
 個⼈說明:<textarea name="intro"></textarea>
 <button type="button" onclick="getTxt();" >獲取元素內容</button>
 </form>
</body> <script>
 function getTxt(){
 var uno = document.getElementById("uno");
 var uname = myform.uname;
 console.log(uname + "--------");
 var upwd = document.getElementsByTagName('input')[1] ;
 var intro = document.getElementsByName("intro")[0]; 
 console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);
 }
</script>

單選框以及，文字，密碼等框

document.getElementsByName(“name屬性值”).value

核取方塊

已選擇的框的checked屬性是checked

var ufav = document.getElementsByName("ufav");
var favstr = "";
 for (i = 0;i < ufav.length; i++){
 if(ufav[i].checked){
 favstr += ufav[i].value+",";
 }
 }
favstr = favstr.substr(0,favstr.length-1);

下拉選單

（1）獲取 select 物件： （2）獲取選中項的索引： （3）獲取選中項 options 的
value屬性值：注意：當通過options獲取選中項的value屬性值時，
若沒有value屬性，則取option標籤的內容若存在value屬性，則取value屬性的值 （4）獲取選中項 options 的
text：選中狀態設定：selected='selected’selected=true、selected未選中狀態設定：不設selected屬性

<body onload="init()">
 <form id='myform' name="myform" action="" method=""> 
 來⾃:
 <select id="ufrom" name="ufrom">
 <option value="-1" >請選擇</option>
 <option value="0" selected="selected">北京</option>
 <option value="1">上海</option>
 </select><br />
 <button type="button" id="sub" name="sub">提交</button>
 </form>
</body> <script>
 function init () {
 var sub = document.getElementById("sub");
 sub.onclick = function () {
 //獲取select物件
 var ufrom = document.getElementById("ufrom");
 console.log("表單物件：" + ufrom);
 //獲取選中的索引
 var idx = ufrom.selectedIndex;
 console.log("選中項的索引值：" + idx);
 //獲取選中項的value值
 var val = ufrom.options[idx].value;
 console.log("選中項的value屬性值：" + val);
 //獲取選中項的text
 var txt = ufrom.options[idx].text;
 console.log("選中項的text：" + txt);
 }
 }
</script>

表單提交

（1）使⽤普通button按鈕+onclick事件+事件中編寫程式碼:
獲取表單.submit();
（2）使⽤submit按鈕 + οnclick=“return 函式()” +函式編寫程式碼:
最後必須返回：return true|false;
（3）使⽤submit按鈕/圖⽚提交按鈕 + 表單οnsubmit=“return 函式();” +函式編寫程式碼:
最後必須返回：return true|false;

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">
 <input name="test" id="uname"/><span id="msg"></span><br />
 <!--通過js事件：sub()提交表單-->
 <input type="button" onclick="sub();" value="提交表單1" />
 <input type="submit" onclick="return sub2();" value="提交表單2" />
 <input type="submit" value="提交onsubmit" /><br />
 <input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg"
 width="60px" height="40px" />
</form> <script type="text/javascript"> 
 // input的type=button，調⽤submit()⽅法提交
 function sub(){
 document.myform2.submit();
 }
 // 進⾏校驗，返回值為true才能提交
 function sub2(){
 var uname = document.getElementById("uname");
 var val = uname.value;
 if(val.length>0){
 return true; // 提交
 }
 document.getElementById("msg").innerHTML = "不能空著啊！！！";
 document.getElementById("msg").style.color="red";
 return false; // 不提交
 }
 // onsubmit事件提交
 function onsub () {
 var uname = document.getElementById("uname");
 var val = uname.value;
 if(val.length>0){
 return true; // 提交
 }
 document.getElementById("msg").innerHTML = "填寫點⼉東⻄唄！(ˉ▽￣～) 切~~";
 document.getElementById("msg").style.color="red";
 return false; // 不提交
 }
</script>

相關文章