JavaScript常用API合集匯總

節點

節點屬性
Node.nodeName   //返回節點名稱，只讀
Node.nodeType   //返回節點類型的常數值，只讀
Node.nodeValue  //返回Text或Comment節點的文本值，只讀
Node.textContent  //返回當前節點和它的所有后代節點的文本內容，可讀寫
Node.baseURI    //返回當前網頁的絕對路徑

Node.ownerDocument  //返回當前節點所在的頂層文檔對象，即document
Node.nextSibling  //返回緊跟在當前節點后面的第一個兄弟節點
Node.previousSibling  //返回當前節點前面的、距離最近的一個兄弟節點
Node.parentNode   //返回當前節點的父節點
Node.parentElement  //返回當前節點的父Element節點
Node.childNodes   //返回當前節點的所有子節點
Node.firstChild  //返回當前節點的第一個子節點
Node.lastChild   //返回當前節點的最后一個子節點

//parentNode接口
Node.children  //返回指定節點的所有Element子節點
Node.firstElementChild  //返回當前節點的第一個Element子節點
Node.lastElementChild   //返回當前節點的最后一個Element子節點
Node.childElementCount  //返回當前節點所有Element子節點的數目。
節點操作
Node.appendChild(node)   //向節點添加最后一個子節點
Node.hasChildNodes()   //返回布爾值，表示當前節點是否有子節點
Node.cloneNode(true);  // 默認為false(克隆節點), true(克隆節點及其屬性，以及后代)
Node.insertBefore(newNode,oldNode)  // 在指定子節點之前插入新的子節點
Node.removeChild(node)   //刪除節點，在要刪除節點的父節點上操作
Node.replaceChild(newChild,oldChild)  //替換節點
Node.contains(node)  //返回一個布爾值，表示參數節點是否為當前節點的后代節點。
Node.compareDocumentPosition(node)   //返回一個7個比特位的二進制值，表示參數節點和當前節點的關系
Node.isEqualNode(noe)  //返回布爾值，用于檢查兩個節點是否相等。所謂相等的節點，指的是兩個節點的類型相同、屬性相同、子節點相同。
Node.normalize()   //用于清理當前節點內部的所有Text節點。它會去除空的文本節點，并且將毗鄰的文本節點合并成一個。

//ChildNode接口
Node.remove()  //用于刪除當前節點
Node.before()  
Node.after()
Node.replaceWith() //用提供的內容替換集合中所有匹配的元素并且返回被刪除元素的集合

Document節點

Document節點的屬性
document.doctype   //返回當前文檔關聯的文檔類型定義(DTD).
document.documentElement  //返回當前文檔的根節點
document.defaultView   //返回document對象所在的window對象
document.body   //返回當前文檔的<body>節點
document.head   //返回當前文檔的<head>節點
document.activeElement  //返回當前文檔中獲得焦點的那個元素。

//節點集合屬性
document.links  //返回當前文檔的所有a元素
document.forms  //返回頁面中所有表單元素
document.images  //返回頁面中所有圖片元素
document.embeds  //返回網頁中所有嵌入對象
document.scripts  //返回當前文檔的所有腳本
document.styleSheets  //返回當前網頁的所有樣式表

//文檔信息屬性
document.documentURI  //表示當前文檔的網址
document.URL  //返回當前文檔的網址
document.domain  //返回當前文檔的域名
document.lastModified  //返回當前文檔最后修改的時間戳
document.location  //返回location對象，提供當前文檔的URL信息
document.referrer  //返回當前文檔的訪問來源
document.title    //返回當前文檔的標題
document.characterSet //返回渲染當前文檔的字符集，比如UTF-8、ISO-8859-1。
document.readyState  //返回當前文檔的狀態
document.designMode  //控制當前文檔是否可編輯，可讀寫
document.compatMode  //返回瀏覽器處理文檔的模式
document.cookie   //用來操作Cookie

Element節點的方法

