在DOM中按ID獲取元素

Question

我正在創建一個元素 ，然后想要向其添加事件偵聽器。 我正在做：

console.log('about to create modal');
this.createModal(
  'There are unsubmitted changes in this Access Request.',
  'Do you wish to discard them?',
  'Yes',
  'No',
  'tabCloseModal'
);
console.log('created modal');
const modal = this.shadowRoot.querySelector('#tabCloseModal');
console.log(`modal = ${modal}`);
modal.addEventListener('px-modal-accepted', function(e) {
  console.log('removing tab');
  this.removeTab(index);
});

在createModal創建元素的位置：

  createModal(headerText, bodyText, acceptText, rejectText, id, opened = true) {
    const modal = document.createElement('px-modal');
    //assign parameters
    document.swQuerySelector('body').appendChild(modal);
    console.log('Child appended');
    modal.visible = true;
    this.fire('modal-visible');
  }

不管我做什么（我厭倦了swQuerySelector ， swQuerySelectorAll ， querySelector ， querySelectorAll ），我似乎都無法掌握模態。 當我記錄它時，它只是顯示為空，未定義或[object Object]或類似的東西，而我從沒去過'remove tab'。 我想念什么？ 正在顯示模式，但是接受的事件偵聽器的映射不起作用。

Answer 1

要解決這個問題：

1. 從createModal返回模態，並確認它在調用代碼中按預期工作。

2. 如果是這樣，則問題出在您的this.shadowRoot.querySelector行中。 在那一點設置一個斷點，並嘗試在devtools command line嘗試使用querySelector一些路徑，直到獲得模態。 嘗試在devtools elements窗口中找到模式，以查看其位置。 如果沒有看到DOM的布局，我們將無法建議父元素的確切路徑。

Shadow DOM有時可能會變得“陰暗”……