最近就是想補(bǔ)自己前端的知識(shí)體系。
基礎(chǔ)知識(shí)：
1拥褂、DOM結(jié)構(gòu) —— 兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)娘锁。
解析：節(jié)點(diǎn)之間的關(guān)系，不是父子饺鹃，就是兄弟莫秆。
- document.documentElement 返回文檔的根節(jié)點(diǎn)<html>
- document.body <body>
關(guān)系操作：設(shè)當(dāng)前對(duì)象為node
- node.parentNode(parentElement)父元素
- node.childNodes(children)子元素
- node.firstChild第一個(gè)子元素
- node.lastChild最后一個(gè)子元素
- node.previousSibling上一個(gè)兄弟元素
- node.nextSibling下一個(gè)兄弟元素
parentNode和parentElement功能一樣，childNodes和children功能一樣悔详。但是parentNode和
childNodes是符合W3C標(biāo)準(zhǔn)的镊屎，可以說比較通用。而另外兩個(gè)只是IE支持茄螃，不是標(biāo)準(zhǔn)缝驳，F(xiàn)irefox就不支持
2、DOM操作 ——如何添加归苍、移除用狱、移動(dòng)、復(fù)制拼弃、創(chuàng)建和查找節(jié)點(diǎn)等夏伊。
（1）創(chuàng)建新節(jié)點(diǎn)
- createDocumentFragment() 創(chuàng)建一個(gè)Dom片段
- createElement() 創(chuàng)建一個(gè)具體的元素
- createTextNode() 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
（2）添加、移除吻氧、替換溺忧、插入 - appendChild()
- removeChild()
- replaceChild()
- insertBefore()
(3) 查找 - getElementsByTagName() //通過標(biāo)簽名稱
- getElementsByName() //通過元素的Name屬性的值
- getElementById() //通過元素Id，唯一性
3盯孙、事件 —— 如何使用事件鲁森，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別。
IE瀏覽器本身只支持Bubbling不支持Capturing振惰。
1刀森、當(dāng)我們需要阻止瀏覽器某DOM元素的默認(rèn)行為的時(shí)候在W3C下調(diào)用e.preventDefault()，而在IE下則通過window.event.returnValue＝false來實(shí)現(xiàn)报账。
2研底、當(dāng)我們要阻止事件冒泡的時(shí)候，在W3C標(biāo)準(zhǔn)里調(diào)用e.stopPropagation()透罢，而在IE下通過設(shè)置window.event.cancelBubble=true來實(shí)現(xiàn)榜晦。
轉(zhuǎn)自：http://blog.sina.com.cn/s/blog_62f573ad010131t0.html
4、XMLHttpRequest —— 這是什么羽圃、怎樣完整地執(zhí)行一次GET請(qǐng)求乾胶、怎樣檢測(cè)錯(cuò)誤。
XMLHttpRequest 對(duì)象提供了在網(wǎng)頁(yè)加載后與服務(wù)器進(jìn)行通信的方法。它是ajax事件的一個(gè)名稱识窿。它最大的好處是刷新局部信息斩郎，不需要更新整個(gè)頁(yè)面。
其實(shí)不太懂喻频，但附上比較全的文檔：http://www.docin.com/p-560170056.html
5缩宜、嚴(yán)格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區(qū)分它們有何意義甥温。
區(qū)別：嚴(yán)格模式是瀏覽器根據(jù)規(guī)范去顯示頁(yè)面锻煌，混雜模式是一種向后兼容的方式去顯示。
意義：決定瀏覽器以何種方式渲染網(wǎng)站姻蚓，瀏覽器使用哪種規(guī)范去解析網(wǎng)頁(yè)宋梧。
觸發(fā)：瀏覽器根據(jù)doctype是否存在和使用的是哪種dtd來決定的。
6狰挡、盒模型 —— 外邊距捂龄、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器中的盒模型
content-box：
offsetWidth=width+margin
border-box：
offsetWidth=margin+border+width+padding
ie8以下盒模型中定義的元素寬高不包括內(nèi)邊距和邊框
7加叁、塊級(jí)元素與行內(nèi)元素 —— 怎么用CSS控制它們跺讯、以及如何合理的使用它們
塊級(jí)元素：div，p 占滿一行殉农。設(shè)置display：inline-block
行內(nèi)元素：span，a 占的區(qū)域僅是內(nèi)容所在區(qū)域局荚。設(shè)置display：block
css
transform轉(zhuǎn)換的使用
transform有以下方法：
- translate(x,y)變化位置超凳，兩個(gè)參數(shù)
- rotate() 角度
- scale(x,y)元素的尺寸會(huì)增加或者減少
- skew(x,y)元素翻轉(zhuǎn)給定的角度
- matrix() 把所有2d轉(zhuǎn)換方法組合在一起
transition過渡的使用
四個(gè)屬性
- transition-property: width; 變化的屬性
- transition-duration: 1s; 變化花費(fèi)的時(shí)間
- transition-timing-function: linear; 變化的時(shí)間曲線
- transition-delay: 2s; 延遲時(shí)間
簡(jiǎn)寫：
transition: width 1s linear 2s;
animation動(dòng)畫
animation：myFirst 5s
@keyframes myFirst {
from {background:red;}
to {background:yellow;}
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
