寒蝉的小聒噪

前端面试题总结（转载）

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

```
 1.DOM中两个节点存在的关系无非3种：
    1.1.包含与被包含,IE率先引入的contains()方法可检测，例 A.contains(B)，
          即检查节点B是否是节点A的子节点，返回布尔值，现大多数浏览器都支持；
          DOM level 3引入的compareDocumentPosition()，确定节点之间的关系，
          返回值为一个表示关系的位掩码的合(或者是按位或的值，并不知道具体实现)，
          通过按位与操作符“&”可确定关系。例:节点A(例：<html>)在节点B(例：<body>)前--位掩码为4，
          且节点A包含节点B--位掩码为16,则返回值为20，通过"!!(20&16)"这种方式即可返回一个布尔值，
          解析：“20&16”返回16证明节点A包含节点B（即：16），通过!!取得16的布尔值true。
    1.2父与子
        获取父节点：node.parentNode, node.parentElement,两者的区别在于后者只能获取元素；
        获取子节点：childNodes(以NodeList对象存在的子节点集合),firstChild,lastChild
    1.3同辈（兄弟节点）
        nextSibling，previousSibling  
    1.4Element Travel API给DOM添加的属性
        childElementCount,firstElementChild,lastElementChild,nextElementSibling，
        previousElementSibling  ,他们与之前的方法之间的区别是多了Element，保证只返回元素节点，而之前的方法普通的文本节点及注释节点也会返回,之前的方法在非IE浏览器中还会把元素间的空白符当文本节点返回。
    1.5children属性（IE9以后）
        与childNodes不同的地方在于：children只包含元素子节点(IE8及之前的版本可能会包含注释节点)
```
- ```
DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。
```
1）创建新节点
      createDocumentFragment()    //创建一个DOM片段

      createElement()   //创建一个具体的元素

      createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()

（3）查找

      getElementsByTagName()    //通过标签名称

      getElementsByName()    //通过元素的Name属性的值

      getElementById()    //通过元素Id，唯一性

1.创建元素节点
document.createElement() 方法用于创建元素，接受一个参数，即要创建元素的标签名，返回创建的元素节点

1 var div = document.createElement("div"); //创建一个div元素
2 div.id = "myDiv"; //设置div的id
3 div.className = "box"; //设置div的class

创建元素后还要把元素添加到文档树中

2.添加元素节点
appendChild() 方法用于向childNodes列表的末尾添加一个节点，返回要添加的元素节点

1 var ul = document.getElementById("myList"); //获得ul
2 var li = document.createElement("li"); //创建li
3 li.innerHTML = "项目四"; //向li内添加文本
4 ul.appendChild(li); //把li 添加到ul子节点的末尾

appendChild() 方法还可以添加已经存在的元素，会将元素从原来的位置移到新的位置

1 var ul = document.getElementById("myList"); //获得ul
2 ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

insertBefore() 方法，如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法，该方法接受2个参数，第一个是要插入的节点，第二个是参照节点，返回要添加的元素节点

