javascript
JavaScript- BOM, DOM
BOM
Browser Object Model?瀏覽器對象模型, 提供與瀏覽器窗口進行交互的方法
它使 JavaScript 有能力與瀏覽器進行“對話”。 BOM 最主要的對象就是 window 對象
全局變量和全局方法都是 window 的屬性和方法, 實際使用的時候書寫可以忽略 " window. "
var a = 100; console.log(a,window.a)function foo(){console.log(a) } foo() window.foo()
window 對象
核心的窗口對象, 隨著網頁打開自動創建
常用的方法?
window.innerHeight //瀏覽器窗口的內部高度 window.innerWidth // 瀏覽器窗口的內部寬度window.open() // 打開新窗口 詳情見下面 window.close() // 關閉當前窗口 無參數 window.opener // 返回對創建該窗口的 Window 對象的引用 （可讀可寫） window.alter() // 警告框, 無返回值 只用于提示信息 只有確認按鈕 window.prompt() // 輸入框, 帶返回值的彈窗, 可輸入, 提供兩個按鈕 確認取消
window.confirm() // 確認框, 返回布爾值, 提供兩個按鈕 確認取消
open 詳解
window.open(URL,name,features,replace)參數
- URL: 可選，新開頁面的 URL
- name: 可選，聲明窗口名稱
- features: 可選，制定窗口特性
常用 replac 參數?
- height=100 窗口高度；
- width=400 窗口寬度；
- top=0? 窗口距離屏幕上方的象素值；
- left=0? 窗口距離屏幕左側的象素值；
- replace 可選，布爾值，規定瀏覽歷史搜否替換覆蓋 window.opener
ps
對一個通過 window.open 打開的窗口，通過 window.opener 調用父窗口的方法.
可直接通過 window.opener.foo({{ yangtuo }} 在子頁面通過參數的將數據傳遞給父頁面調用父頁面的參數 .
從而可以實現子頁面和父頁面之間的數據傳遞.
常用屬性
history
功能 保存當前窗口訪問過的 URL .
屬性
length 當前窗口訪問過的數量 ( 只要 URL 不同都會被記錄? 不是訪問次數, 要注意區分? ).
方法
back() 返回前一個 URL ( 后退按鈕 ).
forward() 前進到下一個 URL ( 前進按鈕 ).
go(n) 參數可取正負值, 值代表幾個 URL , 正 - 前進, 負 - 后退 .
location
功能 保存或操作地址欄的URL
方法
reload( false / true ) 重載頁面, 設置為 false 從緩存中加載頁面, 為 true 表示強制從服務器重載
定時器方法
間隔調用 ( 周期性定時器 )
每隔一段時間就執行一次代碼
var timeID = setInterval(function,interval)參數
function 需要執行的操作
interval 指定時間間隔 單位 ms?
返回值 返回定時器 ID 彼此區分
關閉間歇調用定時器
clearInterval(timeID)超時調用 ( 一次性定時器 )
等待一段時間后執行一次代碼
var timeID = setTimeout(function,timeout)用法參數返回值同上?
關閉超時調用計時器
clearTimeout(timeID)定時器關閉處理
超時調用的內存占用較少.這里的關閉方法只是提供了一個關閉途徑
但是間歇調用的不間斷調用是會對內存造成影響因此需要考慮何時關閉
定時器實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>function start() {// 開啟定時器 timer = setInterval(function () {var date = new Date();console.log(date);}, 1000);return timer}function stop() {clearInterval(timer)}</script> </head> <body> <button onclick="start()">開始</button> <button onclick="stop()">關閉</button></body> </html> 每隔一秒打印當前時間 var i = 5;var timerID = setInterval(function () {if (i == 1) {clearInterval(timerID)}console.log(i);i--},1000) 倒計時5s var res = confirm("是否關閉當前窗口"); if (res) {setTimeout(function () {window.close()}, 3000); } 超時調用, 延時3s關閉窗口DOM 對象
Document Object Model,提供操作文檔（html元素）的方法，核心為document對象
節點概念
將文檔中所有的內容（標簽，文本，標簽屬性，注釋）封裝成節點對象
分類
- 元素節點
- 屬性節點
- 文本節點
- 注釋節點
- 文檔節點 -> document
節點查找
查找到多個節點的時候會以列表的形式返回
可以用索引的方式取出內部元素, 當然也可以切片
直接查找
document.getElementById("") // 根據ID獲取一個標簽 document.getElementsByClassName("") // 根據class屬性獲取 document.getElementsByTagName("") // 根據標簽名獲取標簽合集document.getElementsByName("") // 根據 表單控件的 name 屬性值獲取
間接查找(無括號)
通過一個已知節點, 基于位置或者親屬關系來間接查找
A.parentElement //找父節點標簽元素 A.children // 找所有子標簽 A.firstElementChild // 第一個子標簽元素 A.lastElementChild // 最后一個子標簽元素 A.nextElementSibling // 下一個兄弟標簽元素 A.previousElementSibling // 上一個兄弟標簽元素節點創建 / 刪除 / 替換
創建節點
創建后是不存在的, 必須要找位置安置
document.createElement("B"); // 創建一個 B 標簽添加節點
添加節點必須基于父節點來操作
A.appendChild(B) // 在 A 的里面作為 A 的最后一個子節點添加 B A.insertBefore(B,C) // 在 A 里面的 子標簽C 前面添加 B刪除節點
節點的刪除只能有父節點來操作
A.document.removeChild(B) // 從 A 標簽里面移除 B 標簽替換節點
節點的替換同樣只能由父節點來操作
A.replaceChild(B, C) // 從 A 標簽中將 C 標簽替換成 B 標簽節點屬性創建 / 刪除
創建屬性
自帶的屬性可以直接設置和取值
A.B = "C" // 為 A 創建 B 屬性,值為 C自定義屬性
A.setAttribute("B", "C"); // A 節點添加 B 屬性, B 屬性值為 C A.getAttribute("B"); // 獲取 A 標簽的 B 屬性值刪除屬性
自定義,默認都可
A.removeAttribute("B") // 移除 A 節點的 B 屬性節點內容
innerText
A.innerText = "B" // 給 A 節點設置顯示內容為 Bps:
如果 A 有子標簽.設置 A 內容后.會清除子標簽只剩下一個文本 B
取值的時候只能取到子標簽的內容
innerHtml
A.innerHtml = "<p>p</p>" // 給 A 節點設置顯示內容為 Bps:
主要用于快速添加簡單的標簽
取值的時候可以取到子標簽本身不僅僅是內容
value
只適用于 input, select, textarea
A.value // 獲取A的值節點樣式操作
A.className // 獲取所有樣式類名(字符串) A.classList.remove("c1") // 刪除指定類 A.classList.add("c1") // 添加類 A.classList.contains("c1") // 存在返回true，否則返回false A.classList.toggle("c1") // 存在就刪除，否則添加 A.style.backgroundColor="red" // 將 A 的背景顏色設置成紅色JS操作CSS屬性的規律
1.對于沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
- obj.style.margin
- obj.style.width
- obj.style.left
- obj.style.position
2.對含有中橫線的CSS屬性，將中橫線后面的第一個字母換成大寫即可(小駝峰)。如：
- obj.style.marginTop
- obj.style.borderLeftWidth
- obj.style.zIndex
- obj.style.fontFamily
3. 屬性值中的單位不可省略. 比如 px?
節點空間關系
parentsNode
獲取父節點, 父元素
childNodes
獲取子節點, 包含文本節點和元素節點
children?
獲取子節點數組, 只包含元素節點, 不包含文本節點
nextSibling
獲取下一個兄弟節點
previousSibling
獲取上一個兄弟節點
事件
事件類型?
鼠標事件
onclick // 單擊 ondblclick // 雙擊 onmousemove // 鼠標移動 onmouseout // 鼠標移出 onmouseover // 鼠標移入鍵盤事件
onkeydown // 某個鍵盤按鍵被按下 ( 只要是按鍵都觸發 ) onkeypress // 某個鍵盤按鍵被按下 ( 今舉行字符按鍵 ) onkeyup // 某個鍵盤按鍵被松開元素或者文檔加載完畢
onload // 一張頁面或一幅圖像完成加載。表單控件的按鈕監聽
oninput // 監聽輸入框的輸入狀態 ( 實時監聽 ) onchange // 監聽表單控件的值發生變化 onfocus // 監聽文本框焦點狀態 onblur // 監聽文本框失去焦點狀態 onsubmit // 監聽提交狀態onselect // 在文本框中的文本被選中時發生 // onsubmit 事件由form 監聽 , 點擊提交按鈕自動觸發, // 檢測表單數據是否可以發生, 允許給出返回值為 布爾值 // true 表示可以提交, false 表示不可發送 form.onsubmit = function () {if(uname.value.length == 0) {// 阻止提交return false;} else {return true;} }
所有事件的實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="index.js"></script><script>window.onload = function () {// 鼠標// console.log($("h1"));// $("h1").ondblclick = function () {// alert("雙擊")// };// $("div").onmouseover = function () {// console.log("鼠標移入")// };// $("div").onmousemove = function () {// console.log("鼠標移動呀動")// };// $("div").onmouseout = function () {// console.log("鼠標移出")// };// 鍵盤// onkeydown = function () {// console.log("鍵盤被按")// };// onkeypress = function () {// console.log("字符被按")// };// onkeyup = function () {// console.log("松開了")// };// 表單var form = $("form");var uname = $("input");var hobby = $("input", 1);uname.onfocus = function () {console.log("表單的獲取焦點")};uname.onblur = function () {// this 表示當前的觸發對象console.log("獲取值: ", this.value)};uname.oninput = function () {console.log("實時監聽獲取值: ", this.value)};uname.onchange = function () {console.log("前后不一致了: ", this.value)};hobby.onchange = function () {console.log("按鈕變了: ", this.checked)};// onsubmit 事件由form 監聽 , 點擊提交按鈕自動觸發,// 檢測表單數據是否可以發生, 允許給出返回值為 布爾值// true 表示可以提交, false 表示不可發送form.onsubmit = function () {if(uname.value.length == 0) {// 阻止提交return false;} else {return true;}}};</script><style>div {width: 200px;height: 200px;background-color: palegreen;}</style> </head> <body> <h1>標題</h1> <div>文本啦文本</div> <form action="/" method="post" enctype="multipart/form-data">用戶名: <input type="text" name=""><br>興趣: <input type="checkbox" name="" value="1"><br><input type="submit"></form><script>console.log("我看看誰比我快") </script></body> </html> 整合后的實例事件綁定方式
內斂方式
<div id="d1" onclick="changeColor(this);">點我</div> <script>function changeColor(ths) {ths.style.backgroundColor="green";} </script>注意
this是實參，表示觸發事件的當前元素。
函數定義過程中的ths為形參。
外部引入
<div id="d2">點我</div> <script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () { this.innerText="呵呵"; } </script>標準事件監聽
btn.addEventListener("click",function(){},false)參數
省略 on 前綴的事件名稱
事件發生后執行函數
設置事件傳遞機制 默認 false
事件傳遞
事件由多個元素同時監聽
事件發生后的傳遞順序
默認冒泡傳遞, 從里向外逐一觸發
設置為 true 表示捕獲, 從外向內觸發執行
window.onload
綁定事件的時候，要等到文檔加載完畢
對于不存在的元素無法綁定事件
window.onload事件在文件加載過程結束時觸發
位于DOM中的所有對象都被讀取完畢時才會觸發
<script>window.onload = function () {// 獲取元素 console.log($("h1"));};</script>注意
.onload()函數存在覆蓋現象
事件對象
事件對象伴隨事件觸發自動創建，存儲所有與當前事件相關的信息。
作為參數自動傳入事件處理函數中，只需要接收后進行相關操作
div.onclick = function (evt){};
相關屬性
1. 鼠標事件對象
- offsetX
- offsetY
2. 鍵盤事件對象
- key : 獲取按鍵名稱，區分字母的大小寫
- which：獲取按鍵編碼。
- onkeydown事件中，功能按鍵對應有鍵盤編碼，字符按鍵一律返回大寫字母的ASC碼
- onkeypress事件中，區分大小寫字母的ASC碼
3. target/srcElement
事件對象的屬性，用來獲取事件的觸發對象
window.onload = function (){var div = $("div");div.onclick = function (event){//鼠標在元素坐標系中的位置 console.log(event.offsetX,event.offsetY);//鼠標在頁面坐標系中的位置 console.log(event.clientX,event.clientY);//鼠標在屏幕坐標系中的位置 console.log(event.screenX,event.screenY);console.log(event.target);};onkeydown = function (e){//console.log(e);console.log("onkeydown: ",e.key,e.which);console.log(event.target);};onkeypress = function (e){console.log("onkeypress: ",e.key,e.which);} };?
轉載于:https://www.cnblogs.com/shijieli/p/10025173.html
總結
以上是生活随笔為你收集整理的JavaScript- BOM, DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mybash的实现
- 下一篇： Spring Boot 之路(一):一个