How can I get a xhtml element by it's ID?-CodePudding

I am trying to get the xhtml element ID in javascript to change an element color when I click a button. I expect the browser to find an element added via an function other than querySelector and getElementById.

As a alternative to the dom default methods, I wrote this function to find element from the nodes tree. I it didn't worked because I used the wrong 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);
}

Here is a minimum reproductable example of what I am trying to do.

    /* 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>

CodePudding user response：

Your code with document.getElementById working:

/* 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>

UPDATE: If you really want to use your own custom function, please note that
return nodes.filter(node => node.id === id);
returns an array.
Thus you need its first element: 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>