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

時間 2019-11-29

原文原文鏈接

節點屬性

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。