1 var ul = document.getElementById("myList"); //获得ul
2 var li = document.createElement("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前

1 var ul = document.getElementById("myList"); //获得ul
2 var li = document.createElement("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 ul.insertBefore(li,ul.lastChild); //把li添加到ul的最后一个子节点（包括文本节点）之前

1 var ul = document.getElementById("myList"); //获得ul
2 var li = document.createElement("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
5 ul.insertBefore(li,lis[1]); 　　　　//把li添加到ul中的第二个li节点前

3.移除元素节点
removeChild() 方法，用于移除节点，接受一个参数，即要移除的节点，返回被移除的节点，注意被移除的节点仍然在文档中，不过文档中已没有其位置了

1 var ul = document.getElementById("myList"); //获得ul
2 var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点

1 var ul = document.getElementById("myList"); //获得ul
2 var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
3 ul.removeChild(lis[0]); 　　　　　　//移除第一个li，与上面不同，要考虑浏览器之间的差异

4.替换元素节点
replaceChild() 方法，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要替换的节点，返回被替换的节点

1 var ul = document.getElementById("myList"); //获得ul
2 var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点

1 var ul = document.getElementById("myList"); //获得ul;
2 var li = document.createElement("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
5 var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li

5.复制节点
cloneNode() 方法，用于复制节点，接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

1 var ul = document.getElementById("myList"); //获得ul
2 var deepList = ul.cloneNode(true); //深复制
3 var shallowList = ul.cloneNode(false); //浅复制

```
事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。
```
在浏览器解析事件的时候，有两种触发方式，一种叫做Bubbling(冒泡)，另外一种叫做Capturing(捕获)。由上图可以看出来，冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fire时，依次它的父元素的click事件也被fire(触发)，一直传递到最顶层的body元素为止。而捕获的触发方式正好相反，当某个元素的click事件被触发时，先从最顶层的body元素click事件被触发开始，一直传递到真正被触发的元素为止。

****************************************************************************

这次我将讨论W3C的标准DOM事件模型和IE独立门户的DOM事件模型到底有多少区别，首先我们可以回想一下目前大多数Js程序员习惯如何绑定事件到DOM元素上，最常见的就是obj.οnclick=handler这种方式(更恶劣的是在Html代码的元素标签中直接加上onclick属性，完全没达到视图和动作分开的原则)。我们暂时称这种方式的事件添加为Traditional(传统方式)吧，IE有自己的IE Event Module，而火狐等浏览器则遵循的W3C方式的Event Module，下面看看这三者各自的优缺点在哪里——

1、Traditional Module

传统方式的事件模型即直接在DOM元素上绑定事件处理器，例如—

window.οnlοad=function(){…}

obj.οnmοuseοver=function(e){…}

obj.οnclick=function(){…}

首先这种方式是无论在IE还是Firefox等其他浏览器上都可以成功运行的通用方式。这便是它最大的优势了，而且在Event处理函数内部的this变量无一例外的都只想被绑定的DOM元素，这使得Js程序员可以大大利用this关键字做很多事情。

至于它的缺点也很明显，就是传统方式只支持Bubbling，而不支持Capturing，并且一次只能绑定一个事件处理器在DOM元素上，无法实现多Handler绑定。最后就是function参数中的event参数只对非IE浏览器有效果(因为IE浏览器有特制的window.event)。

2、W3C (Firefox.e.g) EventModule

Firefox等浏览器很坚决的遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数，看几个例子—

window.addEventListener(‘load’,function(){…},false);

document.body.addEventListener(‘keypress’,function{…},false);

obj.addEventListener(‘mouseover’,MV,true);

function MV(){…}

addEventListener带有三个参数，第一个参数是事件类型，就是我们熟知的那些事件名字去掉前面的’on’，第二个参数是处理函数，可以直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。

W3C的事件模型优点是Bubbling和Capturing都支持，并且可以在一个DOM元素上绑定多个事件处理器，各自并不会冲突。并且在处理函数内部，this关键字仍然可以使用只想被绑定的DOM元素。另外function参数列表的第一个位置(不管是否显示调用)，都永远是event对象的引用。

至于它的缺点，很不幸的就只有在市场份额最大的IE浏览器下不可使用这一点。

3、IE Event Module

IE自己的事件模型跟W3C的类似，但主要是通过attachEvent和detachEvent两个函数来实现的。依旧看几个例子吧—

window.attachEvent(‘onload’,function(){…});

document.body.attachEvent(‘onkeypress’,myKeyHandler);

可以发现它跟W3C的区别是没有第三个参数，而且第一个表示事件类型的参数也必须把’on’给加上。这种方式的优点就是能绑定多个事件处理函数在同一个DOM元素上。

至于它的缺点，为什么如今在实际开发中很少见呢？首先IE浏览器本身只支持Bubbling不支持Capturing；而且在事件处理的function内部this关键字也无法使用，因为this永远都只想window object这个全局对象。要想得到event对象必须通过window.event方式，最后一点，在别的浏览器中，它显然是无法工作的。

最后我在推荐两个必须知道的IE和W3C标准的区别用法吧—

1、当我们需要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则通过window.event.returnValue＝false来实现。

2、当我们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下通过设置window.event.cancelBubble=true来实现。
```
XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
```
XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。这是AJAX事件的一个名称，缩写为XHR，是使用XML进行WEB服务器数据交互的一种方式。执行一次get请求有两种方式，以后总是原生JS，一种是JQ封装好的方法。使用JQ的话，$.get()；检测错误可以使用error事件然后打印出错误码

```
严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
```
Doctype：(Document Type)文档类型，它位于文档中最前面的位置，处于标签之前。如果你想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE的声明。确定了正确的Doctype，xhtml里面的标识和css才能正常生效(也就是说它会很负责地告诉浏览器怎么解释你的这个标签和你写的css)。既然它是一种声明，它的责任就是告诉浏览器文档使用哪种html或者xhtml规范。为了获取正确的Doctype声明，关键就是让dtd与文档所遵循的标准对应。例如：假定文档遵循的是xhtml 1.0 strict,那么文档的Doctype声明就应该是相应的dtd,如果Doctype声明指定的是xhtml dtd，但文档包含的依旧是html标记就是不恰当的。类似的，如果文档包含的是xhtml 1.0 strict标记，但是Doctype声明指定是html dtd也是不恰当的。

　　一、选择什么样的DOCTYPE?

　　xhtml 1.0中有3种dtd声明可以选择，过渡性的(Transitional)、严格的(Strict)、框架的(Frameset)。下面我们来分别介绍：

　　1、过渡的：一种要求不很严格的，允许在html中使用html 4.01的标识(符合xhtml语法标准)，过渡的dtd写法如下：
1. >
　　2、严格的：一种要求严格的dtd，不允许使用任何表现层的标识和属性，严格的dtd写法如下：
1. >
　　3、框架的：一种专门针对框架页面所使用的dtd，当页面中含有框架元素时，就要采用这种dtd，写法如下：
1. >
　　PS：使用严格的dtd来制作页面当然是最理想的方式，但是对于还没有深入了解web标准的网页设计者，比较适合用过渡的dtd，因为这种dtd还允许使用表现层的标识、元素和属性，比较适合大多数的网页制作人员(当然量力而为了!)
二、什么是标准模式与混杂模式？
不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析，但在某些情况下也会影响到JavaScript的解释执行。
1、文档模式目前有四种：
```
混杂模式（quirks mode）
 //让IE的行为与（包含非标准特性的）IE5相同
标准模式（standards mode）
//让IE的行为更接近标准行为
准标准模式（almost standards mode）
//这种模式下的浏览器特性有很多都是符合标准的，不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。
超级标准模式:
//IE8引入的一种新的文档模式，超级文档模式可以让IE以其所有版本中最符合标准的方式来解释网页内容。
```
ps：
总的来看，混杂模式让IE像IE5，标准模式使用IE7的呈现引擎，而超级标准模式则是IE8的默认文档模式。
(另一篇关于混杂模式解释：
什么是混杂模式呢?
　　混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作。

　　为什么会有混杂模式呢?
　　当年Netscape4(译注：网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题(bugs)，但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。为了保障自己的网站在各个浏览器上显示正确，网页开发者们不得不依据各个浏览器自身的规范来使用css，因此大部分网站的css实现并不符合W3C规范的标准。然而随着标准一致性越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有的 css，完全去遵循标准，会使许多旧网站或多或少受到破坏，如果浏览器突然以正确的方式解析现存的css，陈旧的网站的显示必然会受到影响。所以，所有的浏览器都需要提供两种模式：混杂模式服务与旧式规则，而严格模式服务于标准规则
2、两种模式间的差异
对于这两种模式之间的差异，最显著的一个例子与Windows上IE专有的盒模型有关。在IE 6出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性，Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。
呈现方面的其他差异比较小，而且是与特定浏览器相关的，包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素，以及在使用关键字时将字号增加一级。

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

```
盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型
```
一个元素盒模型的层次从内到外分别为：内边距、边框和外边距
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

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

行内元素，用CSS中的display:inline;属性则变为行内元素
快级元素，用CSS中的display:block;属性则变为块级元素
影响：周围元素显示在同一行或换行显示，根据具体情况调整样式

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

需要浮动的元素可使用CSS中float属性来定义元素的浮动位置，left：往左浮动，right：往右浮动
浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;}  /* for IE/Mac */

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

主要区别：
     XHTML 元素必须被正确地嵌套
     XHTML 元素必须被关闭，空标签也必须被关闭，如 
 必须写成 

     XHTML 标签名必须用小写字母
     XHTML 文档必须拥有根元素
     XHTML 文档要求给所有属性赋一个值
     XHTML 要求所有的属性必须用引号""括起来
     XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示
     XHTML 文档不要在注释内容中使“--”
     XHTML 图片必须有说明文字
     XHTML 文档中用id属性代替name属性

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

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
JSON建构于两种结构：
“名称/值”对的集合（A collection of name/value 
pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表
（hash table），有键列表（keyed list），或者关联数组 （associative array）。 
值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

Doctype作用？标准模式与兼容模式各有什么区别?

  （1）、声明位于位于HTML文档中的第一行，处于  标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
   DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

  （2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟
   老式浏览器的行为以防止站点无法工作。
  （3）、标准模式的宽度计算方式与兼容模式不同，给行内元素设置width和height无效，而兼容模式有效;标准模式当父元素没高度，
   子元素百分比无效，而兼容模式有效，使用margin:0 auto在标准模式下可以使元素水平居中，但在兼容模式下却会失效,解决办法，
   用text-align属性;兼容模式下设置图片padding失效，Table的字体属性不能继承上层设置，white-space:pre失效

HTML5 为什么只需要写？

   HTML5 不基于 SGML，因此不需要对DTD(为了描述文档的结构，SGML定义了一个称为“文档类型定义(Document Type Definition，DTD)”
   的文件(file)，它为组织文档的文档元素(例如章和章标题，节和主题等)提供了一个框架。此外，DTD还为文档元素之间的相互关系制定了
   规则。)进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

   而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

行内元素有哪些？块级元素有哪些？空(void)元素有那些？

  首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，
  则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

  （1）行内元素有：a b span img input select strong（强调的语气）
  （2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

  （3）常见的空元素（开始标签与结束标签之间没有内容的元素）：
  	
 
    
  	鲜为人知的是：
  	*  
  	*   为页面上的所有链接规定默认地址或默认目标。
  	*  只有 Internet Explorer 9 （更早或更晚的版本都不支持）支持  标签。command 元素表示用户能够调用的命令。
  	*   标签定义嵌入的内容，比如插件。H5新增
  	*  标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
  	*　 此标签可为包含它的

前端面试题总结（转载）

二、什么是标准模式与混杂模式？

CSS

ECMAScript6 相关

前端框架相关

其他问题

你可能感兴趣的:(理论基础)