前端知识体系

最近就是想补自己前端的知识体系。

基础知识：

1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

解析：节点之间的关系，不是父子，就是兄弟。

• document.documentElement 返回文档的根节点
• document.body

关系操作：设当前对象为node

• node.parentNode(parentElement)父元素
• node.childNodes(children)子元素
• node.firstChild第一个子元素
• node.lastChild最后一个子元素
• node.previousSibling上一个兄弟元素
• node.nextSibling下一个兄弟元素

parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和
childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持

2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

（1）创建新节点

• createDocumentFragment() 创建一个Dom片段
• createElement() 创建一个具体的元素
• createTextNode() 创建一个文本节点
  （2）添加、移除、替换、插入
• appendChild()
• removeChild()
• replaceChild()
• insertBefore()
  (3) 查找
• getElementsByTagName() //通过标签名称
• getElementsByName() //通过元素的Name属性的值
• getElementById() //通过元素Id，唯一性

3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。

IE浏览器本身只支持Bubbling不支持Capturing。
1、当我们需要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则通过window.event.returnValue＝false来实现。
2、当我们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下通过设置window.event.cancelBubble=true来实现。
转自：http://blog.sina.com.cn/s/blog_62f573ad010131t0.html

4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。它是ajax事件的一个名称。它最大的好处是刷新局部信息，不需要更新整个页面。
其实不太懂，但附上比较全的文档：http://www.docin.com/p-560170056.html

5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

区别：严格模式是浏览器根据规范去显示页面，混杂模式是一种向后兼容的方式去显示。
意义：决定浏览器以何种方式渲染网站，浏览器使用哪种规范去解析网页。
触发：浏览器根据doctype是否存在和使用的是哪种dtd来决定的。

6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型

content-box：
offsetWidth=width+margin
border-box：
offsetWidth=margin+border+width+padding
ie8以下盒模型中定义的元素宽高不包括内边距和边框

7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

块级元素：div，p 占满一行。设置display：inline-block
行内元素：span，a 占的区域仅是内容所在区域。设置display：block

css

transform转换的使用

transform有以下方法：

• translate(x,y)变化位置，两个参数
• rotate() 角度
• scale(x,y)元素的尺寸会增加或者减少
• skew(x,y)元素翻转给定的角度
• matrix() 把所有2d转换方法组合在一起

transition过渡的使用

四个属性

• transition-property: width; 变化的属性
• transition-duration: 1s; 变化花费的时间
• transition-timing-function: linear; 变化的时间曲线
• transition-delay: 2s; 延迟时间
  简写：
  transition: width 1s linear 2s;

animation动画

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