虛擬dom就是用物件的方式區代真實的dom操作。
當頁面開啟時瀏覽器解析html元素，構建乙個dom樹，將狀態儲存起來，在記憶體中模擬dom操作，又會生成乙個dom樹，兩個進行比較，根據diff演算法找出不同的地方，之渲染一次不同的地方
diff演算法：就是進行虛擬節點對比，並返回乙個patch物件，用來儲存兩個節點不同的地方，最後用patch記錄的訊息去區域性更新dom
window的作用:在封閉空間中宣告乙個全域性的變數
全域性變數和函式都屬於window
由什麼東西組成？
ecmascript 核心直譯器(es5和es6)
dom bom
提供最基本的功能比如:12+5 var a = 12; function show(){}
相容性：完全相容。
獲取元素,修改樣式,建立元素
相容性：很好，有不相容的，但是可以解決。
dom樹 頁面結構關係
獲取子節點
oele.children
只能獲取一層
獲取父節點
oele.parentnode
獲取結構父級
oele.offsetparent
獲取定位父級
獲取兄弟節點
獲取上乙個兄弟節點
oele.previouselementsibling
獲取下乙個兄弟節點
oele.nextelementsibling
注意：不相容低版本ie瀏覽器
獲取首尾子節點
首子節點
aele[0]
oprent.firstelementchild
尾子節點
aele[aele.length-1]
oprent.lastelementchild
獲取標籤名
oele.tagname
document.createelement(『標籤名』);
插入
父級.removechild(要刪的元素);
onmousedown 滑鼠按下
獲取滑鼠在div中的位置
var disx = ev.pagex-odiv.offsetleft
var disy = ev.pagey-odiv.offsettop
onmousemove 滑鼠移動
改變div的left和top
odiv.style.left = ev.pagex-disx+'px';
odiv.style.top = ev.pagey-disy+'px';
onmouseup 滑鼠抬起
把onmousemove乾掉
把onmouseup乾掉
問題一：
滑鼠沒點就懂了
解決：把onmousemove放在onmousedown裡面
問題二:
滑鼠移動過快，就移出div了
解決:1.把div放大 不靠譜，設計和產品會找你拼命
以下方法靠譜
把onmousemove事件加給document
問題三:
滑鼠抬起依然能動
解決:正在onmouseup中把onmousemove乾掉
問題四:
滑鼠拖拽的時候，會選中頁面內容
解決:在onmousedown中把預設事件阻止
return false; 注意一定要放在最後
原生DOM 操作
dom.nodetype 檢視元素節點型別 dom.childnodes 檢視所有元素下面的所有子節點 空白節點也會獲取到 dom.children 檢視所有元素下面的所有子節點 只獲取元素節點 dom.firstchild 獲取第乙個子節點 dom.lastchild 獲取最後乙個子節點 dom....
js原生dom操作
1.建立元素 var a document.createelement a var node1 document.createelement div var node2 document.createtextnode hello world 2.新增子元素 刪除子元素 document.body.r...
原生DOM操作彙總
節點型別attr document element text 其他 節點之間的關係父節點 parentnode 子節點 childnodes 前乙個兄弟節點 nextsibling 後乙個兄弟節點 previoussibling 第乙個子節點 firstchild 最後乙個子節點 lastchild...