JS面试汇总Ⅲ

2017-11-15

BOM

ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）则无疑才是真正的核心。
BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

window对象

BOM 的核心对象是 window，它表示浏览器的一个实例
在浏览器中，window 对象有双重角色
- 既是通过 JavaScript 访问浏览器窗口的一个接口
- 又是 ECMAScript 规定的 Global 对象。
这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问 isNaN()、isFinite()、parseInt()、parseFloat() 等方法。
window.navigator.userAgent 可以查看浏览器

全局变量和window对象属性的差别

全局变量不能通过 delete 运算符删除，而 window 对象上定义的属性可以
因为window属性上的configurable: true

数据携带

close() 仅用于关闭浏览器窗口
open() 可以打开一个新的窗口
- 该方法可用作跨窗口携带数据
- opener属性可以把新窗口中的数据传递给旧窗口

定时器面试题

面试题I

setTimeout(function () {
     	  console.log(1);
     },1000);
   
     console.log(2);
     
     for (var i=0;i<1000000;i++){
       console.log('a');
     }

     //2   --->  1w*a ---> 1

面试题II

//同时输出5个5
     for (var i=0;i<5;i++){
       setTimeout(function () {
       	  console.log(i);
       },0)
     }

面试题III

//一秒之后同时输出5个5
     for (var i=0;i<5;i++){
       setTimeout(function () {
         console.log(i);
       },1000)
     }

面试题IV

//一秒之后同时输出0,1,2,3,4
     for (var i=0;i<5;i++){
       (function (i) {
       	  setTimeout(function () {
       	  	  console.log(i);
       	  },1000)
       })(i)
     }

面试题V

// 每隔一秒输出一个0; 1; 2; 3; 4
   for (var i=0;i<5;i++){
     (function (i) {
       setTimeout(function () {
         console.log(i);
       },1000 * i)
     })(i)
   }

面试题VI

// 先输出1W个a 同时输出0,1,2,3,4
    for (var i=0;i<5;i++){
      (function (i) {
        setTimeout(function () {
          console.log(i);
        },1000 * i)
      })(i)
    }

    //循环事件肯定大于 5 秒
    for (var i=0;i<10000;i++){
      console.log('a');
    }

面试题VII

//直接输出 0,1,2,3,4
   //相当于 console.log(i)
   for (var i=0;i<5;i++){
      setTimeout((function () {
      	  console.log(i);
      })(),1000)
   }

面试题VIII

	//1,4,1w*a,同时出来3,2
	function printing() {
      console.log(1);
      setTimeout(function() { console.log(2); }, 1000);
      setTimeout(function() { console.log(3); }, 0);
      console.log(4);
      
      for(var i=0;i<10000;i++){
        console.log('a');
      }
    }

    printing();
    
- 调用printing()执行函数. 先执行 console.log(1);
- setTimeout告诉异步线程.现在计时延迟1秒后执行然后在执行队列排队等待
- setTimeout告诉异步线程.现在立马执行.然后在执行队列排队等待
- 执行console.log(4);
- 执行for循环
- for执行完成后JS线程空闲了. 异步线程就把执行队列等待的任务扔给JS
- JS立马输出执行队列中的任务

property属性和attribute属性

property: 对象上的直接属性
attribute: DOM对html自定义和预定义属性的封装
浏览器和用户实际操作的都是property属性

attribute和property的关系

非布尔值属性: property和attribute永远都会实时同步
布尔值属性:
- 未干扰property属性: attribute会同步property
- 干扰过property属性: attribute不会同步property
操作属性的时候, 最好操作property
操作布尔值属性时, 尤其是使用jQuery库时, 最好使用prop()方法
操作非布尔值属性时, 考虑性能的话可以使用 attr()方法

DOM2.0

DOM规范

DOM是独立于平台和语言的接口，任何语言可以实现DOM规范. 该接口为程序和脚本提供了对文档的内容、结构和样式的动态获取和更新的功能。
DOM0：不是W3C规范。
DOM1：开始是W3C规范。专注于HTML文档和XML文档。
DOM2：对DOM1增加了样式表对象模型(DOM2)
DOM3：对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。

interface description language 接口描述文档

c++：
    class 派生类名 : 继承方式  基类名
    {
        派生类的成员
    };
    继承方式：public、private和protected，默认处理是public。

DOM0

DOM0指的是Necscape3.0和IE3.0提供对于HTML文档功能，实现了包括元素(HTML Element)、表单(Form)、图像(Image)等的接口和方法。

DOM1

DOM1 1.0版本发布于1998年10月1日，是第一个DOM规范。
DOM1包含两部分:
- DOM1 Core：定义了DOM最基本的接口.该规范定义了基于DOM1 Core的XML的实现，包括Document，Node，NodeList等等。
- DOM1 HTML：HTML文档是DOM的一种实现，该规范定义了基于DOM1 Core的HTML文档实现。
数据传递的载体: xml和json
- xml操作笨重.因为需要一套dom规范实现.但是传输安全
- json操作轻量. 可以像对象一样操作. 但是传输不安全

DOM2

