(88)Wangdao.com第二十一天_JavaScript 元素節點Element 節點

時間 2019-11-08

標籤 wangdao.com wangdao com 第二十一天 1天 javascript 元素節點 element 欄目 JavaScript 简体版

原文原文鏈接

Element 節點（元素節點）node

是一組對象數組

對應網頁的 HTML 元素瀏覽器

每個 HTML 元素，在 DOM 樹上都會轉化成一個 Element 節點對象（如下簡稱元素節點）安全

全部元素節點的 nodeType 屬性都是 1函數

瀏覽器使用不一樣的構造函數，生成不一樣的元素節點，有各自構造函數的屬性和方法spa

<a> 元素的節點對象由 HTMLAnchorElement 構造函數生成
<button> 元素的節點對象由 HTMLButtonElement 構造函數生成

元素特性的相關屬性
- Element.id
  - - 指定元素的id屬性，該屬性可讀寫，

- Element.tagName
  - - 指定元素的大寫標籤名，大小寫敏感

- Element.dir
  - - 用於讀寫當前元素的文字方向 ltr 或者 rtl

- Element.accessKey
  - 用於讀寫分配給當前元素的快捷鍵
  - ```
  // HTML 代碼以下
  // <button accesskey="h" id="btn">點擊</button>
  var btn = document.getElementById('btn');
  btn.accessKey     // "h"
```
  上面代碼中，btn元素的快捷鍵是h，按下 Alt + h 就能將焦點轉移到它上面code

- Element.draggable
  - 返回一個布爾值，表示當前元素是否可拖動。該屬性可讀寫

- Element.lang
  - 返回當前元素的語言設置。該屬性可讀寫

- Element.tabIndex
  - 返回一個整數，表示當前元素在 Tab 鍵遍歷時的順序。該屬性可讀寫。
    - 若是是負值（一般是-1），則 Tab 鍵不會遍歷到該元素。
    - 若是是正整數，則按照順序，從小到大遍歷。
    - 若是兩個元素的 tabIndex 屬性的正整數值相同，則按照出現的順序遍歷。
  - 遍歷完全部 tabIndex 爲正整數的元素之後，再遍歷全部 tabIndex 等於0、或者屬性值是非法值、或者沒有 tabIndex 屬性的元素，順序爲它們在網頁中出現的順序

- Element.title
  - 用來讀寫當前元素的 HTML 屬性 title。
  - 指定鼠標懸浮時彈出的文字提示框

元素狀態的相關屬性
- Element.hidden
  - 返回一個布爾值，表示當前元素的 hidden 屬性，用來控制當前元素是否可見。該屬性可讀寫
  - 這個屬性並不能用來判斷當前元素的實際可見性。由於該屬性與 CSS 設置是互相獨立的

- Element.contentEditable
  - 控制元素的內容是否能夠編輯
    - true 元素內容可編輯
    - false 元素內容不可編輯
    - inherit 元素是否可編輯，繼承了父元素的設置

- Element.isContentEditable
  - 返回一個布爾值，一樣表示元素的內容是否能夠編輯。該屬性只讀。

- Element.attributes
  - 返回一個相似數組的對象，成員是當前元素節點的全部屬性節點

- Element.className
  - 讀寫當前元素節點的class屬性。
  - 它的值是一個字符串，每一個 class 之間用空格分割。

- Element.classList
  - 返回一個相似數組的對象，當前元素節點的每一個 class 就是這個對象的一個成員
  - classList 對象有下列方法
    - add() 增長一個 class
    - remove() 移除一個 class
    - contains() 檢查當前元素是否包含某個 class
    - toggle() 將某個 class 移入或移出當前元素
      - 若是爲 true，則添加該屬性；若是爲 false，則去除該屬性
      - el.classList.toggle('abc', boolValue); // 等同於 if (boolValue) { el.classList.add('abc'); } else { el.classList.remove('abc'); }
    - item() 返回指定索引位置的 class
    - toString() 將 class 的列表轉爲字符串
  - 比較一下，className 和classList 在 添加和刪除某個 class 時的寫法
    - var foo = document.getElementById('foo'); // 添加class foo.className += 'bold'; foo.classList.add('bold'); // 刪除class foo.classList.remove('bold'); foo.className = foo.className.replace(/^bold$/, '');

