當前位置：首頁 >

JavaScript基础三

發布時間：2025/3/17 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript基础三小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

BOM

BOM: browser object model 瀏覽器對象模型。允許JS和瀏覽器“對話”。
window object窗口對象，代表瀏覽器窗口。
所有瀏覽器都支持窗口對象。JS中的全局對象，函數，變量都是窗口對象的成員。具體來說，全局變量是窗口對象的屬性；全局函數是窗口對象的方法；即便是文檔對象，也是窗口對象的一個屬性，下面二者是相等的：

window.document.getElementById("header"); document.getElementById("header");

window對象的方法

alert() 顯示帶有一段消息和一個確認按鈕的警告框。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。返回true/false
prompt() 顯示可提示用戶輸入的對話框。
例如：
var ret = prompt(“please enter a num”) //接收用戶輸入并賦值給ret

open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close() 關閉瀏覽器窗口。
setInterval() 按照指定的周期（以毫秒計 1000=1s）來調用函數或計算表達式。
clearInterval() 取消由 setInterval() 設置的 timeout，需要傳入setInterval()的返回值。
setTimeout() 在指定的毫秒數后調用函數或計算表達式。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
scrollTo() 把內容滾動到指定的坐標。
window對象是全局的，以上方法不需要加window前綴就可以直接調用。
下面我們看一下setInterval()和clearInterval()的具體應用：

點擊start按鈕，顯示計時，點擊stop,暫停計時，實現如下

<body> <input type="text" value="" id="a"> //顯示效果是通過對value賦值實現的 <button onclick="start()">start</button> //onclick觸發start()函數執行 <button onclick="stop()">stop</button> //onclick觸發stop()函數執行 </body><script> function getTime(){var timer=new Date().toString(); //獲取當前時間對象并轉化為字符串var ele = document.getElementById("a"); //通過id定位目標元素ele.value = timer; //對目標元素的屬性value賦值 }var res; //聲明全局變量，接收setInterval（）的返回值function start(){if (res==undefined){ //判斷如果res值為undefined時，才執行下面函數，避免每次點擊開啟一個新計時器，而clearInterval只能清除最后一個計時器。getTime(); //點擊后立即顯示時間res = setInterval(getTime, 1000); //每隔一秒刷新一次} }function stop(){clearInterval(res); //清除即使器res = undefined; //重置res值，這樣點擊時就可以重新開啟計時。 } </script>

DOM

document object model 文檔對象模型。

DOM樹

瀏覽器為加載的HTML創建一個文檔對象模型，所有的對象/元素按樹形結構組織起來。
DOM樹展示文檔中各個對象/元素的關系，方便我們查找元素，操作元素。

DOM節點：

節點類型

HTML中的每一個成分都是一個節點：
整個文檔是一個document節點；
每個元素/標簽是一個element節點；
每個屬性是一個attribute節點；
每個元素中的文本是一個text節點。
這里，我們關注document節點和element節點。

節點關系

這里通過節點樹展示節點間的關系：

查找節點的方法

document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)，比如表單對象中的元素，有name屬性。
document.getElementsByClassName(“name”)
注意，由于id具有唯一性，因此，除了通過id查找，其余方法查找的結果是節點的集合，需要通過索引來定位，哪怕只有集合中只有一個元素。比如：

var ele = document.getElementByTagName("input")[0]

查找關聯節點

parentElement // 父節點標簽元素
children // 所有子標簽
firstElementChild // 第一個子標簽元素
lastElementChild // 最后一個子標簽元素
nextElementSibling // 下一個兄弟標簽元素
previousElementSibling // 上一個兄弟標簽元素
注意，以上都是節點的屬性，因此，使用時后面不能加括號。
另外，JS沒有辦法通過一個屬性來找到所有的sibling。解決方案：先找到父標簽，然后找到父標簽下面的子標簽。

節點操作

創建節點

var ele = document.createElement("input"); //創建節點ele.setAttribute("type","text"); //為節點增加屬性

添加節點

注意，添加節點需要通過父節點來操作，所以要查找父節點

var parEle = document.getElementsById("par"); //查找父節點parEle.appendChild(ele); //通過父節點添加創建的子節點（添加到最后）// 或者把創建的節點添加到某個節點的前面parEle.insertBefore(ele,someNode);

刪除節點

刪除節點需要通過父節點來操作：

parEle.removeChild(ele);

修改/替換節點

需要通過父節點來操作：

parEle.replaceChild(new, old);

節點屬性操作

Attribute

ele.getAttribute("attr_name"); ele.setAttribute("attr_name","value");ele.removeAttribute("attr_name");

