定时器&DOM

下面这段代码输出结果是? 为什么?

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a);
//输出的结果为1,3,2。因为setTimeout的延迟执行的结果，即使时间0也会把当前的函数放在最后执行，因此最后输出2。

下面这段代码输出结果是? 为什么?

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);
//没有输出，由于setTimeout 0 放在最后执行，那么不会产生任何影响，while循环里的flag一直为true,一直执行空语句，产生死循环，无法跳出或结束循环，因此没有输出。

实现一个节流函数

function throttle(fn, delay) {
    var timer = null
    return function(){
        clearTimeout(timer)
        timer = setTimeout(fn, delay)
    }
}

function fn(){
    console.log('hello world')
}

var fn2 = throttle(fn, 1000)
fn2()
fn2()
fn2()

简单解释单线程、任务队列的概念

• 单线程模型指的是，JavaScript只在一个线程上运行。也就是说，JavaScript同时只能执行一个任务，其他任务都必须在后面排队等待。作为浏览器脚本语言，javascript的主要用途是与用户互动，以及操作dom。这决定了它只能是单线程，因为多线程需要共享资源、且有可能修改彼此的运行结果。
• JavaScript是单线程的语言，在执行时必须等前面的任务处理完以后才会处理后面的；而且是一个一个连续同步执行的，不象多线程可以同时处理多个任务。JavaScript中的任务分为同步任务和异步任务，同步任务就是主线程上一个个排队执行的任务；相反的异步任务则不进入主线任务而是被加入到“任务队列”中，任务队列的任务只有在主线任务执行完成之后才去处理任务队列中的任务。

参考：单线程模型

列出DOM 元素选取的 API

• getElementById()：该方法返回一个匹配特定id的元素，'id'为大小写敏感的字符串，如果当前文档中没有匹配的元素，则返回null。
• getElementsByClassName()：该方法返回一个类似数组的对象，包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。返回以当前元素为根节点的，所有指定class名称的子元素。
• getElementsByTagName()：该方法返回所有指定标签的元素。返回值是一个类似数组的HTMLCollection对象，可以实时反映HTML文档的变化。如果没有任何匹配的元素，就返回一个空集。
• getElementsByName()：该方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
• querySelector()：该方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
• querySelectorAll()：该方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

如何创建元素、如何添加元素

创建元素

createElement()

该方法用来生成HTML元素节点。参数为元素的标签名，如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

var newDiv = document.createElement("div");

createTextNode()

该方法用来生成文本节点，参数为所要生成的文本节点的内容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");

createDocumentFragment()

该方法生成一个对象，存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。

var docFragment = document.createDocumentFragment();

修改元素

appendChild()

在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

insertBefore()

在元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

replaceChild()

接受两个参数：要插入的元素和要替换的元素

newDiv.replaceChild(newElement, oldElement);

removeChild()

删除元素

parentNode.removeChild(childNode);