前端知识点总结

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

关系：父子关系、兄弟关心

如何移动：父节点与子节点：childNodes ,firstChild ,lastChild , parentNode

兄弟节点之间：nextSibling  , previousSibling

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

添加：appendChild(new,old)  ,  insertBefore(new,old)

删除： removeChild(node)  ,  

移除： replaceChild(new,old)

复制：cloneNode(boolean)

创建：createElement()  ,createTextNode()

查找：getElementById('ID') ,getElementsByTagName()   ,getElementsByName()

属性节点操作：getAttribute()  ,setAttribute()  ,removeAttribute()

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

 事件：就是用户或者浏览器自身执行的某种行为；而响应某个事件的函数就叫事件处理程序。

 为事件指定事件处理程序的方法：在HTML中指定事件处理程序，使用js指定事件处理程序

差异：1.在绑定事件处理程序上存在差异

var btn = document.getELementById('mybutton');
1.DOM0
   btn.onclick = function(){
     ...
   }
   取消事件处理程序
   btn.onclick = null;
2.DOM2事件处理程序
   function handler(){  ...   }
   btn.addEventListener('click',handler,true/false)
   取消事件处理程序
   btn.removeEventListener('click',handler,true/false)
3.IE事件处理程序
    function handler(){  ...   }
    btn.attachEvent('onclick',handler)
    取消事件处理程序
    btn.detachEvent('onclick',handler)

2.在event对象上存在差异

1.DOM
将event作为函数的参数传递进去
btn.onclick = function (event){alert(event.tyle)}
2.在IE中
在DOM0中，event作为window对象的一个属性
btn.onclick = function(){var event = window.event;}
在DOM2中
作为参数传递进去
btn.attachEvent('onclick',function(event){alert(event.type)})

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

XHR是负责Ajax运作的核心对象

1.首先需要创建XHR对象；2.为stateReadyChange注册事件处理程序3.启动open（）4.send（）

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

在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式!

主要是考虑到向后的兼容性。

六、JSON —— 作用、用途、设计结构

JSON是一种数据格式，通过js能够更轻松的读写，JSON数据可以非常容易的解析为js对象;

用途：存储数据、在Ajax中实现关于问题

设计结构：跟js的对象字面量很相似，但是属性需要加上双引号。

七、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由

考虑大小写、要求正确嵌套、属性值必须加引号、对特殊字符的处理、有起始标签就需要有闭合标签、name值是不赞成使用的

HTML的不足：不利于开发和维护、在移动终端上显示的不是很理想

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

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

 十、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题

十一、Ajax的优势和不足

     优势： 优秀的用户体验、提高了web程序的性能、减轻了服务器和带宽的负担、不需要插件支持

     不足：浏览器对XMLHttpRequest对象的支持度不足、无法后退、对搜索引擎的支持不足、开发调试工具的不足

十二、clientHeight、offsetHeight、scrollHeight的区别

    clientHeight：表示可见区域的高度；offsetHeight：可见区域的宽度+滚动条+边框；scrollHeight：网页内容的实际高度。一般情况下offsetheight略小于scrollHeight的高度。