一、節點
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。
複製程式碼（3）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() //用於清除當前控制檯的所有輸出，將游標回置到第一行
複製程式碼本文僅作為學習備忘錄