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