如何識別DOM中要在單擊按鈕事件中使用的元素？

Question

現在我已經掌握了幾個月的Python，現在嘗試學習一些Javascript。 使用Javascript的頁面上的HTML元素出現問題（不確定該措詞是否正確）。

我有一個簡單的Chrome擴展程序，試圖告訴它在頁面加載時單擊一個按鈕。

DOM或多或少顯示此代碼：

<body class="skin-mark toolbar-open  table-active">
    <div class="tile-tables"></div>
</body>

我嘗試單擊該按鈕的方式有多種，類似於以下內容：

document.querySelector('#tile-tables').click();

任何有助於理解此處流程以及我做錯事情的幫助都將非常有用！ 提前致謝！ 隨時在任何地方糾正我，我會修復我的語言。

Answer 1

使用getElementById ，必須將元素的ID傳遞給它。 HTML中只有一個id為id元素，即外部userActActions-51因此，如果您要先按ID進行選擇，則可以

document.getElementById('userActActions-51')

然后您將訪問第二個嵌套子級：

const userActions = document.getElementById('userActActions-51');
const span = userActions.children[0].children[0];
span.click();

不過，這將是更方便地使用querySelector這一點，這將允許您使用選擇串選擇span與ID的元素的后裔userActActions-51一次：

document.querySelector('#userActActions-51 span').click();

如果該元素可能不存在，請在嘗試單擊它之前確保其存在：

const span = document.querySelector('#userActActions-51 span');
if (span) span.click();