- Element.dataset
  - 返回一個對象，能夠從這個對象讀寫 data- 屬性
  - 網頁元素能夠自定義 data- 屬性，用來添加數據
    - // <article // id="foo" // data-columns="3" // data-index-number="12314" // data-parent="cars"> // ... // </article> var article = document.getElementById('foo'); foo.dataset.columns // "3" foo.dataset.indexNumber // "12314" foo.dataset.parent // "cars"
  - data-屬性的屬性名，只能包含英文字母、數字、連詞線（-）、點（.）、冒號（:）和下劃線（_）。
  - 它們轉成 JavaScript 對應的dataset屬性名，規則以下
    - 開頭的 data- 會省略
    - 若是連詞線後面跟了一個英文字母，那麼連詞線會取消，該字母變成大寫
    - 其餘字符不變
    - // data-abc-def 對應 dataset.abcDef
      // data-abc-1 對應 dataset["abc-1"]
- Element.innerHTML
  - 設置某個節點的內容
  - 它能改寫全部元素節點的內容，包括 <HTML> 和 <body> 元素
  - 若是文本之中含有 <script> 標籤，雖然能夠生成script節點，可是插入的代碼不會執行
  - 風險：
    - var name = "<img src=x onerror=alert(1)>"; el.innerHTML = name;
      上面代碼中，alert方法是會執行的。對象
    - 所以爲了安全考慮，若是插入的是文本，最好用 textContent 屬性代替 innerHTMLblog

- Element.outerHTML
  - 返回一個字符串，表示當前元素節點的全部 HTML 代碼，包括該元素自己和全部子元素
  - 是可讀寫的，對它進行賦值，等於替換掉當前元素
  - 變量 d 表明子節點，它的 outerHTML 屬性從新賦值之後，內層的div元素就不存在了，被 p 元素替換了。
    - 可是，變量 d 依然指向原來的 div 元素，這表示被替換的 DIV 元素還存在於內存中
  - 若是一個節點沒有父節點，設置 outerHTML 屬性會報錯。

- Element.clientHeight
  - 返回一個整數值，表示元素節點的 CSS 高度（單位像素）
  - 除了元素自己的高度，它還包括 padding 部分，可是不包括 border、margin，若是元素有水平滾動條，還要減去水平滾動條的高度
  - 只對塊級元素生效，對於行內元素返回 0
  - 若是塊級元素沒有設置 CSS 高度，則返回實際高度

- Element.clientWidth
  - 返回一個整數值，表示元素節點的 CSS 寬度（單位像素）
  - 除了元素自己的寬度，它還包括 padding 部分，可是不包括 border、margin，若是元素有水平滾動條，還要減去水平滾動條的寬度
  - 只對塊級元素生效，對於行內元素返回 0
  - 若是塊級元素沒有設置 CSS 寬度，則返回實際寬度
  - document.documentElement 的 clientHeight 屬性，返回當前視口的高度（即瀏覽器窗口的高度）
  - 瀏覽器窗口的高度 = window.innerHeight 屬性減去水平滾動條的高度（若是有的話）
  - document.body 的 clientHeight 高度則是網頁的實際高度
  - 通常來講，document.body.clientHeight 大於 document.documentElement.clientHeight

- Element.clientLeft
  - 元素節點左邊框（left border）的寬度（單位像素）
  - 若是沒有設置左邊框，或者是行內元素（display: inline），該屬性返回 0
  - 老是返回整數值，若是是小數，會四捨五入

- Element.clientTop
  - 網頁元素頂部邊框的寬度（單位像素）
  - 若是沒有設置左邊框，或者是行內元素（display: inline），該屬性返回 0
  - 老是返回整數值，若是是小數，會四捨五入

