BOM
是指瀏覽器物件模型，可以讓JavaScript跟瀏覽器對話
Window物件
window物件是客戶端JavaScript最高層物件之一，同時也是其他大部分物件的共同祖先，在呼叫widow物件的方法和屬性時，可以省略window物件參考，比如：window.document.write()可以直接寫document.write()
- window.innerHeight 瀏覽器視窗內部高度
- window.innerwidth 瀏覽器視窗內部寬度
- window.open() 打開新視窗
- window.close() 關閉當前視窗
Window的子物件
navigator物件（瀏覽器物件）
- navigator.appName web瀏覽器全稱
- navigator.appVersion web瀏覽器廠商和版本的詳細字串
- navigator.userAgent 客戶端絕大部分資訊
- navigator.platform 瀏覽器運行所在的作業系統
screen物件（螢屏物件）
- screen.availWidth 可用的螢屏寬度
- screen.availHeight 可用的螢屏高度
history物件（歷史物件）
- history.forward() 前進一頁
- history.back() 后進一頁
location物件
- location.href 獲取url
- location.href="https://www.cnblogs.com/nq31/p/url" 跳轉到指定url頁面
- location.reload() 重新加載頁面
彈出框
JavaScript中有三種訊息框：警告框、確認框、提示框
- alert("警告內容"); 警告框
- confirm(”確認內容"); 確認框，用戶點擊時，會回傳true(確定）和false（取消）
- prompt("提示內容"); 提示框，用戶確認時，會回傳你在提示框輸入的內容，取消則回傳null，
計時事件
指在一定時間間隔之后再執行代碼，而不是函式被呼叫后立即執行，
setTimeout()方法：
var t= setTimeout("js陳述句",時間（毫秒為單位)); //語法 /* 第一引數，是含有js陳述句的字串 第二個引數，是指多少毫秒后執行第一個引數 注意：js陳述句括號內要用單引號 setTimeout()方法會回傳一個值 */
clearTimeout()方法
clearTimeout(setTimeout方法回傳的值);//語法 //例子 var t=setTimeout(function(){alert(123)},3000) clearTimeout(t); //取消setTimeout的設定
setInterval()方法
按照指定的周期（毫秒為單位）不斷呼叫函式或者運算式，直到clearInterval()被呼叫或視窗被關閉，
//語法 setInterval("js陳述句",時間間隔); //例子 var t=setIntervar("alert(3)",3000) clearInterval(t);
DOM
指檔案物件模型，該模型可以訪問HTML檔案中所有元素
HTML DOM樹
- 檔案節點（document物件）：代表整個檔案
- 元素節點（element物件）：代表一個元素（標簽）
- 文本節點（text物件）：代表元素（標簽）中的文本
- 屬性節點（attribute物件）：代表一個屬性，元素（標簽）才有屬性
- 注釋是注釋節點（comment物件）
注意：js可以通過DOM修改頁面中的元素、屬性、css樣式以及對頁面事件作出回應，
查找標簽
直接查找
document.getElementById //根據ID獲取一個標簽 document.getElementsByCalssName //根據class屬性獲取標簽集合 document.getElementsByTagName //根據標簽簽名獲取標簽集合
間接查找
根據直接查找獲取一個標簽后，通過呼叫其他方法，來找的跟這個標簽有關聯的其他標簽
間接查找的六個方法：
1、parentElement //獲取父節點標簽
2、children //獲取所有字標簽
3、firstElementChild //獲取第一個子標簽
4、lastElementChild //獲取最后一個子標簽
5、nextElementSibling //獲取下一個兄弟標簽元素
6、previousElementSibling //獲取上一個兄弟標簽元素，
//例子：
let e=document.getElementById('d1'); > undefined e.parentElement //獲取父節點標簽 > <div class=?"right">?…?</div>? e.children //獲取所有字標簽 > HTMLCollection(3) [div.title, div.body, div.bottom]0: div.title1: div.body2: div.bottomlength: 3__proto__: HTMLCollection e.children[2] > <div class=?"bottom">?…?</div>? e.firstElementChild //獲取第一個子標簽 > <div class=?"title">?…?</div>? e.lastElementChild //獲取最后一個子標簽 > <div class=?"bottom">?…?</div>? e.nextElementSibling //獲取下一個兄弟標簽元素 > <div class=?"article">?…?</div>?<div class=?"title">?…?</div>?<div class=?"body">?…?</div>?<div class=?"bottom">?…?</div>?</div>? e.previousElementSibling //獲取上一個兄弟標簽元素， > null
節點操作
/* 案例一： 新建立一個img標簽 為該標簽設定屬性 最后將該便簽設定在id1的標簽下 */ var imgEle=document.createElement("img"); //創建新的標簽img imgEle.src='廣州.jpg'; //給img標簽設定src屬性 "廣州.jpg" imgEle.setAttribute('title','廣州'); //該設定方法可以設定自定義屬性，也可以設定默認屬性 undefined let divEle=document.getElementById('d1'); undefined divEle.appendChild(imgEle); //在標簽內部增加img標簽
/* 案例二 創建一個a標簽 為a標簽添加文本內容 將a標簽插入在id=d2的標簽前面 */ var aEle=document.createElement('a'); aEle.href='www.baidu.com' "www.baidu.com" aEle.innerText="點擊我" //為a標簽添加文本 "點擊我" aEle <a href=https://www.cnblogs.com/nq31/p/?"www.baidu.com">?點擊我?</a>? let d1Ele=document.getElementById('d1') let d2Ele=document.getElementById('d2') d1Ele.insertBefore(aEle,d2Ele) //在d2標簽前插入a標簽 <a href=https://www.cnblogs.com/nq31/p/?"www.baidu.com">?點擊我?</a>?
appendChild() 添加子節點
removeChild() 洗掉子節點
replaceChild() 替換子節點
setAttribute('屬性','屬性值') 設定屬性
getAttribute(‘屬性’) 獲取屬性
removeAttribute(‘屬性’) 移除屬性
//innerText跟innerHTML的區別： let d3=document.getElementById('d3') undefined d3.innerText //獲取該標簽下的所有文本內容 "div-p div-span" d3.innerHTML //獲取標簽下的所有文本和標簽內容 " <p>div-p</p> <span>div-span</span> " d3.innerText='<h1>hello world</h1>' //不識別html標簽 "<h1>hello world</h1>" d3.innerHTML='<h1>hello world</h1>' //識別html標簽 "<
獲取值的操作
語法：標簽物件.value. 適用input、select、textarea標簽
class操作
- classList.remove(類名） 洗掉指定類
- classList.add(類名) 添加類
- classList.contains(類名) 存在回傳true，不存在回傳false
- classList.toggle(類名） 存在就洗掉，不存在就添加
var pEle=document.getElementById('p1') pEle.className "c1 c2 c3" pEle.classList DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"] pEle.classList.remove('c3') pEle.classList.add('c3') pEle.classList.contains('c2') true pEle.classList.contains('c4') false pEle.classList.toggle('c3') false pEle.classList.toggle('c3') true
指定css操作
1、沒有中橫線的css屬性，一般直接使用style.屬性名即可，（color,border)
如：obj.style.margin、obj.style.color等
2、有中橫線的css屬性（background-color)，將中橫線后面第一個字母換成大寫即可
如：obj.style.backgroundColor
var pEle=document.getElementById('p1') pEle.style.border='3px solid yellow' "3px solid yellow" pEle.style.backgroundColor='grey' "grey"
事件：
事件系結方式：
<button onclick='func1()'>點擊</button>
<button id='d1'>點我</button>
<script>
//第一種系結方式
function func1(){
alert(111)
}
//第二種
let btnEle=document.getElementById('d1');
btnEle.onclick=function(){
alert(222)
}
</script>
注意：script代碼一般放在body最下面
window.onload
window.onload事件是在檔案加載結束才觸發的，
注意：onload()函式存在覆寫現象
<script>
//第一種系結方式
window.onload=function(){
alert(111)
}
//第二種
let btnEle=document.getElementById('d3');
benEle.onclick=function(){
alert(222)
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/107706.html
標籤：JavaScript
上一篇：JS正則運算式