JavaScript 複習之 Element 節點

DreamTruth發表於2019-03-02
JavaScript

Element節點物件對應網頁的 Html 元素。

一、例項屬性

1、元素特性的相關屬性

  • Element.id返回元素id屬性，屬性可讀寫。
  • Element.tagName返回元素的大寫標籤名，與nodeName屬性的值相等。
  • Element.dir用於讀寫當前元素的文字方向，從左到右（ltr），從右到左（rtl）
  • Element.accessKey用於讀寫分配給當前元素的快捷鍵。
  • Element.draggable返回一個布林值，表示當前元素是否可拖動，屬性可讀寫
  • Element.lang返回當前元素的語言設定，屬性可讀寫
  • Element.tabIndex返回一個整數，表示當前元素在 Tab 鍵遍歷時的順序，屬性可讀寫。
  • Element.title滑鼠懸浮時彈出的文字提示，可讀寫

2、元素狀態的相關屬性

  • Element.hidden返回一個布林值，表示當前元素的hidden屬性，可讀寫。與 CSS 設定相互獨立，優先順序低於 CSS 設定。
  • Element.contentEditable可設定屬性，使得元素是否可編輯，三個值true，false，inhert，屬性可讀寫， Element.isContentEditable返回一個布林值，屬性只讀。
  • Element.attributes返回當前元素節點的所有屬性節點類陣列物件。
  • Element.className用來讀寫元素的class屬性。
  • Element.classList返回元素節點的class屬性的類陣列物件。有以下方法：
    1. add()增加一個class
    2. remove()移除一個class
    3. contains()檢查是否包含某個class
    4. toggle()將某個class移入或移出當前元素。第二個引數為布林值，新增為true，移除為false。
    5. item()返回指定索引位置的class
    6. roString()將class列表轉化為字串
  • Element.dataset返回一個物件，讀取元素上data-屬性
  • Element.innerHTML用來設定某個節點的內容，可讀寫。
  • Element.outHTML返回一個當前元素節點所有 HTML 程式碼的字串。
  • Element.clientHeight返回一個整數值，表示元素系欸但的 CSS 高度（單位畫素），只對塊級元素生效，行內元素返回0。包括padding，不包括border、margin
  • Element.clientWidth返回節點的 CSS 寬度，塊級元素有效，行內元素返回0，包括padding,不包括border、margin。
// 視口高度
document.documentElement.clientHeight

// 網頁總高度
document.body.clientHeight
複製程式碼
  • Element.clientLeft等於元素節點左邊框的寬度，如果沒有設定左邊框，或者行內元素則返回0。
  • Element.clientTop元素頂部邊框的寬度，其他同上。
  • Element.scrollLetf表示當前元素的水平滾動條向右側滾動的畫素數量
  • Element.scrollTop元素垂直滾動條向下滾動的畫素數量。如果要檢視整張網頁的水平的和垂直的滾動距離，要從document.documentElement元素上讀取。
  • Element.offsetParent返回最靠近當前元素的，並且 CSS 的position屬性不等於static的上層元素。如果該元素是不可見的（display屬性為none），或者位置是固定的（position屬性為fixed），則offsetParent屬性返回null。
  • Element.offsetHeight返回元素 CSS 垂直高度（單位畫素），包括元素本身高度、padding和border，及水平滾動條的高度（如果存在）。屬性只讀
  • Element.offsetWidth元素 CSS 水平寬度，其他同上。屬性只讀
  • Element.offsetLeft元素左上角相對於Element.offsetParent節點的水平位移。
  • Element.offsetTop返回垂直位移。
  • Element.style用於樣式的操作
  • Element.children返回當前元素節點的所有子元素的類陣列物件。
  • Element.childElementCount返回當前元素節點包含的子元素節點的個數。
  • Element.firstElementChild返回當前元素的第一個子節點元素，Element.lastElementChild返回最後一個子節點元素。沒有返回null
  • Element.nextElementSibling返回元素節點後一個同級元素節點，Element.previousElementSibling返回元素節點的前一個同級元素節點。

例項方法

