JavaScript常用API

Posted 2020-09-04 少帅府

一、节点

1.1 节点属性

 

1.2 操作

 

1.3 Document节点

1.3.1 Document节点的属性

1.3.2 Document节点的方法

（1）读写方法

（2）查找节点

 

（3）生成节点

（4）事件方法

（5）其他

1.4 Element节点

1.4.1 Element节点的属性

（1）特性属性

 

（2）尺寸属性

（3）节点相关属性

 

1.4.2 Element节点的方法

（1）位置方法

（2）属性方法·

（3）查找方法

Element.querySelector()  
Element.querySelectorAll()  
Element.getElementsByTagName()  
Element.getElementsByClassName()

（4）事件方法

Element.addEventListener()：添加事件的回调函数  
Element.removeEventListener()：移除事件监听函数  
Element.dispatchEvent()：触发事件

//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)

// event对象 
 var event = window.event||event;    // 事件的目标节点  
 var target = event.target || event.srcElement;
 
// 事件代理  
 ul.addEventListener(\'click\', function(event) {   
  if (event.target.tagName.toLowerCase() === \'li\') {   
    console.log(event.target.innerhtml)   
  }  });

（5）其他

Element.scrollIntoView()   //滚动当前元素，进入浏览器的可见区域

//解析HTML字符串，然后将生成的节点插入DOM树的指定位置。
Element.insertAdjacentHTML(where, htmlString); 
Element.insertAdjacentHTML(\'beforeBegin\', htmlString); // 在该元素前插入  
Element.insertAdjacentHTML(\'afterBegin\', htmlString); // 在该元素第一个子元素前插入 
Element.insertAdjacentHTML(\'beforeEnd\', htmlString); // 在该元素最后一个子元素后面插入 
Element.insertAdjacentHTML(\'afterEnd\', htmlString); // 在该元素后插入
Element.remove()  //用于将当前元素节点从DOM中移除
Element.focus()   //用于将当前页面的焦点，转移到指定元素上

二、CSS操作

（1）类名操作

//ie8以下
Element.className  //获取元素节点的类名
Element.className += \' \' + newClassName  //新增一个类名

//判断是否有某个类名
function hasClass(element,className){  return new RegExp(className,\'gi\').test(element.className);
}

//移除class
function removeClass(element,className){
  element.className = element.className.replace(new RegExp(\'(^|\\\\b)\' + className.split(\' \').join(\'|\') + \'(\\\\b|$)\', \'gi\'),\'\');
}
//ie10 
element.classList.add(className)  //新增
element.classList.remove(className)  //删除
element.classList.contains(className)  //是否包含
element.classList.toggle(className)  //toggle class

（2）style操作

element.setAttribute(\'style\',\'\')

element.style.backgroundColor = \'red\'element.style.cssText //用来读写或删除整个style属性element.style.setProperty(propertyName,value)  //设置css属性element.style.getPropertyValue(property)  //获取css属性element.style.removeProperty(property)  //删除css属性操作非内联样式//ie8element.currentStyle[attrName]

//ie9+
window.getComputedStyle(el,null)[attrName] 
window.getComputedStyle(el,null).getPropertyValue(attrName)

//伪类
window.getComputedStyle(el,\':after\')[attrName]

三、对象

3.1 Object对象

（1）生成实例对象

var o = new Object()

（2）属性

Object.prototype   //返回原型对象

（3）方法

Object.keys(o)   //遍历对象的可枚举属性
Object.getOwnPropertyName(o)   //遍历对象不可枚举的属性

对象实例的方法

valueOf()：返回当前对象对应的值。  
toString()：返回当前对象对应的字符串形式。  
toLocaleString()：返回当前对象对应的本地字符串形式。  
hasOwnProperty()：判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性。 
isPrototypeOf()：判断当前对象是否为另一个对象的原型。propertyIsEnumerable()：判断某个属性是否可枚举。

3.2 Array对象

（1）生成实例对象

var a = new Array()

（2）属性

a.length  //长度

（3）Array.isArray()

Array.isArray(a)   //用来判断一个值是否为数组

（4）Array实例的方法

3.3 Number对象

（1）生成对象

var n = new Number()

（2）Number对象的属性

Number.POSITIVE_INFINITY：正的无限，指向Infinity。  
Number.NEGATIVE_INFINITY：负的无限，指向-Infinity。  
Number.NaN：表示非数值，指向NaN。  
Number.MAX_VALUE：表示最大的正数，相应的，最小的负数为-Number.MAX_VALUE。  
Number.MIN_VALUE：表示最小的正数（即最接近0的正数，在64位浮点数体系中为5e-324），相应的，最接近0的负数为-Number.MIN_VALUE。  
Number.MAX_SAFE_INTEGER：表示能够精确表示的最大整数，即9007199254740991。  
Number.MIN_SAFE_INTEGER：表示能够精确表示的最小整数，即-9007199254740991。

（4）Number对象实例的方法

toString()   //用来将一个数值转为字符串形式.可以接受一个参数，表示输出的进制。如果省略这个参数，默认将数值先转为十进制，再输出字符串；否则，就根据参数指定的进制，将一个数字转化成某个进制的字符串。
toFixed()   //用于将一个数转为指定位数的小数，返回这个小数对应的字符串。
toExponential()  //用于将一个数转为科学计数法形式。可传入一个参数，参数表示小数点后有效数字的位数，范围为0到20，超出这个范围，会抛出一个RangeError。
toPrecision()  //用于将一个数转为指定位数的有效数字。

3.4 String 对象

（1）生成实例对象

var s = new String()

（2）String对象的属性

s.length   //返回字符串的长度

（3）方法

3.5 Math对象

（1）属性

Math.E：常数e。  
Math.LN2：2的自然对数。  
Math.LN10：10的自然对数。  
Math.LOG2E：以2为底的e的对数。  
Math.LOG10E：以10为底的e的对数。  
Math.PI：常数Pi。  
Math.SQRT1_2：0.5的平方根。  
Math.SQRT2：2的平方根。

（2）数学方法

Math.abs()：返回参数的绝对值  
Math.ceil()：向上取整，接受一个参数，返回大于该参数的最小整数。 
Math.floor()：向下取整  
Math.max(n,n1,...)：可接受多个参数，返回最大值  
Math.min(n,n1,..)：可接受多个参数，返回最小值  
Math.pow(n,e)：指数运算, 返回以第一个参数为底数、第二个参数为幂的指数值。 
Math.sqrt()：返回参数值的平方根。如果参数是一个负值，则返回NaN。  
Math.log()：返回以e为底的自然对数值。Math.exp()：返回e的指数，也就是常数e的参数次方。Math.round()：四舍五入  
Math.random()：返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。

（3）三角函数方法

Math.sin()：返回参数的正弦  
Math.cos()：返回参数的余弦  
Math.tan()：返回参数的正切  
Math.asin()：返回参数的反正弦（弧度值）  
Math.acos()：返回参数的反余弦（弧度值）  
Math.atan()：返回参数的反正切（弧度值）

3.6 JSON对象

（1）方法

JSON.stringify()   
//用于将一个值转为字符串。该字符串应该符合JSON格式，并且可以被JSON.parse方法还原。
//（JSON.stringify(obj, selectedProperties)）还可以接受一个数组，作为第二个参数，指定需要转成字符串的属性。
//还可以接受第三个参数，用于增加返回的JSON字符串的可读性。如果是数字，表示每个属性前面添加的空格（最多不超过10个）；如果是字符串（不超过10个字符），则该字符串会添加在每行前面。
JSON.parse()   //用于将JSON字符串转化成对象。

3.7 console对象

（1）方法