- Element.scrollHeight
  - 返回一個整數值（小數會四捨五入），表示當前元素的總高度（單位像素），包括溢出容器、當前不可見的部分
  - 包括 padding，，還包括僞元素（::before或::after）的高度
  - 可是不包括 border、margin 以及水平滾動條的高度（若是有水平滾動條的話）
  - 屬性只讀

- Element.scrollWidth
  - 返回一個整數值（小數會四捨五入），表示當前元素的總寬度（單位像素），包括溢出容器、當前不可見的部分
  - 包括 padding，，還包括僞元素（::before或::after）的高度
  - 可是不包括 border、margin 以及垂直滾動條的高度（若是有垂直滾動條的話）
  - 屬性只讀

- Element.scrollLeft
  - 當前元素的水平滾動條向右側滾動的像素數量
  - 沒有水平滾動條的網頁元素，屬性老是等於0

- Element.scrollTop
  - 當前元素的垂直滾動條向下滾動的像素數量
  - 沒有垂直滾動條的網頁元素，屬性老是等於0

- Element.offsetParent
  - 返回最近的開啓了定位的祖先元素
  - 若是某個元素的全部上層節點的 position 屬性都是static，則 Element.offsetParent 屬性指向 <body> 元素（即便body{position: static;}）

- Element.offsetHeight
  - 返回一個整數，表示元素的 CSS 垂直高度（單位像素），包括 content、padding 和 border，以及水平滾動條的高度（若是存在水平滾動條）
  - 只讀屬性
  - 若是元素的 CSS 設爲不可見（好比display: none;），則返回0

- Element.offsetWidth
  - 返回一個整數，表示元素的 CSS 水平寬度（單位像素），包括 content、padding 和 border，以及垂直滾動條的寬度（若是存在垂直滾動條）
  - 只讀屬性
  - 若是元素的 CSS 設爲不可見（好比display: none;），則返回0

- Element.offsetLeft
  - 返回當前元素左上角相對於 Element.offsetParent 節點的水平位移，單位爲像素

Element.offsetTop

返回當前元素左上角相對於 Element.offsetParent 節點的垂直位移，單位爲像素

算出元素相對於整張網頁的座標

// 獲取元素 在 網頁 中的 座標    Test Already.
function getElementPosition(ele) {
    var left = 0;
    var top = 0;
    var p = ele;
    while (p !== null)  {
        left += p.offsetLeft;
        top += p.offsetTop;
        p = p.offsetParent;   // 遍歷相對元素的座標
    }
    
    var pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    var pageWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
    
    return {
        left: left,
        top: top,
        
        right: pageWidth - left - ele.offsetWidth,
        bottom: pageHeight - top - ele.offsetHeight
    };
}

- Element.style　　
  - 讀寫該元素的行內樣式信息

- Element.children
  - 返回一個相似數組的對象（HTMLCollection實例），包括當前元素節點的全部子元素。
  - 若是當前元素沒有子元素，則返回的對象包含零個成員

- Element.childElementCount
  - 返回當前元素節點包含的子元素節點的個數
  - 與 Element.children.length 的值相同

- Element.firstElementChild
  - 返回當前元素的第一個元素子節點
  - 若是沒有元素子節點，這兩個屬性返回 null

- Element.lastElementChild
  - 返回最後一個元素子節點
  - 若是沒有元素子節點，這兩個屬性返回 null

屬性相關實例方法

- getAttribute() 讀取某個屬性的值
- setAttribute() 寫入屬性值
- hasAttribute() 某個屬性是否存在
- hasAttributes() 當前元素是否有屬性
- removeAttribute() 刪除屬性
- getAttributeNames() 返回當前元素的全部屬性名

其餘實例方法
- Element.querySelector()
  - 接受 CSS 選擇器做爲參數，返回父元素的第一個匹配的子元素。
  - 若是沒有找到匹配的子元素，就返回 null
  - 注意，這個方法沒法選中僞元素
  - 多個選擇器，它們之間使用逗號分隔

- Element.querySelectorAll()
  - 接受 CSS 選擇器做爲參數，返回一個 NodeList 實例，包含全部匹配的子元素

