JS面试题二

前端开发所需掌握知识点概要

• HTML&CSS：
  对Web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、兼容性、CSS语法、层次关系，常用属性、布局、选择器、权重、盒模型、
  Hack、CSS预处理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5（离线 & 存储、Histoy,多媒体、WebGL\SVG\Canvas）；

• JavaScript：
  数据类型、运算、对象、Function、继承、闭包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、
  内存泄漏、跨域、异步请求、模板引擎、模块化、Flux、同构、算法、ECMAScript6、Nodejs、HTTP、

• 其他：
  主流MVVM框架(React\Vue\Angular)、Hybrid App\React Native\Weex、TypeScript、RESTFul、WEB安全、前端工程化、依赖管理、性能优化、
  重构、团队协作、可维护、易用性、SEO、UED、前端技术选型、快速学习能力等；

---

1. 如何添加、移除、移动、复制、创建和查找节点等。

答：

document.createElement("div"); // 创建新元素
document.createTextNode("这是新文本"); // 创建新文本
appendChild();  // 添加
removeChild();  // 移除
replaceChild(); // 替换
insertBefore(); // 之前插入
insertAfter();  // 之后插入
cloneNode();    // 复制
document.getElementsByTagName("");  // 通过标签名称查找
document.getElementsByName(""); // 通过元素的Name属性的值查找
document.getElementById("");    // 通过元素Id，唯一性查找
document.getElementsByClassName("");    // 通过类查找
document.querySelector(""); // h5 新方法

---

2. 如何使用事件？以及IE和标准DOM事件模型之间存在的差别？

答：

• 关于事件流

  1.1 IE的事件流：事件冒泡
    由事件的目标(event.srcElement)接受事件，然后逐级向上（例：下一个为包含event.srcElement的节点传递事件,直到文档节点document;
    
  1.2 其他浏览器支持的另一种事件流：事件捕获
    与事件冒泡正好相反，文档节点document先监听到事件，然后把事件逐级向下传递事件，直到目标节点event.target；
    
  1.3 DOM事件流
    DOM2级事件规范的事件流综合了以上两种，把事件流分为了以下三个阶段：
    1.3.1 事件捕获阶段
      不涉及事件目标，或者说这个阶段在目标之前就结束了；
    1.3.2 处于目标阶段
      被看作冒泡阶段的一部分，所以可以在冒泡阶段在目标事件上操作事件；
    1.3.3 事件冒泡阶段
    
  1.4 规范和浏览器实现的差别
    DOM2级事件规范的捕获阶段，事件从文档节点document开始传播，现代浏览器大多数都是从window对象开始传播事件的；
    DOM2级事件规范捕获阶段不涉及事件目标，现代浏览器大多数都在这个阶段包含事件目标。

• 如何使用事件？以下是几种用来响应事件的事件处理程序
  HTML事件处理程序|DOM0级事件处理程序|DOM2级事件处理程序|IE的事件处理程序(IE11以下)

  2.1 HTML事件处理程序
    2.1.1 指定事件:<button type="button" onclick="alert('响应事件的处javascript代码，可以用全局的函数')">Click Me!</button>
    2.1.2 优缺点:简单，但是与HTML代码紧密耦合，更改不方便;
    2.1.3 删除事件:同DOM0的删除事件处理方式;
  2.2 DOM0级事件处理程序
    2.2.1 指定事件:document.onclick = function(){alert("document has been clicked")};
    2.2.2 删除事件:document.onclick = null;
    2.2.3 优缺点:简单且跨浏览器
    2.2.4 实质: 为元素指定方法(栗子中为document指定onclick方法)，移除方法，所以其处理程序是在元素的作用域运行的；
  2.3 DOM2级事件处理程序
    2.3.1 指定事件:addEventListener("引号括起来的事件名"， 触发事件后调用的事件处理程序, 是否在捕获节点调用时间处理程序的布尔值)
      栗子:var funA = function(){alert(" DOM2级事件处理程序")};
            document.addEventListener("click", funA, false);
    2.3.2 删除事件: document.removeEventListener("click", funA, false);
      如果指定的处理程序是匿名函数则不能删除，因为没有函数名;
    2.3.3 优缺点: 可以添加多个监听事件，缺点见2.3.2;
  2.4 IE的事件处理程序(IE11以下，IE11及Edge用的DOM2级事件处理程序)
    2.4.1 指定事件: attachEvent("onclick", function(){alert("is no longer supported in ie11")});
    2.4.2 删除事件: detachEvent("onclick", funA);
      如果指定的处理程序是匿名函数则不能删除，因为没有函数名;
    2.4.3 优缺点:可以添加多个监听事件，缺点见2.4.2;

• IE和标准DOM事件模型之间存在的差别

  3.1 这里的IE是IE11以下;
  3.2 参数的差别: attachEvent()的第一个参数比addEventListener()的事件名多一个"on"，
      且没有第三个参数，因为IE事件模型只支持冒泡事件流;
  3.3 事件处理函数作用域的区别: IE中事件处理程序处于全局作用域，其内的this会指向window;
      而用DOM（0或2）级事件的事件处理程序的作用域是元素作用域，其内的this指向其所属的元素
      例: document.addEventListener("click", function(){ 
              if(this == document){
                alert("此时this指向document");
              }
          }, false);
  3.4 事件对象event的属性方法的差别
          IE                    DOM
  cancelBubble = true    stopPropagation() //停止冒泡
  returnValue = false    preventDefault() //阻止元素默认事件
  srcEelement            target //事件目标

---

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

答：

• 关于XMLHttpRequest

  1.1 作用: 提供了网页加载后在后台与服务器通信的方法;实现AJAX通信;
  1.2 创建: var xhr = new XMLHttpRequest();//不适用于IE7之前的版本，其他低版本IE可通过 ActiveXObject构造;
  1.3 对象属性: readyState,可取的值见图-1;
  1.4 对象事件: readyState的值的改变会触发readyStatechange事件;错误会触发error事件；
  1.3 优缺点: 在不重新加载页面的情况下更新网页;
  1.4 XMLHttpRequest 2级:
    FromData对象:用来序列化表单或者创建与表单格式相同的数据;其实例可直接传给seng()方法使用;
    栗子： var form1 = document.forms[0];
          xhr.send(new FormData(form1));

• 一次GET请求分析,并检测执行过程

  2.1 异步GET
    var xhr = new XMLHttpRequest();
    xhr.onerror = function(){alert("我出错啦")};
    xhr.onreadystatechange = function(){
      switch(xhr.readyState){
        case 0 : alert("未初始化，及还未调用open方法");
                 break;
        case 1 : alert("启动，未调用send方法");
                 break;
        case 2 : alert("发送，未收到响应");
                 break;
        case 3 : alert("接受，取得部分数据");
                 break;
        case 4 : if((xhr.status >=200 && xhr.status < 300) || xhr.status ==304){
                  alert(xhr.responceText);
                 };
                  break;
        default : alert("are you kidding?");
      }
    };
    xhr.open("get", "url", true)//启动一个请求，未发送
    xhr.send(null);//发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回

---

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

• W3C盒模型

• IE8以下版本的浏览器中的盒模型

---

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

答：

 （1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div
默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。  
 （2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p  
 （3）知名的空元素：<br><hr><img><input><link><meta>  
  鲜为人知的是：<area><base><col><command><embed><keygen><param><source><track><wbr>

---

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

答：

需要浮动的元素可使用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;}

---

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

答：

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

---

8. 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）。

非原创，参考博客园、简书等。