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);
}
```