Element.closest()

接受一個 CSS 選擇器做爲參數，返回匹配該選擇器的、最接近當前節點的一個祖先節點（包括當前節點自己）。

若是沒有任何節點匹配 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.addEventListener()
  - - 添加事件的回調函數

- Element.removeEventListener()
  - - 移除事件監聽函數

Element.dispatchEvent()

觸發事件

element.addEventListener('click', listener, false);
element.removeEventListener('click', listener, false);

var event = new Event('click');
element.dispatchEvent(event);

Element.scrollIntoView()

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

el.scrollIntoView();     // 等同於el.scrollIntoView(true)
el.scrollIntoView(false);

// 若是爲true，表示元素的頂部與當前區域的可見部分的頂部對齊（前提是當前區域可滾動）
// 若是爲false，表示元素的底部與當前區域的可見部分的尾部對齊（前提是當前區域可滾動）
// 若是沒有提供該參數，默認爲true

Element.getBoundingClientRect()

返回一個對象，提供當前元素節點的大小、位置等信息，基本上就是 CSS 盒狀模型的全部信息
屬性所有爲只讀

對於視口（viewport）的位置，會隨着頁面滾動變化，所以表示位置的四個屬性值是動態的

x    // 元素左上角相對於視口的橫座標
y    // 元素左上角相對於視口的縱座標
height    // 元素高度
width    // 元素寬度
left    // 元素左上角相對於視口的橫座標，與x屬性相等
right    // 元素右邊界相對於視口的橫座標（等於x + width）
top    // 元素頂部相對於視口的縱座標，與y屬性相等
bottom    // 元素底部相對於視口的縱座標（等於y + height）

都把邊框（border屬性）算做元素的一部分。繼承
也就是說，都是從邊框外緣的各個點來計算。
所以，width和height包括了元素自己 + padding + border

- Element.getClientRects()
  - 返回一個相似數組的對象，裏面是當前元素在頁面上造成的全部矩形

- Element.insertAdjacentElement()
  - 在相對於當前元素的指定位置，插入一個新的節點
  - 返回新插入的節點，若是插入失敗，返回 null
  - 第一個參數是一個字符串，表示插入的位置

- - - - beforebegin 當前元素以前，只在當前節點有父節點時纔會生效
      - afterbegin 當前元素內部的第一個子節點前面
      - beforeend 當前元素內部的最後一個子節點後面
      - afterend 當前元素以後，只在當前節點有父節點時纔會生效

- - 第二個參數是將要插入的節點

- Element.insertAdjacentHTML(position, text);
  - 用於將一個字符串，解析生成 HTML DOM 結構，插入相對於當前節點的指定位置
    - beforebegin 當前元素以前，只在當前節點有父節點時纔會生效
    - afterbegin 當前元素內部的第一個子節點前面
    - beforeend 當前元素內部的最後一個子節點後面
    - afterend 當前元素以後，只在當前節點有父節點時纔會生效

- Element.insertAdjacentText()
  - 在相對於當前節點的指定位置，插入一個文本節點，用法與Element.insertAdjacentHTML() 方法徹底一致

- Element.remove()
  - 繼承自 ChildNode 接口，用於將當前元素節點從它的父節點移除
    - var el = document.getElementById('mydiv'); el.remove();
      將 el 節點從 DOM 樹裏面移除

- Element.focus()
  - 將當前頁面的焦點，轉移到當前元素上
  - 能夠接受一個對象做爲參數
    - 參數對象的preventScroll屬性是一個布爾值，指定是否將當前元素停留在原始位置，而不是滾動到可見區域
    - document.getElementById('my-span').focus(); function getFocus() { document.getElementById('btn').focus({preventScroll:false}); // 讓元素得到焦點，並滾動到可見區域。 }btn

- Element.blur()
  - 用於將焦點從當前元素移除

- Element.click()
  - 用於在當前元素上模擬一次鼠標點擊，至關於觸發了 click 事件

相關標籤/搜索

每日一句

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