位置方法
getBoundingClientRect()  
// getBoundingClientRect返回一個對象，包含top,left,right,bottom,width,height // width、height 元素自身寬高
// top 元素上外邊界距窗口最上面的距離
// right 元素右外邊界距窗口最上面的距離
// bottom 元素下外邊界距窗口最上面的距離
// left 元素左外邊界距窗口最上面的距離
// width 元素自身寬(包含border,padding) 
// height 元素自身高(包含border,padding) 

getClientRects()   //返回當前元素在頁面上形參的所有矩形。

// 元素在頁面上的偏移量  
var rect = el.getBoundingClientRect()  
return {   
  top: rect.top + document.body.scrollTop,   
  left: rect.left + document.body.scrollLeft  
}
屬性方法
Element.getAttribute()：讀取指定屬性  
Element.setAttribute()：設置指定屬性  
Element.hasAttribute()：返回一個布爾值，表示當前元素節點是否有指定的屬性  
Element.removeAttribute()：移除指定屬性
查找方法
Element.querySelector()  
Element.querySelectorAll()  
Element.getElementsByTagName()  
Element.getElementsByClassName()
事件方法
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)   
  }  
});
其他
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操作

類名操作
//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
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屬性
操作非內聯樣式
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName] 
window.getComputedStyle(el,null).getPropertyValue(attrName)
//偽類
window.getComputedStyle(el,':after')[attrName]

對象

Object對象
// 生成實例對象
var o = new Object()
// 屬性
Object.prototype   //返回原型對象
// 方法
Object.keys(o)   //遍歷對象的可枚舉屬性
Object.getOwnPropertyName(o)   //遍歷對象不可枚舉的屬性
// 對象實例的方法
valueOf()：返回當前對象對應的值。
toString()：返回當前對象對應的字符串形式。
toLocaleString()：返回當前對象對應的本地字符串形式。
hasOwnProperty()：判斷某個屬性是否為當前對象自身的屬性，還是繼承自原型對象的屬性。
isPrototypeOf()：判斷當前對象是否為另一個對象的原型。
propertyIsEnumerable()：判斷某個屬性是否可枚舉。
Array對象
// 生成實例對象
var a = new Array()
//屬性
a.length  //長度
Array.isArray(a)   //用來判斷一個值是否為數組
Array實例的方法
a.valueof()   //返回數組本身
a.toString()  //返回數組的字符串形式
a.push(value,vlaue....)   //用于在數組的末端添加一個或多個元素，并返回添加新元素后的數組長度。
pop()   //用于刪除數組的最后一個元素，并返回該元素
join()  //以參數作為分隔符，將所有數組成員組成一個字符串返回。如果不提供參數，默認用逗號分隔。
concat()  //用于多個數組的合并。它將新數組的成員，添加到原數組的尾部，然后返回一個新數組，原數組不變。
shift()  //用于刪除數組的第一個元素，并返回該元素。
unshift(value)  //用于在數組的第一個位置添加元素，并返回添加新元素后的數組長度。
reverse()   //用于顛倒數組中元素的順序，返回改變后的數組
slice(start_index, upto_index);   //用于提取原數組的一部分，返回一個新數組，原數組不變。第一個參數為起始位置（從0開始），第二個參數為終止位置（但該位置的元素本身不包括在內）。如果省略第二個參數，則一直返回到原數組的最后一個成員。負數表示倒數第幾個。
splice(index, count_to_remove, addElement1, addElement2, ...);   //用于刪除原數組的一部分成員，并可以在被刪除的位置添加入新的數組成員，返回值是被刪除的元素。第一個參數是刪除的起始位置，第二個參數是被刪除的元素個數。如果后面還有更多的參數，則表示這些就是要被插入數組的新元素。
sort()   //對數組成員進行排序，默認是按照字典順序排序。排序后，原數組將被改變。如果想讓sort方法按照自定義方式排序，可以傳入一個函數作為參數，表示按照自定義方法進行排序。該函數本身又接受兩個參數，表示進行比較的兩個元素。如果返回值大于0，表示第一個元素排在第二個元素后面；其他情況下，都是第一個元素排在第二個元素前面。
map()   //對數組的所有成員依次調用一個函數，根據函數結果返回一個新數組。
map(elem,index,arr)   //map方法接受一個函數作為參數。該函數調用時，map方法會將其傳入三個參數，分別是當前成員、當前位置和數組本身。
forEach()   //遍歷數組的所有成員，執行某種操作,參數是一個函數。它接受三個參數，分別是當前位置的值、當前位置的編號和整個數組。
filter()   //參數是一個函數，所有數組成員依次執行該函數，返回結果為true的成員組成一個新數組返回。該方法不會改變原數組。
some()    //用來判斷數組成員是否符合某種條件。接受一個函數作為參數，所有數組成員依次執行該函數，返回一個布爾值。該函數接受三個參數，依次是當前位置的成員、當前位置的序號和整個數組。只要有一個數組成員的返回值是true，則整個some方法的返回值就是true，否則false。
every()   //用來判斷數組成員是否符合某種條件。接受一個函數作為參數，所有數組成員依次執行該函數，返回一個布爾值。該函數接受三個參數，依次是當前位置的成員、當前位置的序號和整個數組。所有數組成員的返回值都是true，才返回true，否則false。
reduce()   //依次處理數組的每個成員，最終累計為一個值。從左到右處理（從第一個成員到最后一個成員）
reduceRight()  //依次處理數組的每個成員，最終累計為一個值。從右到左（從最后一個成員到第一個成員）
indexOf(s)   //返回給定元素在數組中第一次出現的位置，如果沒有出現則返回-1。可以接受第二個參數，表示搜索的開始位置
lastIndexOf()  //返回給定元素在數組中最后一次出現的位置，如果沒有出現則返回-1。

