最近就是想补自己前端的知识体系。
基础知识：
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
解析：节点之间的关系，不是父子，就是兄弟。
- document.documentElement 返回文档的根节点<html>
- document.body <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;}
}
网友评论