JavaScript操作Bom、Dom對象
BOM模型
- BOM：瀏覽器對象模型（Browser Object Model）
- BOM提供了獨立于內(nèi)容的、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)
- BOM可實現(xiàn)功能
- 彈出新的瀏覽器窗口
- 移動、關(guān)閉瀏覽器窗口以及調(diào)整窗口的大小
- 頁面的前進、后退
- img
-
window對象的常用屬性
常用的屬性
-
常用的方法
-
屬性名稱 說明 history 有關(guān)客戶訪問過的URL信息 location 有關(guān)當前URL的信息 window.屬性名= "屬性值"window.location="https://www.baidu.com" ; //表示跳轉(zhuǎn)到百度首頁
-
-
window對象的常用方法
-
常用的方法
-
方法名稱 說明 prompt（） 顯示可提示用戶輸入的對話框 alert() 顯示帶有一個提示信息和一個確定按鈕的警示框 confirm() 顯示一個帶有提示信息、確定和取消按鈕的對話框 close() 關(guān)閉瀏覽器窗口 open() 打開一個新的瀏覽器窗口，加載給定的URL所指定的文檔 setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式 setInterval() 按照指定的周期(以毫秒計)來調(diào)用函數(shù)或表達式
-
-
-
confirm()方法
-
confirm()與alert()、prompt()區(qū)別
alert():一個參數(shù)，僅顯示警告對話框的消息，無返回值，不能對腳本產(chǎn)生任何改變
prompt():兩個參數(shù)，輸入對話框，用來提示用戶輸入一些信息，單擊"取消"按鈕則返回null，單擊"確定"按鈕則返回用戶輸入值，常用于收集用戶關(guān)于特定問題而反饋的信息
confirm():一個參數(shù)，確認對話框，顯示提示對話框消息、"確定"按鈕和"取消"按鈕，單擊”確定“按鈕返回true，單擊”取消“按鈕返回法拉瑟，因此與if-else語句搭配使用
<script type="text/javascript"> var flag=cofirm("確認要刪除此條信息嗎？"); if(flag==true) alert("刪除成功！"); else alert("你取消了刪除"); </script>
-
-
open()方法
-
屬性名稱 說明 height、width 窗口文檔顯示區(qū)的高度、寬度。以像素計 left、top 窗口的x坐標、y坐標。以像素計 toolbar=yes|no|1|0 是否顯示瀏覽器的工具欄。默認是yes scrollbars=yes|no|1|0 是否顯示滾動條。默認是yes location=yes|no| 1|0 是否顯示地址地段。默認是yes status=yes|no|1|0 是否添加狀態(tài)欄。默認yes menubar=yes|no|1|0 是否顯示菜單欄。默認是yes resizable=yes|no|1|0 窗口是否可調(diào)節(jié)尺寸。默認是yes titlebar=yes|no|1|0 是否顯示標題欄。默認是yes fullscreen=yes|no|1|0 是否使用全屏模式顯示瀏覽器。默認是no。處于全屏模式的窗口必須同時處于劇院模式 window.open("彈出窗口的url","窗口名稱","窗口特征")
-
-
history對象
常用方法
-
名稱 說明 back() 加載history對象列表中的前一個URL forward（） 加載history對象列表中的下一個URL go() 加載history對象列表中的某個具體URL history．back 等價于 history.go(-1) 瀏覽器中的“后退”
history.back 等價于 history.go(1) 瀏覽器中的“前進”
-
location對象
-
常用屬性
-
名稱 說明 host 設(shè)置或返回主機名和當前URL的端口號 hostname 設(shè)置或返回當前URL的主機名 href 設(shè)置或返回完整的URL
-
-
常用方法
-
名稱 說明 reload() 重新加載當前文檔 replace() 用新的文檔替換當前文檔
-
-
-
Document對象
-
常用屬性
-
名稱 說明 referrer 返回載入當前文檔的URL URL 返回當前文檔的URL document.referrer document.URL //語法
-
-
Document對象的常用方法
-
名稱 說明 getElementById() 返回對擁有指定id的第一個對象的引用(對象的id唯一) getElementByName() 返回帶有指定名稱的對象的集合(相同name屬性) getElementsByTagName() 返回帶有指定標簽名的對象的集合(相同元素) write() 向文檔寫文本、HTML表達式或JavaScript代碼
-
-
-
JavaScript內(nèi)置對象
- Array：用于在單獨的變量名中存儲一系列的值
- String：用于支持對字符串的處理
- Math：用于執(zhí)行常用的數(shù)學任務，它包含了若干個數(shù)字常量和函數(shù)
- Date：用于操作日期和時間
-
Date對象
-
方法 說明 getDate() 返回Date對象的一個月中的一天，其值介于1~31之間 getDay 返回Date對象的星期中的一天，其值介于0~6之間 getHours() 返回Date對象的小時數(shù)，其值介于0~23之間 getMinutes() 返回Date對象的分鐘數(shù)，其值介于0~59之間 getSeconds() 返回Date對象的秒數(shù)，其值介于0~59之間 getMonth() 返回Date對象的月份，其值介于0~11之間 getFullYear 返回Date對象的年份，其值為4位數(shù) getTime() 返回自某一時刻（1970年1月1日）以來的毫秒數(shù)
-
-
Math對象
-
常用方法
-
方法 說明 示例 ceil 對數(shù)進行上舍入 Math.ceil(25.5);返回26
Math.ceil(-25.5);返回-25floor() 對數(shù)進行下舍入 Math.floor(25.5);返回25
Math.floor(-25.5);返回-26round() 把數(shù)四舍五入為最接近的數(shù) Math.round(25.5);返回26
Math.round(-25.5);返回-26random() 返回0~1之間的隨機數(shù) Math.random();例如：
0.6273608814137365
-
-
-
定時函數(shù)
-
setTimeout()
setTimeout("調(diào)用的函數(shù)",等待的毫秒數(shù)); var myTime＝setTimeout("disptime() ", 1000 );//1秒(1000毫秒)之后執(zhí)行 函數(shù)disptime()一次
-
setinterval()
setInterval("調(diào)用的函數(shù)",間隔的毫秒數(shù)) var myTime＝setInterval("disptime() ", 1000 );//每隔1秒(1000毫秒)執(zhí)行函數(shù)disptime()一次 //如果要多次調(diào)用，使用setInterval()或者讓disptime()自身再次調(diào)用setTimeout()
-
clearTimeout()
clearTimeout(setTimeOut()返回的ID值) var myTime＝setTimeout("disptime() ", 1000 ); clearTimeout(myTime)；//清除函數(shù)
-
clearInterval ()
clearInterval(setInterval()返回的ID值) var myTime＝setInterval("disptime() ", 1000 ); clearInterval(myTime)；//清除函數(shù)
-
-
操作DOM
[圖片上傳失敗...(image-e55d66-1573610613629)]
[圖片上傳失敗...(image-cc6d55-1573610613629)]
-
訪問節(jié)點
- 使用getElement系列方法訪問指定節(jié)點
- getElementById()
- getElementsByName()
- getElemtsByTagName()
- 使用getElement系列方法訪問指定節(jié)點
-
根據(jù)層次關(guān)系訪問節(jié)點
節(jié)點屬性
-
屬性名稱 描述 parentNode 返回節(jié)點的父節(jié)點 childNodes 返回子節(jié)點集合，childNodes[i] firstChild 返回節(jié)點的第一個子節(jié)點，最普遍的用法是訪問該元素的文本
節(jié)點lastChild 返回節(jié)點的最后一個子節(jié)點 nextSibling 下一個節(jié)點 previousSibling 上一個節(jié)點
-
根據(jù)層次關(guān)系訪問節(jié)點
-
element屬性
-
屬性名稱 描述 firstElementChild 返回節(jié)點的第一個子節(jié)點，最普遍的用法是訪問該元素的文本節(jié)點 lastElementChild 返回節(jié)點的最后一個子節(jié)點 nextElementSibling 下一個節(jié)點 previousElementSibling 上一個節(jié)點
-
-
-
節(jié)點信息
nodeName:節(jié)點名稱
node Value:節(jié)點值
-
nodeType:節(jié)點類型
-
節(jié)點類型 NodeType值 元素element 1 屬性attr 2 文本text 3 注釋comments 8 文檔document 9
-
-
操作節(jié)點的屬性
getAttribute("屬性名") setAttribute("屬性名","屬性值")
-
創(chuàng)建和插入節(jié)點
-
創(chuàng)建節(jié)點
-
名稱 描述 createElement( tagName) 創(chuàng)建一個標簽名為tagName的新元素節(jié)點 A.appendChild( B) 把B節(jié)點追加至A節(jié)點的末尾 insertBefore( A,B ) 把A節(jié)點插入到B節(jié)點之前 cloneNode(deep) 復制某個指定的節(jié)點
-
-
-
刪除和替換節(jié)點
-
名稱 描述 removeChild( node) 刪除指定的節(jié)點 replaceChild( newNode, oldNode)屬性attr 用其他的節(jié)點替換指定的節(jié)點 var delNode=document.getElementById("first"); delNode.parentNode.removeChild(delNode); var oldNode=document.getElementById("second"); var newNode=document.createElement("img"); newNode.setAttribute("src","images/f03.jpg"); oldNode.parentNode.replaceChild(newNode,oldNode);
-
-
style屬性
-
HTML元素.style.樣式屬性＝"值"
document.getElementById("titles").style.color="#ff0000"; document.getElementById("titles").style.fontSize="25px ";
-
名稱 描述 onclick 當用戶單擊某個對象時調(diào)用事件 onmouseover 鼠標移到某元素之上 onmouseout 鼠標從某元素移開 onmousedown 鼠標按鈕被按下 背景backgroundColor、backgroundImage、backgroundRepeat
文本fontSize、fontWeight、textAlign、textDecoration、font、color
邊距padding、paddingTop 、paddingBottom、paddingLeft、paddingRight
邊框border、borderTop、borderBottom、borderLeft、borderRight
-
-
className屬性
-
HTML元素.className="樣式名稱"
function over(){ document.getElementById("cart").className="cartOver"; document.getElementById("cartList").className="cartListOver"; } function out(){ document.getElementById("cart").className="cartOut"; document.getElementById("cartList").className="cartListOut"; }
-
-
獲取元素的樣式
-
HTML元素.style.樣式屬性;
alert(document.getElementById("cartList").display);
-
document.defaultView.getComputedStyle(元素,null).屬性;
var cartList=document.getElementById("cartList"); alert(document.defaultView.getComputedStyle(cartList,null).display);
-
HTML元素. currentStyle.樣式屬性;
alert(document.getElementById("cartList").currentStyle.display); //currentStyle 兼容IE瀏覽器
-
HTML 中元素屬性
元素屬性應用
-
屬性 描述 offsetLeft 返回當前元素左邊界到它上級元素的左邊界的距離，只讀屬性 offsetTop 返回當前元素上邊界到它上級元素的上邊界的距離，只讀屬性 offsetHeight 返回元素的高度 offsetWidth 返回元素的寬度 offsetParent 返回元素的偏移容器，即對最近的動態(tài)定位的包含元素的引用 scrollTop 返回匹配元素的滾動條的垂直位置 scrollLeft 返回匹配元素的滾動條的垂直位置 clientWidth 返回元素的可見寬度 clientHeight 返回元素的可見高度
-
元素屬性的應用
document.documentElement.scrollTop;//標準瀏覽器
document.documentElement.scrollLeft;//標準瀏覽器
或者
document.body.scrollTop;//Chrome
document.body.scrollLeft;//Chrome
var sTop=document.documentElement.scrollTop||document.body.scrollTop;
-
