- 從基礎知識JS-web-API
- js基礎知識：ECMA 262標准
- js-web-API: w3c標准
- W3c標准中關於js的規定有
- DOM操作、BOM操作、事件綁定、ajax請求（包括http協議）、存儲
- 常說的js（瀏覽器執行的js）包含兩部分：
- 1、js基礎知識（ECMA262標准）
- 2、JS-Web-API（w3c標准）
一、DOM操作
- 知識點：DOM本質、DOM節點操作、DOM結構操作
1、DOM本質 樹
- DOM就是Document+Object+Model（文檔對象模型）。
2、DOM節點操作
- DOM可以理解為：瀏覽器把拿到的HTML代碼，結構化為一個瀏覽器可識別並且js可操作的一個模型而已。
（1）、獲取DOM節點
var div1 = document.getElementById('div1');//元素
var divList = document.getElementsByTagName('div');//集合
console.log(divList.length);
console.log(divList[0]);
var containerList = document.getElementsByClassName('.container');
var pList = document.querySelectorAll('p');//集合
(2)、property 屬性
var pList = document.querySelectorAll('p');
var p = pList[0];
console.log(p.style.width);//獲取樣式
p.style.width = '100px';//修改樣式
console.log(p.className);//獲取class
p.className = 'p1';//修改class
//獲取nodeName和nodeType
console.log(p.nodeName);
console.log(p.nodeType)
(3)、Attribute 屬性
var pList = document.querySelectorAll('p');
var p = pList[0];
p.getAttribute('date-name');
p.setAttribute('date-name','imooc');
p.getAttribute('style');
p.setAttribute('style','font-size:30px')
3、DOM結構操作
- 新增節點、獲取父元素、獲取子元素、刪除節點
（1）、新增節點
var div1 = document.getELementById('div1');
//添加新節點
var p1 = document.createElement('p');
p1.innerHTML = 'this is p1';
div1.appendChild(p1);//添加新創建的元素
//移除已有節點
var p2 = document.getElementById('p2');
div1.appendChild(p2);
（2）、獲取父元素和子元素
var div1 = document.getELementById('div1');
var parent = div1.parentElement;//父元素
var child = div1.childNodes;//子元素
div1.removeChild(child[0]);//刪除節點
解題
1、DOM是哪種基本的數據結構
- 樹
2、DOM操作的常用API有哪些
- 獲取DOM節點、以及節點的property和attribute；
- 獲取父元素，獲取子元素
- 新增節點，刪除子元素
3、DOM節點的Attribute和property有何區別
- property只是一個js對象的屬性的修改
- Attribute是對html標簽屬性的修改
二、BOM
- Brower object model 瀏覽器對象模型
- 知識點
- navigator(瀏覽器)、screen(屏幕)、location(地址)、history(歷史)
（1）、navigator & screen
//navigator
var ua = navigator.userAgent;
var isChrome = ua.indexOf('chrome');
console.log(isChrome)
//screen
console.log(screen.width);
console.log(screen.height);
(2)、location & historylocation.href //地址
location.protocal //'http' 'https'
location.host //集合
location.pathname //'/learn/199'路徑
location.search //?參數
location.hash //#
//history
history.back()
history.forward()
解題
-
如何檢測瀏覽器的類型
var ua = navigator.userAgent; var isChrome = ua.indexOf('chrome'); console.log(isChrome)
三、事件綁定
- 知識點：通用事件綁定；事件冒泡；代理
1、通過事件綁定
var btn = document.getElementById('btn1');
btn.addEventListener('click',function(event){
console.log('clicked');
})
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn);
}
var a = document.getElementById('link1');
bindEvent(a,'click',function(e){
e.preventDefault();//阻止默認行為
alert('clicked');
})
關於IE低版本的兼容性
- IE低版本使用attachEvent綁定事件，和w3c標准不一樣
2、事件冒泡
<div id="div1">
<p id="p1">激活</p>
<p id="p2">激活</p>
<p id="p3">激活</p>
<p id="p4">激活</p>
</div>
<div id="div2">
<p id="p5">取消</p>
<p id="p6">取消</p>
</div>
var p1 = document.getElementById('p1');
var body = document.body;
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn);
}
bindEvent(p1,'click',function(e){
e.stopPropagation()//阻止冒泡
alert('激活');
})
bindEvent(body,'click',function(e){
alert('取消')
})
3、代理
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<!-- 會隨時新增更多a標簽 -->
</div>
<script>
var div1 = document.getElementById('div1');
div1.addEventListener('click',function(e){
var target = e.target;
if(target.nodeName === 'A'){
alert(target.innerHTML)
}
})
</script>
完善通用綁定事件的函數
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<!-- 會隨時新增更多a標簽 -->
</div>
<script>
function bindEvent(elem,type,selector,fn){
if(fn == null){
fn = selector;
selector = null;
}
elem.addEventListener(type,function(e){
var target;
if(selector){
target = e.target;
if(target.matches(selector)){
fn.call(target,e)
}
}else {
fn(e);
}
})
}
//使用代理
var div1 = document.getElementById('div1');
bindEvent(div1,'click','a',function(e){
e.preventDefault();
console.log(this.innerHTML)
})
</script>
解題
簡述事件冒泡流程
- DOM樹形結構->事件冒泡 --> 阻止冒泡 --> 冒泡的應用
四、ajax
- 知識點:XMLHttpRequest、狀態碼說明、跨域
1、XMLHttpRequest
var xhr = XMLHttpRequest;
xhr.open('GET','api',false);
xhr.onreadystatechange = function(){
//這里的函數異步執行，可參考之前js基礎的異步模塊
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText)
}
}
}
xhr.send(null);
//IE兼容問題;
//IE低版本使用ActiveXObject和w3c標准不一樣
2、readyState 狀態碼說明
- 0---（未初始化）還沒有調用send()方法
- 1--- (載入)已調用send方法，正在發送請求
- 2---（載入完成）send()方法執行完成，已經接收到全部響應內容
- 3---（交互）正在解析內容
- 4---（完成）響應內容解析完成，可以在客戶端調用了
3、status狀態碼說明
- 2xx --- 表示成功處理請求，如200；
- 3xx --- 需要重定向，瀏覽器直接跳轉；
- 4xx --- 客戶端請求錯誤，如404
- 5xx --- 服務端錯誤
4、跨域
- 什么是跨域、JSONP、服務器端設置http header
(1)、什么是跨域？
- 瀏覽器有同源策略，不允許ajax訪問其他域接口
- http://www.yourname.com:80/page1.html
- http端口80 https端口默認443
- 跨域條件：協議、域名、端口有一個不同就算跨域
（2）、可以跨域的三個標簽
- 有三個標簽允許跨域加載資源
<img src="xxx" /><link href="xxx" /><script src="xxx" />
(3)、三個標簽的場景
<img>用於打點統計，統計網站可能是其他域<link>``<script>可以使用CND、CND的也是其他域<script>可以用JSONP
（4）、跨域注意事項
- 所有的跨域請求都必須經過信息提供方允許，如果未經允許即可獲取，那是瀏覽器同源策略出現漏洞
（5）、JSONP實現原理
-
加載http://www.baidu.com/classindex.html
-
不一定服務器端有一個classindex.html文件
-
服務器可以根據請求，動態生成一個文件返回
-
同理於
<script src="http:www.baidu.com/api.js"><script> window.callback = function(data){ //這里我們跨域得到信息 console.log(data) } </script>
(6)、服務器端設置http header
- 另外一個解決跨域的簡潔方法，需要服務端來做，但是作為交互方，我們必須知道這個方法，是將解決跨域問題的一個趨勢。
五、存儲
- 知識點：cookie、locationStorage 和sessionStorage
1、cookie
- 本身用於客戶端和服務端通信
- 但是它有本地存儲的功能，於是就被“借用”；
- 使用document.cookie = ... 獲取和修改即可
（1）、cookie用於存儲的缺點
- 存儲量太小，只有4kb
- 所有http請求都帶着，會影響獲取資源的效率
- API簡單，需要封裝才能用document.cookie = ...
(2)、locationStorage和sessionStorage
- HTML5專門為存儲而設計，最大容量5M（兆）
- API簡單易用
- localStorage.setItem(key,value)
- localStorage.getItem(key,value)
- ios safar隱藏模式下 localStorage.getItem會報錯