查看 DOM 物件的屬性

Sofia Emelianova
Sofia Emelianova

依序前往「Elements」(元素) >「Properties」(屬性) 窗格,即可瀏覽及篩選 DOM 物件的屬性。

開啟「屬性」窗格

如要開啟「屬性」窗格,請按照下列步驟操作:

  1. 開啟開發人員工具。根據預設,「元素」面板會隨即開啟。
  2. 在 DOM 樹狀結構中選取節點。
  3. 開啟「屬性」分頁。如果沒有看到這個分頁,請按一下「更多」圖示 更多,然後在下拉式選單中選取所需分頁。

「屬性」分頁開啟的元素面板

尋找自有房源

「Properties」窗格會先以粗體顯示物件的自己的屬性,並顯示該物件。

ALT_TEXT_HERE

找出繼承資源的來源

「Properties」窗格會評估內建元素的存取子,並在物件上顯示為「繼承」和一般字型。

如要找出繼承屬性的來源,請展開物件,然後展開其 [[Prototype]],然後是巢狀的 [[Prototype]] 等。

在原型鏈的 getter 上追蹤大小屬性。

在這個範例中,您可以在原型鏈結中找出原始屬性 (粗體) 屬性,同時找到對應的 getter,以追蹤繼承的 size 屬性的來源。

此外,原型專屬屬性只會顯示在原型上,不會顯示在物件上。這樣就能更輕鬆地診斷物件。

原型特定屬性。

篩選資源

如要快速尋找屬性,請在「篩選器」文字方塊中輸入屬性名稱或值。

篩選器

顯示所有房源

根據預設,「Properties」窗格不會顯示含有 nullundefined 值的屬性。

如要查看所有屬性,請勾選「顯示全部」

含有空值的屬性。

瞭解屬性

「Elements」(元素) >「Properties」(屬性) 窗格會顯示各種屬性。

簡易屬性

簡易屬性為 <name>: <value> 的組合。簡易屬性。

物件和陣列

可收合 (向右箭頭。) 屬性為物件 {} 或陣列 []可收合的屬性。

如要進一步瞭解如何檢查 JavaScript 物件,請參閱「檢查物件屬性」。

與 DOM 節點對應的屬性

與 DOM 節點相對應的屬性就是連結。請點選連結,在 DOM 樹狀結構中選取相關節點。 連結至主要 DOM 節點。

擁有和繼承的屬性

粗體字型的屬性是物件本身的屬性。而是直接在物件上定義。

一般字型的屬性會沿用原型鏈結。開發人員工具會在內建 HTML 元素上評估相關存取子,以便向你說明。擁有和繼承的屬性。 開發人員工具會先將屬性排序,以便找出屬性。

列舉及非列舉的屬性

可列舉的屬性為亮色。系統會忽略非列舉的屬性。列舉及非列舉的屬性。 您可以使用 for … in 迴圈或 Object.keys() 方法,疊代可列舉的屬性。

方法

方法會標上 f ()方法。

如要進一步瞭解函式,請前往主控台參閱「檢查函式」一文。