Number對象

var n = new 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
Number對象實例的方法
toString()   //用來將一個數值轉為字符串形式.可以接受一個參數，表示輸出的進制。如果省略這個參數，默認將數值先轉為十進制，再輸出字符串；否則，就根據參數指定的進制，將一個數字轉化成某個進制的字符串。
toFixed()   //用于將一個數轉為指定位數的小數，返回這個小數對應的字符串。
toExponential()  //用于將一個數轉為科學計數法形式。可傳入一個參數，參數表示小數點后有效數字的位數，范圍為0到20，超出這個范圍，會拋出一個RangeError。
toPrecision()  //用于將一個數轉為指定位數的有效數字。

String 對象

生成實例對象
var s = new String()
s.length   //返回字符串的長度
方法
s.chatAt(index)   //返回指定位置的字符
s.fromCharCode()    //該方法的參數是一系列Unicode碼點，返回對應的字符串。
s.charCodeAt(index)    //返回給定位置字符的Unicode碼點（十進制表示）
s.concat(s2)  //用于連接兩個字符串
s.slice(start,end)   //用于從原字符串取出子字符串并返回，不改變原字符串。第一個參數是子字符串的開始位置，第二個參數是子字符串的結束位置（不含該位置）。如果參數是負值，表示從結尾開始倒數計算的位置，即該負值加上字符串長度。
s.substring(start,end)  //用于從原字符串取出子字符串并返回，不改變原字符串.第一個參數表示子字符串的開始位置，第二個位置表示結束位置。
s.substr(start,length)   //用于從原字符串取出子字符串并返回，不改變原字符串。第一個參數是子字符串的開始位置，第二個參數是子字符串的長度。如果第一個參數是負數，表示倒數計算的字符位置。如果第二個參數是負數，將被自動轉為0，因此會返回空字符串。
s.indexOf(s)   //返回給定元素在字符串中第一次出現的位置，如果沒有出現則返回-1。可以接受第二個參數，表示搜索的開始位置 
s.lastIndexOf()  //返回給定元素在字符串中最后一次出現的位置，如果沒有出現則返回-1。
s.trim()  //用于去除字符串兩端的空格，返回一個新字符串
s.toLowerCase()  //用于將一個字符串全部轉為小寫,返回一個新字符串，不改變原字符串。
s.toUpperCase()  //全部轉為大寫
s.localeCompare(s2)  //用于比較兩個字符串。它返回一個整數，如果小于0，表示第一個字符串小于第二個字符串；如果等于0，表示兩者相等；如果大于0，表示第一個字符串大于第二個字符串。
s.match(regexp)   //用于確定原字符串是否匹配某個子字符串，返回一個數組，成員為匹配的第一個字符串。如果沒有找到匹配，則返回null。
s.search()  //返回值為匹配的第一個位置。如果沒有找到匹配，則返回-1。
s.replace(oldValue,newValue)  //用于替換匹配的子字符串，一般情況下只替換第一個匹配（除非使用帶有g修飾符的正則表達式）。
s.split()  //按照給定規則分割字符串，返回一個由分割出來的子字符串組成的數組。還可傳入第二個參數，決定了返回數組的成員數。

