如何通過 ID 獲取 xhtml 元素？

Question

我正在嘗試獲取 javascript 中的 xhtml 元素 ID，以在單擊按鈕時更改元素顏色。 我希望瀏覽器能夠找到通過 function 添加的元素，而不是querySelector和getElementById 。

作為 dom 默認方法的替代方法，我編寫了這個 function 從節點樹中查找元素。 我沒有用，因為我使用了錯誤的 NodeFilters。

function findById(id) {
    const treewalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_ATTRIBUTE 
        | NodeFilter.SHOW_TEXT, { acceptNode: function (node) { 
            return NodeFilter.FILTER_ACCEPT;
        } }, false);
    let node;
    let nodes = [];
    while (node = treewalker.nextNode())
        nodes.push(node);
    return nodes.filter(node => node.id === id);
}

這是我正在嘗試做的最小可復制示例。

 /* Display the foobar text (cannot be directly written in the html file) */ let foobar = document.createElement('p'); foobar.innerHTML = 'Foo bar'; foobar.id = 'foobar'; // foobar.setAttributeNS(null, 'id', 'foobar'); document.body.appendChild(foobar); function findById(id) { const treewalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_ATTRIBUTE | NodeFilter.SHOW_TEXT, { acceptNode: function (node) { return NodeFilter.FILTER_ACCEPT; } }); let node; let nodes = []; while (node = treewalker.nextNode()) nodes.push(node); return nodes.filter(node => node.id === id); } function displayFoobar() { let e = findById('foobar'); setTimeout(function () { e.style.color = 'blue'; }, 1000); setTimeout(function () { e.style.color = 'black'; }, 2000); }

 <html> <head> <title>Test</title> </head> <body> <h1>Foo bar app</h1> <button onclick="displayFoobar();">display foobar</button> </body> </html>

Answer 1

您使用document.getElementById工作的代碼：

 /* Display the foobar text (cannot be directly written in the html file) */ let foobar = document.createElement('p'); foobar.innerHTML = 'Foo bar'; foobar.id = 'foobar'; document.body.appendChild(foobar); function displayFoobar() { let e = document.getElementById('foobar'); setTimeout(function () { e.style.color = 'blue'; }, 1000); setTimeout(function () { e.style.color = 'black'; }, 2000); }

 <html> <head> <title>Test</title> </head> <body> <h1>Foo bar app</h1> <button onclick="displayFoobar();">display foobar</button> </body> </html>

如何通過 ID 獲取 xhtml 元素？

問題描述

1 個解決方案

解決方案1
1 2022-02-04 00:52:36

如何通過 ID 獲取 xhtml 元素？

問題描述

1 個解決方案

解決方案1 1 2022-02-04 00:52:36

解決方案1
1 2022-02-04 00:52:36