原生JS中DOM節點相關API合集

時間 2019-11-10

原文原文鏈接

原生JS中DOM節點相關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   //
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-八、ISO-8859-1。
document.readyState  //返回當前文檔的狀態
document.designMode  //控制當前文檔是否可編輯，可讀寫
document.compatMode  //返回瀏覽器處理文檔的模式
document.cookie   //用來操做Cookie

Document節點的方法

讀寫方法

document.open()   //用於新建並打開一個文檔
document.close()   //不安比open方法所新建的文檔
document.write()   //用於向當前文檔寫入內容
document.writeIn()  //用於向當前文檔寫入內容，尾部添加換行符。

查找節點

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子節點。

生成節點

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)  //觸發事件

其餘

document.hasFocus()   //返回一個布爾值，表示當前文檔之中是否有元素被激活或得到焦點。
document.adoptNode(externalNode)  //將某個節點，從其原來所在的文檔移除，插入當前文檔，並返回插入後的新節點。
document.importNode(externalNode, deep)   //從外部文檔拷貝指定節點，插入當前文檔。

Element節點

Element節點的屬性

特性屬性

Element.attributes  //返回當前元素節點的全部屬性節點
Element.id  //返回指定元素的id屬性，可讀寫
Element.tagName  //返回指定元素的大寫標籤名
Element.innerHTML   //返回該元素包含的HTML代碼，可讀寫
Element.outerHTML  //返回指定元素節點的全部HTML代碼，包括它自身和包含的的全部子元素，可讀寫
Element.className  //返回當前元素的class屬性，可讀寫
Element.classList  //返回當前元素節點的全部class集合
Element.dataset   //返回元素節點中全部的data-*屬性。

尺寸屬性

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  //返回元素節點的行內樣式

節點相關屬性

Element.children   //包括當前元素節點的全部子元素
Element.childElementCount   //返回當前元素節點包含的子HTML元素節點的個數
Element.firstElementChild  //返回當前節點的第一個Element子節點  
Element.lastElementChild   //返回當前節點的最後一個Element子節點  
Element.nextElementSibling  //返回當前元素節點的下一個兄弟HTML元素節點
Element.previousElementSibling  //返回當前元素節點的前一個兄弟HTML節點
Element.offsetParent   //返回當前元素節點的最靠近的、而且CSS的position屬性不等於static的父元素。

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()   //用於將當前頁面的焦點，轉移到指定元素上

?GitHubjavascript

?我的網站html