DOM2规范在2000年11月13日发布，主要包含6个模块，相比于DOM1，DOM2更加丰富，更加完善，目前主流浏览器对DOM2有着良好的支持。
DOM2 Core: 相比于DOM1 Core，DOM2丰富了Document，Node等接口的功能
DOM2 View：View提供的是DOM的表现形式
DOM2 Event：DOM 事件处理系统规范
DOM2 Style：程序和脚本动态地获取和更新DOM的样式
DOM2 Traverse and Range：DOM2 Traverse是关于文档节点遍历的规范
DOM2 HTML：在DOM1 HTML的基础上结合DOM2 Core推出了一些新的接口和属性

DOM3

DOM3首次发布于2004年4月，主要包括Core、Load and Save、Validation、XPath、View and Formatting、Events和Abstract Schemas7个模块。
目前主流浏览器对DOM3的支持比较有限

Node/document/element

Node:节点. document:文档. element:元素. text: 文本
Node节点下有十二个节点
document 和 element 和 text是最常用的节点. 各自继承于Node节点接口

Node节点属性

nodeType，nodeName，nodeValue 是任何节点都共有的属性
id，name，value 是具体节点的属性
nodeType 只读. 表示的是该节点的类型
- 元素节点 type值为1
- 文本节点 type值为3
nodeName 只读. 返回当前节点的节点名称
nodeValue 可读写. 返回或设置当前节点的值。

只有在文本节点中使用 nodeValue 读写文本值时使用最多

元素节点：
      nodeType:1
      nodeName:标签名
      nodeValue:null
属性节点：
      nodeType:2
      nodeName:属性名
      nodeValue:属性值
文本节点：
      nodeType:3
      nodeName:#text
      nodeValue:文本值

DOM 增

document.createElement() 创建新的元素节点
- 返回值指向新建节点的引用指针,是一个元素节点.
- nodeType 属性值等于 1
- 新元素节点不会自动添加到文档里. 只在JS上下文中
document.createTextNode() 创建新的文本节点
- 返回值指向新建文本节点引用指针,是一个文本节点
- nodeType 属性等于 3
document.createAttribute() 创建新的属性节点
appendChild() 为元素节点添加子节点到最后一位
- 返回值是一个指向新增子节点的引用指针
insertBefore() 插入节点
- 第一个参数: 要插入的子节点
- 第二个参数: 要添加新的节点前的子节点
cloneNode() 复制子节点. 第二个参数传true深度克隆

DOM 删

removeChild() 从给定元素里删除一个子节点
- 返回值是一个指向已被删除的子节点的引用指针
removeAttribute() 删除属性节点的值

DOM 改

innerHTML. 获取设置html文本
innerText. 获取设置文本
setAttribute() 设置属性节点的值
- 第一个参数: 属性名
- 第二个参数: 修改的值
replaceChild() 替换节点
- 第一个参数: 要插入的子节点
- 第二个参数: 被替换的节点

DOM 查

getElementById 通过元素ID获取
getElementsByTagName 通过标签名获取一组元素
querySelector(“选择器”) 获取一个元素
querySelectorAll(“选择器”) 获取多个元素
getAttribute() 获取属性节点的值
parentNode 属性可返回某节点的父节点
childNodes 属性返回包含被选节点的子节点的 NodeList
children 获取指定节点的所有子节点(无空白文档)
firstChild 获取第一个子节点 (nodeValue属性来获取文本值)
lastChild 获取最后一个子节点 (nodeValue属性来获取文本值)
previousSibling 属性可返回某节点之前紧跟的节点
nextSibling 属性可返回某个元素之后紧跟的节点（处于同一树层级中）

DOM0事件

DOM0事件绑定: xxx.onclick = fn;
- 默认冒泡
- 一个元素上只能绑定一个同类事件,如果继续绑定的话,第二个事件函数会覆盖第一个
DOM0事件解绑: xxx.onclick = null;
- 最后一次注册事件设置成null

DOM2事件

IE绑定事件: xxx.attachEvent(事件名称，事件函数);
1. 没有捕获. 默认冒泡
2. 事件名称有on
3. 事件执行的顺序:IE8以下为倒序. IE8及以上为正序
4. this指向window
标准绑定事件: xxx.addEventListener(事件名称，事件函数，是否捕获);
1. 第三个参数设置是否捕获:默认false:冒泡; true：捕获
2. 事件名称没有on
3. 事件执行的顺序是正序
4. this触发该事件的对象
5. 一个元素上可以绑定多个同类事件,它们都会被执行
DOM2解绑: removeEventListener(“事件名称”, “事件回调”, “捕获/冒泡”)

兼容浏览器DOM2绑定方法 (同步this)

function bind(obj, evname, fn) {
	if (obj.addEventListener) {//除ie低版本外都可以进入
		obj.addEventListener(evname, fn, false);
	} else {
		obj.attachEvent('on' + evname, function() {
			fn.call(obj);
		});
	}
}

bind(document, 'click', fn1);

取消冒泡

DOM0: event.cancelBubble = true;
DOM2: event.stopPropagation();