如何通過ID獲取xhtml元素？-有解無憂

我試圖在 javascript 中獲取 xhtml 元素 ID，以在單擊按鈕時更改元素顏色。我希望瀏覽器能夠找到通過 and 以外的函式添加的querySelector元素getElementById。

作為 dom 默認方法的替代方法，我撰寫了這個函式來從節點樹中查找元素。我沒有用，因為我使用了錯誤的 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>

uj5u.com熱心網友回復：

您的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>

更新： 如果您真的想使用自己的自定義函式，請注意
return nodes.filter(node => node.id === id);
回傳一個陣列。
因此，您需要它的第一個元素： let e = findById('foobar')[0];

    /* 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')[0];
        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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/426159.html

標籤：javascript dom

上一篇：檢查不存在的孩子的價值？

下一篇：需要點擊存檔按鈕兩次才能在JavaScript中更改主頁內容