1、屬性相關方法

  • getAttribute()獲取某個屬性的值
  • getAttributeNames()返回元素所有的屬性名
  • setAttribute()寫入屬性值
  • hasAttribute()某個屬性是否存在
  • hasAttributes()元素是否有屬性
  • removeAttribute()刪除屬性

Element.querySelector()

接受 CSS 選擇器為引數，但是無法選中偽元素。返回父元素的第一個匹配的子元素。

Element.querySelectorAll()

接受 CSS 選擇器作為引數，返回一個NodeList例項，包含所有匹配的子元素。

Element.getElementsByClassName()

方法返回一個HTMLCollection例項，成員是當前元素節點的所有具有指定 class 的子元素節點。該方法與document.getElementsByClassName方法的用法類似，只是搜尋範圍不是整個文件，而是當前元素節點。

Element.getElementsByTagName()

返回一個HTMLCollection例項，成員是當前節點的所有匹配指定標籤名的子元素節點。該方法與document.getElementsByClassName方法的用法類似，只是搜尋範圍不是整個文件，而是當前元素節點。

Element.closest()

接受一個 CSS 選擇器作為引數，返回匹配選擇器的、最接近當前節點的一個祖先節點（包括當前節點本身）。沒有則返回null

// HTML 程式碼如下
// <article>
//   <div id="div-01">Here is div-01
//     <div id="div-02">Here is div-02
//       <div id="div-03">Here is div-03</div>
//     </div>
//   </div>
// </article>

var div03 = document.getElementById('div-03');

// div-03 最近的祖先節點
div03.closest("#div-02") // div-02
div03.closest("div div") // div-03
div03.closest("article > div") //div-01
div03.closest(":not(div)") // article
複製程式碼

Element.matches()

返回一個布林值，表示當前元素是否匹配給定的 CSS 選擇器。

事件相關方法

  • Element.addEventListener()新增事件的回撥函式
  • Element.removeEventListener移除事件監聽函式
  • Element.dispatchEvent觸發事件

Element.scrollInteView()

滾動當前元素，進入瀏覽器可見區域，類似於window.location.hash的效果。

該方法可以接受一個布林值作為引數。如果為true，表示元素的頂部與當前區域的可見部分的頂部對齊（前提是當前區域可滾動）；如果為false，表示元素的底部與當前區域的可見部分的尾部對齊（前提是當前區域可滾動）。如果沒有提供該引數，預設為true。

Element.getBoundingClientRect()

返回一個物件，提供當前元素節點的大小、位置等資訊，基本上就是 CSS 盒狀模型的所有資訊。

Element.getClientRects()

返回一個類似陣列的物件，裡面是當前元素在頁面上形成的所有矩形（所以方法名中的Rect用的是複數）。每個矩形都有bottom、height、left、right、top和width六個屬性，表示它們相對於視口的四個座標，以及本身的高度和寬度。

Element.insertAdjacentElement()

方法在相對於當前元素的指定位置，插入一個新的節點。該方法返回被插入的節點，如果插入失敗，返回null。

方法一共可以接受兩個引數，第一個引數是一個字串，表示插入的位置，第二個引數是將要插入的節點。第一個引數只可以取如下的值。

  • beforebegin：當前元素之前

  • afterbegin：當前元素內部的第一個子節點前面

  • beforeend：當前元素內部的最後一個子節點後面

  • afterend：當前元素之後

注意，beforebegin和afterend這兩個值，只在當前節點有父節點時才會生效。

Element.insertAdjacentHTML(),Element.insertAdjacentText()

Element.insertAdjacentHTML方法用於將一個 HTML 字串，解析生成 DOM 結構，插入相對於當前節點的指定位置。

Element.insertAdjacentText方法在相對於當前節點的指定位置，插入一個文字節點.

引數和Element.insertAdjacentElement()一樣。

Element.remove()

用於將當前元素節點從它的父節點移除。

Element.focus()，Element.blur()

Element.focus方法用於將當前頁面的焦點，轉移到指定元素上。

Element.blur方法用於將焦點從當前元素移除。

Element.click()

Element.click方法用於在當前元素上模擬一次滑鼠點選，相當於觸發了click事件。

相關文章