BOM - 瀏覽器對象模型
DOM - 文檔對象模型
瀏覽器事件監聽
XMLHttpRequest對象
*****
# BOM
瀏覽器環境：
全局對象 - window
## window.navigator
反映瀏覽器本身及其功能信息的對象。
userAgent - 用戶代理字符串，易被修改偽裝
特性監聽法——功能檢測法
```
if(typeof window.addEventListener === 'function'){
// supported
} else {
// other way
}
```
## window.location
```
location.href
location.hostname
```
方法：
```
location.reload() - 重載頁面
location.assign('url')
location.replace('url')
```
## window.history
```
history.forward()
history.back()
history.go()
```
## window.frames
```
window.frames === window;
// true
frames.length;
```
## window.screen
```
1. availHeight:728
2. availLeft:0
3. availTop:0
4. availWidth:1366
5. colorDepth:24
6. height:768
7. orientation:ScreenOrientation?{angle:0,type:"landscape-primary",onchange:null}
8. pixelDepth:24
9. width:1366
```
## window.open()/close()
```
let win = window.open('http://www.baidu.com', 'baidu', 'width=300,height=300,resizable=yes');
win.close();
```
## window.moveTo()/resizeTo()
## window.alert()/prompt()/confirm()
## window.setTimeout()/setInterval()
## window.document
# DOM
將XML或HTML解析成樹形節點的方法
DOM樹
## DOM節點訪問
```
document.nodeType; // 9
document.nodeValue
document.nodeName
```
最常用節點類型：1-元素，2-屬性，3-文本
### document.documentElement
訪問HTML文檔根節點
```
var el = document.documentElement
el.nodeType;
el.nodeName === el.tagName
el.nodeValue;
```
### 子節點
hasChildNodes() // 是否存在子節點
```
document.documentElement.childNodes.length
document.documentElement.childNodes[0].parentNode
```
```
hasAttributes() // 是否存在屬性
getAttributes()
```
```
textContent/innerText // 訪問標簽中的內容
innerHTML // 指定節點中所有HTML代碼
```
```
getElementsByTagName()
getElementsByName()
getElementById()
```
```
nextSibling
previousSibling
firstChild
lastChild
```
遍歷DOM
```
function walkDom(n){
do{
console.log(n);
if(n.hasChildNodes()){
walkDom(n.firstChild)
}
} while(n = n.nextSibling)
}
```
## 節點修改
style屬性
CSS屬性中的短線('-')在JS中不可用，
padding-top --> paddingTop
## 新建節點
```
document.createElement()
document.createTextNode()
appendChild()
```
```
cloneNode(true-深拷貝，子節點；false=淺拷貝，當前節點)
```
```
insertBefore()
document.body.insertBefore(document.createTextNode('boo!'), document.body.firstChild);
```
## 移除節點
```
removeChild()
removeAll()
```
```
document.write()
```
# 事件
```
var para = document.getElementById('');
para.addEventListener('click', function(){...}, false);
false-只使用冒泡法來處理事件
```
## 事件傳播鏈
捕捉法——單擊首先發生在document上，然后一次傳遞給body，列表，最終到達該鏈接；
冒泡法——單擊首先發生在鏈接上，然后逐層向上冒泡，直至document對象；
某一事件當前所處的階段，訪問事件對象的`eventPhase`屬性。
`stopPropagation()`——阻斷事件的傳播
### 事件委托
有多個節點需要添加事件監聽，更好的做法是為父級節點添加一個監聽，當事件發生時，再判斷被點擊的是哪一個。
```
addEventListener('event', function(){}, false);
removeEventListener('event', function(){}, false);
```
## 防止默認行為
```
var all_links = document.getElementsByTagName('a');
for(var i = 0; i < all_links.length; i++){
all_links[i].addEventListener('click',
function(e){
if(!confirm('Are you sure you want to follow this link?')){
e.preventDefault();
}
},
false);
}
```
## 跨瀏覽器事件監聽器
> addEventListener() / removeEventListener()
> attachEvent() / detachEvent()
> onclick
```
function callback(evt){
evt = evt || window.event;
var target = (typeof evt.target !== 'undefined') ? evt.target : evt.srcElement;
console.log(target.nodeName);
}
if(document.addEventListener){
document.addEventListener('click', callback, false);
} else if (document.attachEvent) {
document.attachEvent('onclick', callback);
} else {
document.onclick = callback;
}
```
## 事件類型
# XMLHttpRequest對象
```
// 發送請求
function request(url, callback){
// 創建對象
var xhr = new XMLHttpRequest();
// 事件監聽
xhr.onreadystatechange = (function(myxhr){
return function(){
callback(myxhr)
}
})(xhr);
// 打開
xhr.open('GET', url, true);
// 發送請求
xhr.send('');
}
```
```
// 處理響應
function myCallback(){
if(xhr.readyState < 4){
return;
}
if(xhr.status !== 200){
alert('Error!');
return;
}
alert(xhr.responseText);
}
```
