Using a java script, you can make a selection. This will be equivalent to selecting with the mouse cursor. The code that I added to the question makes a selection of each element inside the container you click on, but the previous selection disappears. Can this be changed?
const selectElement = (element) =>
{
const range = document.createRange();
range.selectNode(element);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
const container = document.getElementById("container");
container.addEventListener('click', (event) =>
{
const x = event.pageX;
const y = event.pageY;
selectElement(document.elementFromPoint(x, y));
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Code snippet</title>
</head>
<body>
<div id="container">
<div id="firstElement">
First element text
</div>
<div id="secondElement">
Second element text
</div>
</div>
</body>
</html>EDIT:
For better understanding, I added a second snippet that does what I would like to get, but without using a window.getSelection().addRange().
const selectElement = (element) =>
{
element.style.backgroundColor = 'blue';
element.style.color = 'white';
}
const container = document.getElementById("container");
container.addEventListener('click', (event) =>
{
const x = event.pageX;
const y = event.pageY;
selectElement(document.elementFromPoint(x, y));
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Code snippet</title>
</head>
<body>
<div id="container">
<div id="firstElement">
First element text
</div>
<div id="secondElement">
Second element text
</div>
</div>
</body>
</html>Accpording to the other answer and MDN it only works in FF.
https://stackoverflow.com/a/70175542/4860688
https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange#example
But, here is how to do it in FF:
Moving focus and/or clicking on elements typically (always?) removes the previous selection as per pretty standard UI selection behaviour.
If you wanted to retain the previous selection range(s) then you will need to store them separately and re-add them to the window's selection ranges.
Obviously this is counter intuitive to any user expectation but I'm not going to presume anything about why you want this :)
var ranges = [];
const selectElement = (element) =>
{
const range = document.createRange();
range.selectNode(element);
ranges.push(range);
const selection = window.getSelection();
ranges.forEach(r => selection.addRange(r));
}
const container = document.getElementById("container");
container.addEventListener('click', (event) =>
{
selectElement(event.target);
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Code snippet</title>
</head>
<body>
<div id="container">
<div id="firstElement">
First element text
</div>
<div id="secondElement">
Second element text
</div>
</div>
</body>
</html>Note that if you click outside your container div, the selections are cleared - this is the standard behaviour and since your event listener is only on the div, the selections are not restored. If you want to change that, move your event listener to the body.