javascript api

1、dom操作

//将NodeList转换为数组
function convertToArray(nodes) {
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0); //for standard DOM browser
} catch (ex) {
//for IE DOM based in COM
array = [];
for (var i = 0, len = nodes.length; i < len; i++) {
array.push(nodes[i]);
}
}
return array;
}

//判断第一个节点或者最后一个节点
if (someNode.nextSibling === null) {
console.log("Last node in the parent's childNodes list");
} else if (someNode.previousSibling === null) {
console.log("first node in the parents's childNodes list");
}

//迭代元素的每一个特性
function outputAttribute(element) {
var pairs = [];
for (var i = 0, len = element.attributes.length; i < len; i++) {
var attrName = element.attributes[i].nodeName;
var attrValue = element.attributes[i].nodeValue;
//ie7及更早的版本会返回HTML元素中所有可能的特性
//每个通过setAttribute()方法设置了的特性的specified属性斗会返回true
if(element.attributes[i].specified){
pairs.push(attrName + "=\"" + attrValue + "\"");
}
}
return pairs.join(" ");
}

/**
* 操作DOM
* parentObj.appendChild(newNode)
* parentObj.insertBefore(newNode,targetNode)
* parentObj.replaceChild(newNode,targetNode)
* parentObj.removeChild(targetNode)
* somdeNode.cloneNode([true]); //true为深复制
* normalize() //处理文档书中的文本节点，规范化文本节点
*
* childNodes属性
* firstChild
* lastChild
* ParentNode
* previousSibling
* nextSibling
*
* 查找元素
* document.getELementById()
* document.getElementsByTagName()
*
* 操作特性
* getAttribute()
* setAttribute()
* removeAttribute()
*
*添加
* document.createElement()
* document.createTextNode()
* document.createAttribute()
*
* 分割文本节点
* soneNode.firstChild[lastChild].spliteText(index)
*
*
*/

//使用文档片段，避免浏览器反复渲染
var fragment=document.createDocumentFragment();
var ul=document.getElementById("myList");
var li=null;
for(var i=0;i<3;i++){
li=document.createElement("li");
li.appendChild(document.createTextNode("item"+(i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);

//检测浏览器呈现模式
if(document.compatMode=="CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}

//点击链接滚动到某个元素视图
var links=document.getElementsByTagName("a");
var divs=document.getElementsByTagName("div");
for(var i= 0,len=links.length;i<len;i++){
links[i].index=i;
links[i].onclick=function(event){
divs[this.index].scrollIntoView(true); //scrollIntoViewIfNeeded()
event.preventDefault();
};
}

//跨浏览器一个元素是否包含另一个元素
function contains(refNode,otherNode){
if(typeof refNode.contains=="function" && (!client.engine.webkit || client.engine.webkit>=522)){
//for standard
return refNode.contains(otherNode);
} else if (typeof refNode.compareDocumentPosition=="function"){
return !!(refNode.compareDocumentPosition(otherNode)&16);
} else {
var node=otherNode.parentNode;
do {
if(node===refNode){
return true;
} else {
node=node.parentNode;
}
} while(node!==null);
return false;
}
}

//跨浏览器实现获取文本和设置文本属性
function getInnerText(element){
return (typeof element.textContent=="string")?element.textContent:element.innerText;
}
function setInnerText(element,text){
if(typeof element.textContent=="string"){
element.textContent=text;
} else {
element.innerText=text;
}
}

2、encodeURL、decodeURL和encodeURLComponent、decodeURLComponent

encodeURI和encodeURIComponent区别

encodeURI()不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号和井字号；而encodeURIComponent()则会对它发现的任何非标准字符进行编码。

适用场景：

1. encodeURI：适用于url跳转时。
2. encodeURIComponent：适用于url作为参数传递时。
3. 注意：当url作为参数传递时如果没有用encodeURIComponent进行编码，往往会造成传递时url中的特殊字符丢失。

3、Object

1、Object.is()、 ===、 ==三者之前的区别

     Object.is()（不会做类型转换）满足以下几点都是相等的：

      1）、两个值都是null、undefined、true，false

      2）、两个值都是由相同个数的字符串按照相同的顺序组成的字符串

      3）、两个值都指向同一个对象

      4）、两个值都是数字，并且相等（+0和-0不相等，NaN和NaN是相等的）

       

console.log(Object.is(-0, +0), Object.is(NaN, NaN));   // false true

     ===（不会进行类型转换）两个值是否是否相等的判断条件：

      值相等，并且类型也相同 

console.log(+0 === -0, NaN === NaN);   // true false

     ==比较两个值是否相等的判断条件：

console.log(null == undefined);  // ECMAScript认为undefined是从null派生出来的

 4、isNaN 和 Number.isNaN()之间的区别

     isNaN判断过程：如果传入的参数不是数值类型。首先将传入的参数转为数值类型，然后再进行是否为NaN判断，

代码实现isNaN：

isNaN || function(value){ 
    var txtValue = Number(value); //应该使用Number去转换
    //因为 parseInt(true) 返回的值是NaN
    return txtValue !== txtValue;   //当为true就表示该值为NaN，因为 NaN !== NaN
}   

isNaN(NaN) // true
isNaN(true) // false
isNaN('aaa') // true
isNaN(null) // false
isNaN('') // false
isNaN(undefined) // true

Number.isNaN()方法判断过程：首先判断传入的参数是否为数值类型，如果判断为true再使用isNaN方法进行判断，当判断为为false时，直接返回false。

Nmuber.isNaN = Number.isNaN || function(value){
    return typeof value === 'number' && isNaN(value);
}

Number.isNaN(true) // false
Number.isNaN('') // false
Number.isNaN(null) // false
Number.isNaN(NaN) // true;
Number.isNaN(123) // false
Number.isNaN('aaa') // false

Number.isNaN()方法和isNaN()的不同点是，Number.isNaN()不会将传入的非数值类型进行强制转换为数值类型，而是首先判断传入的参数是否为数值类型，只要是非数值类型就直接返回false,

5、Number() 和 parseInt()之间的区别

Number('1234'); // 1234

parseInt('1234'); // 1234

// 但是当字符串中有非数字，返回结果就不通了
Number('1234aa'); // NaN

parseInt('1234aa'); // 1234

Number返回结果：当传入参数包含非数字字符时，返回NaN

parseInt()返回结果：当传入参数包含非数字字符时，返回第一个非数字字符之前的数字。