在 Chrome 控制台中選擇 DOM 元素

Question

我對以下內容感到有些困惑：假設我有一個段落元素，其 ID 為para 。 使用 Chromes 控制台，如果我說

document.getElementById("para")

我返回 HTML 代碼段<p id="para">....</p> ，而如果我使用例如 Javascript 庫 D3 的選擇方法並說

d3.select("#para")

我返回了 DOM 節點，可以訪問段落元素的所有屬性和方法。

為什么會有這種差異？

Answer 1

默認情況下，在 Chrome 中記錄 DOM 節點時，它顯示為標記。 要將 DOM 節點記錄為普通對象，請使用console.dir 。 d3.select("#para")顯示為普通對象的原因是該方法可能不會返回一個 DOM 節點，而是一個包裝在 DOM 節點上的對象。

console.dir(document.getElementById("para"));

Answer 2

我認為最好的方法是這樣的：

• 打開 Chrome 控制台
• 類型： $x("//input[@id='para']")

單擊找到的元素，您還可以看到它被選中