常用API合集 · JavaScript半知半解

## 常用API合集 **一、節點** **1.1 節點屬性** ``` 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子節點的數目。 ``` **1.2 操作** ``` 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() ``` **1.3 Document節點** **1.3.1 Document節點的屬性** ``` document.doctype // 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 ``` **1.3.2 Document節點的方法** **（1）讀寫方法** ``` document.open() //用于新建并打開一個文檔 document.close() //不安比open方法所新建的文檔 document.write() //用于向當前文檔寫入內容 document.writeIn() //用于向當前文檔寫入內容，尾部添加換行符。 ``` **（2）查找節點** ``` document.querySelector(selectors) //接受一個CSS選擇器作為參數，返回第一個匹配該選擇器的元素節點。 document.querySelectorAll(selectors) //接受一個CSS選擇器作為參數，返回所有匹配該選擇器的元素節點。 document.getElementsByTagName(tagName) //返回所有指定HTML標簽的元素 document.getElementsByClassName(className) //返回包括了所有class名字符合指定條件的元素 document.getElementsByName(name) //用于選擇擁有name屬性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等） document.getElementById(id) //返回匹配指定id屬性的元素節點。 document.elementFromPoint(x,y) //返回位于頁面指定位置最上層的Element子節點。 ``` **（3）生成節點** ``` document.createElement(tagName) //用來生成HTML元素節點。 document.createTextNode(text) //用來生成文本節點 document.createAttribute(name) //生成一個新的屬性對象節點，并返回它。 document.createDocumentFragment() //生成一個DocumentFragment對象 ``` **（4）事件方法** ``` document.createEvent(type) //生成一個事件對象，該對象能被element.dispatchEvent()方法使用 document.addEventListener(type,listener,capture) //注冊事件 document.removeEventListener(type,listener,capture) //注銷事件 document.dispatchEvent(event) //觸發事件 ``` **（5）其他** ``` document.hasFocus() //返回一個布爾值，表示當前文檔之中是否有元素被激活或獲得焦點。 document.adoptNode(externalNode) //將某個節點，從其原來所在的文檔移除，插入當前文檔，并返回插入后的新節點。 document.importNode(externalNode, deep) //從外部文檔拷貝指定節點，插入當前文檔。 ``` **1.4 Element節點** **1.4.1 Element節點的屬性** **（1）特性屬性** ``` Element.attributes //返回當前元素節點的所有屬性節點 Element.id //返回指定元素的id屬性，可讀寫 Element.tagName //返回指定元素的大寫標簽名 Element.innerHTML //返回該元素包含的HTML代碼，可讀寫 Element.outerHTML //返回指定元素節點的所有HTML代碼，包括它自身和包含的的所有子元素，可讀寫 Element.className //返回當前元素的class屬性，可讀寫 Element.classList //返回當前元素節點的所有class集合 Element.dataset //返回元素節點中所有的data-*屬性。 ``` **（2）尺寸屬性** ``` Element.clientHeight //返回元素節點可見部分的高度 Element.clientWidth //返回元素節點可見部分的寬度 Element.clientLeft //返回元素節點左邊框的寬度 Element.clientTop //返回元素節點頂部邊框的寬度 Element.scrollHeight //返回元素節點的總高度 Element.scrollWidth //返回元素節點的總寬度 Element.scrollLeft //返回元素節點的水平滾動條向右滾動的像素數值,通過設置這個屬性可以改變元素的滾動位置 Element.scrollTop //返回元素節點的垂直滾動向下滾動的像素數值 Element.offsetHeight //返回元素的垂直高度(包含border,padding) Element.offsetWidth //返回元素的水平寬度(包含border,padding) Element.offsetLeft //返回當前元素左上角相對于Element.offsetParent節點的垂直偏移 Element.offsetTop //返回水平位移 Element.style //返回元素節點的行內樣式 ``` **（3）節點相關屬性** ``` Element.children //包括當前元素節點的所有子元素 Element.childElementCount //返回當前元素節點包含的子HTML元素節點的個數 Element.firstElementChild //返回當前節點的第一個Element子節點 Element.lastElementChild //返回當前節點的最后一個Element子節點 Element.nextElementSibling //返回當前元素節點的下一個兄弟HTML元素節點 Element.previousElementSibling //返回當前元素節點的前一個兄弟HTML節點 Element.offsetParent //返回當前元素節點的最靠近的、并且CSS的position屬性不等于static的父元素。 ``` **1.4.2 Element節點的方法** **（1）位置方法** ``` 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 } ``` **（2）屬性方法** ``` Element.getAttribute()：讀取指定屬性 Element.setAttribute()：設置指定屬性 Element.hasAttribute()：返回一個布爾值，表示當前元素節點是否有指定的屬性 Element.removeAttribute()：移除指定屬性 ``` **（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屬性操作非內聯樣式 //ie8 element.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實例的方法** ``` 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。 ``` **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）方法** ``` 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() //按照給定規則分割字符串，返回一個由分割出來的子字符串組成的數組。還可傳入第二個參數，決定了返回數組的成員數。 ``` **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）方法** ``` 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() //用于清除當前控制臺的所有輸出，將光標回置到第一行。 ```