Math對象

// 屬性
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的平方根。
// 數學方法
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。
//三角函數方法
Math.sin()：返回參數的正弦  
Math.cos()：返回參數的余弦  
Math.tan()：返回參數的正切  
Math.asin()：返回參數的反正弦（弧度值）  
Math.acos()：返回參數的反余弦（弧度值）  
Math.atan()：返回參數的反正切（弧度值）

JSON對象

JSON.stringify()   
//用于將一個值轉為字符串。該字符串應該符合JSON格式，并且可以被JSON.parse方法還原。
//（JSON.stringify(obj, selectedProperties)）還可以接受一個數組，作為第二個參數，指定需要轉成字符串的屬性。
//還可以接受第三個參數，用于增加返回的JSON字符串的可讀性。如果是數字，表示每個屬性前面添加的空格（最多不超過10個）；如果是字符串（不超過10個字符），則該字符串會添加在每行前面。

JSON.parse()   //用于將JSON字符串轉化成對象。

console對象

console.log(text,text2,...)   //用于在console窗口輸出信息。它可以接受多個參數，將它們的結果連接起來輸出。如果第一個參數是格式字符串（使用了格式占位符），console.log方法將依次用后面的參數替換占位符，然后再進行輸出。
console.info()   //在console窗口輸出信息，同時，會在輸出信息的前面，加上一個藍色圖標。
console.debug()  //在console窗口輸出信息，同時，會在輸出信息的前面，加上一個藍色圖標。
console.warn()  //輸出信息時，在最前面加一個黃色三角，表示警告；
console.error()  //輸出信息時，在最前面加一個紅色的叉，表示出錯，同時會顯示錯誤發生的堆棧
console.table()  //可以將復合類型的數據轉為表格顯示。
console.count()  //用于計數，輸出它被調用了多少次。
console.dir()    //用來對一個對象進行檢查（inspect），并以易于閱讀和打印的格式顯示。
console.dirxml()  //用于以目錄樹的形式，顯示DOM節點。
console.assert()  //接受兩個參數，第一個參數是表達式，第二個參數是字符串。只有當第一個參數為false，才會輸出第二個參數，否則不會有任何結果。

//這兩個方法用于計時，可以算出一個操作所花費的準確時間。
console.time()
console.timeEnd()
//time方法表示計時開始，timeEnd方法表示計時結束。它們的參數是計時器的名稱。調用timeEnd方法之后，console窗口會顯示“計時器名稱: 所耗費的時間”。

console.profile()  //用來新建一個性能測試器（profile），它的參數是性能測試器的名字。
console.profileEnd()  //用來結束正在運行的性能測試器。

console.group()
console.groupend()
//上面這兩個方法用于將顯示的信息分組。它只在輸出大量信息時有用，分在一組的信息，可以用鼠標折疊/展開。
console.groupCollapsed()  //用于將顯示的信息分組，該組的內容，在第一次顯示時是收起的（collapsed），而不是展開的。

console.trace()  //顯示當前執行的代碼在堆棧中的調用路徑。
console.clear()  //用于清除當前控制臺的所有輸出，將光標回置到第一行。
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,443評論 6贊 532
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,530評論 3贊 416
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,407評論 0贊 375
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,981評論 1贊 312
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,759評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,204評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,263評論 3贊 441
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,415評論 0贊 288
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,955評論 1贊 336
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,528評論 5贊 359
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,222評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,650評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,892評論 1贊 286
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,675評論 3贊 392
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,967評論 2贊 374