JavaScript常用API合集彙總（一）
阿新 • • 發佈：2020-07-02
今天這篇文章跟大家分享一些JavaScript常用的API程式碼，內容太多，該篇只分享DOM操作。
下篇分享：CSS操作、物件（Object物件、Array物件、Number物件、String物件、Math物件、JSON物件和Console物件）操作，值得收藏。
JavaScript常用API合集彙總（二）https://www.cnblogs.com/caoru/p/13225244.html
一、節點
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() //用於將當前頁面的焦點，轉移到指定元素上
&n