JavaScript Common API

first, the node

1.1 Node Properties

1.2 Operation

1.3 Document Node

1.3.1 Attributes of the document node

Methods for 1.3.2 Document nodes

(1) Reading and Writing methods

(2) Finding nodes

(3) Build Node

(4) Event Method

(5) Other

1.4 element Node

1.4.1 attributes of the element node

(1) Attribute Properties

(2) Dimension Properties

(3) node-related Properties

Method of 1.4.2 Element node

(1) Location method

(2) Attribute Method ·

(3) Search Method

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

(4) Event Method

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

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


 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) Other

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

//解析HTML字符串，然后将生成的节点插入DOM树的指定位置。
Element.insertAdjacentHTML(where, htmlString); Element.insertAdjacentHTML(‘beforeBegin‘, htmlString); // 在该元素前插入  


Element.insertAdjacentHTML(‘afterEnd‘, htmlString); // 在该元素后插入
Element.remove()  //用于将当前元素节点从DOM中移除
Element.focus()   //用于将当前页面的焦点，转移到指定元素上

second, CSS Operation

(1) Class name operation

//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‘),‘‘);}

element.classList.add(className)  //新增
element.classList.remove(className)  //删除
element.classList.contains(className)  //是否包含
element.classList.toggle(className)  //toggle class

(2) style operation

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]

third, the Object

3.1 Object Objects

(1) generating an Instance object

var o = new Object()

(2) Properties

Object.prototype   //返回原型对象

(3) method

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

Methods for object instances

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

3.2 Array Object

(1) generating an Instance object

var a = new Array()

(2) Properties

a.length  //长度

(3) Array.isarray ()

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

(4) method of an array instance

3.3 Number Object

(1) Generating Objects

var n = new Number()

(2) the property of the Number object

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) method of Number object instance

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

3.4 String Object

(1) generating an Instance object

var s = new String()

(2) properties of a String object

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

(3) method

3.5 Math Object

(1) Properties

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) Mathematical Methods

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) Trigonometric Method

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

3.6 JSON Object

(1) method

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

3.7 Console Object

(1) method

JavaScript Common API