文本屬性

獲取文本節點的值：innerText, innerHTML
賦值：
innerText：純文本
ele.innerText = "<p>hello</p>"只能賦值為純文本p標簽會被當作文本對待。
innerHTML：超文本。通過它可以給節點添加HTML代碼。
ele.innerHTML = "<p>hello</p>"，賦值超文本，添加了p標簽和文本hello

表單類節點

對于表單類節點，比如<input>, <select>,<textarea>等，選擇了節點后，通過點.value可以獲取用戶的輸入值。

class操作

ele.className; //獲取節點的所有class名稱 ele.classList.add("class_name"); //為節點添加class ele.classList.remove("class_name"); //為節點刪除class

CSS操作

ele.style.property=value

ele.style.color="yellow"; //等價于 ele.setAttribute("attr_name","value");

DOM事件

事件類型

onclick //點擊某個元素時執行JS代碼；
ondblclick //雙擊某個元素時執行JS代碼；
onfocus //元素獲得焦點時執行JS代碼；常用于這些元素<input>, <select>, and<a>；與onfocus相反的是onblur;
on blur //元素失去焦點時；應用場景：表單驗證，用戶離開輸入框后，代表輸入完成，可以進行驗證
onchange //當元素的值改變時；常用于<select>, radiobutton, checkbox;
onkeydown //當用戶正在按下鍵盤按鍵時；
onkeypress //當用戶按鍵盤按鍵時；該事件并不是對所有瀏覽器的所有按鍵都生效（比如：ALT, CTRL, SHIFT, ESC）；想檢測用戶是否按下了鍵盤按鍵，可以用onkeydown，它對所有的按鍵都有效；
onkeyup //當用戶釋放鍵盤按鍵時；
onload //當一個對象加載完成后，主要是用在body元素；
onmousedown //當用戶在一個上按下鼠標按鍵時；順序：onmousedown–>onmouseup–>onclick(鼠標左鍵或中建）/oncontextmenu（鼠標右鍵）
onmousemove //當鼠標光標在一個元素上移動時；
onmouseout //當鼠標從一個元素或其子元素離開時；
onmouseover //當鼠標移至一個元素或其子元素時；
onmouseleave //當鼠標光標離開一個元素時； The onmouseleave event is similar to the onmouseout event. The only difference is that the onmouseleave event does not bubble (does not propagate up the document hierarchy)，比起onmouseout，這個事件僅限于元素本身，子元素不會觸發事件。
onmouseenter //當鼠標光標移至一個元素時；
onselect //當元素中的文本被選中時；
onsubmit // 當提交表單時；

事件類型示例

onkeydown 如何獲取按鍵信息

<input typ="text" id="a"><script>var ele = document.getElementById("a");ele.onkeydown = function (e) {e = e || window.event;var keyNum = e.keyCode;var keyStr = String.fromCharCode(keyNum);alert(keyNum + '====>>' + keyStr);};</script>

說明：
1. 所有事件的監聽是由操作系統完成的，然后把相關信息封裝到event對象。event對象保存事件觸發狀態信息。
2. e=e||window.event; //通過e或全局的window.event對象拿，為了作瀏覽器兼容
3. e.keyCode //獲取按鍵的asc碼
4. String.fromCharCode(num) ==>數字轉化為對應asc字符

事件傳播

父元素綁定的事件，會傳播給子元素。即子元素如果也綁定了事件，那么子元素的事件執行后，還會執行父元素的事件。
解決方案：在子元素中阻止觸發父元素事件

事件綁定方式

方式一

<button onclick="foo(this)">click</button><script>function foo(self) {self.style.color="blue";} </script>

將事件直接綁定在HTML代碼元素的屬性中，造成代碼耦合，可讀性差。

方式二

<button >click</button><script>var btnEle = document.getElementsByTagName("button")[0];btnEle.onclick = function(){alert("click ok!");} </script>

在JS代碼中查找節點，然后對節點綁定事件。推薦這種方式，降低代碼耦合，靈活性更高。

this關鍵字

在DOM事件處理中，當一個函數用作事件處理時，this就是觸發事件的元素。
在行內事件處理中，this就是DOM元素

var eles.document.getElementsByClassName("titile"); //假如我們選擇了一組節點 eles.onclick = function(){ //點擊其中一個節點，對觸發事件的結點應用CSSthis.style.color="green"; //this指點擊（觸發事件）時的元素。 }

總結

以上是生活随笔為你收集整理的JavaScript基础三的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： beego-安装(window版）
下一篇： javascript 中的getter,