JS Selection

/*childNodes
collection of an element's child nodes, as a NodeList object (array-like)
Whitespaces, comments and other text are also considered as nodes.
To skip text [...Nodelist].map(i=> i.nodeType != 1);

children
collection of an element's child elements, as an HTMLCollection object.
only elements are included. text is excluded*/




/*Select contenrpt between 2 elements________________________________*/
function selectBetween(start,endNode,startOffset=0,endOffset=0){
let selection= window.getSelection();
selection.setBaseAndExtent(start,startOffset,endNode,endOffset);
}

/*
●startNode: node at the start of the selection.
●startOffset: The number of childNodes from the start of the startNode,
that should be excluded from the selection.
E.g value is 0=> whole node is included.
value is 1=> whole node minus the first childNode is included
value is (element.childNodes.length)=> whole node is excluded
●endNode: The node at the end of the selection.
●endOffset: The number of childNodes from the start of the endNode,
that should be included in the selection.
E.g value is 0=> whole node is excluded.
value is 1=> first childNode is included
value is (element.childNodes.length)=> whole node is included*/



/*Select whole element________________________________*/
function selectText(element) {
let range = document.createRange();
//range.selectNode(element); **or**
range.selectNodeContents(element);
let selection= window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}

//●selectNode(): sets the Range to contain the Node and its contents
//●selectNodeContent: sets the Range to contain (only) the contents of a Node.



/*Select children of parent element________________________________*/
function selectText(element){
window.getSelection().selectAllChildren(element);
}
//●All children of parentNode (but not the parentNode itself) will be selected
//●Element parameter in this function refers to the parentNode




/*Select whole element using CSS4________________________________*/
.selectall{
-webkit-touch-callout: all;
-webkit-user-select: all;
-khtml-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
}
//Just add class "selectall" to elements, that should be selected completely on focus



/*------------STORING SELECTION----------*/

let selected= "empty";
document.onselectionchange= function() {
let a= window.getSelection();
selected= (a.toString().length > 0) ? a.getRangeAt(0) : "empty";
};

/*When text is selected it's stored in variable "selected", which can be used later
to reselect e.g. to prevent lost of selection due to un-focus/blur. e.g. clicking on element*/

if(selected=="empty"){
//Nothing selected
}
else{
let selection= window.getSelection();
selection.removeAllRanges();
selection.addRange(selected);
}



//-----------FIND ELEMENTS WITHIN SELECTION------


let selection= window.getSelection();
let selected= selection.getRangeAt(0);
let element= selected.commonAncestorContainer.querySelector(element);

let elements= document.querySelectorAll(elements);
let elinselection= [...elements].map(i=>{
if(selection.containsNode(i, true)) return i;
});

/* containsNode() method indicates whether a specfied node is part of the selection.
sel.containsNode(node, partialContainment)
●node: element(s) you're looking for
●partialContainment:
true: element is considered to be part of selection, even if partially selected
false: element is considered to be part of selection, only if it's fully selected */

//-----