Show Code

---

(1) Does this case ever happen, that startContainer is TEXT NODE but endContainer is ELEMENT NODE?

Yes (1) happens in Chrome. Suppose the following two sensences

<div>First Line</div>
<div>Second Line</div>

Put the mouse pointer just before "Second" and move your mouse up to the first line so the first line and CR are selected.

In this case, startContainer will be TEXT and endContainer will be ELEMENT(div)(endOffset==0)

But this occures only in Chrome. In FireFox, both startContainer and endContainer are #text

---

(2) Does this case ever happen, that startContainer is ELEMENT NODE but endContainer is TEXT NODE?

It looks like this never happens. I tried this. Put the mouse pointer just after "First Line" and move your mouse down to the second line, expecting startContainer becomes ELEMENT_NODE but it never happend. (on both Chrome and FireFox)

---

Why not use "node.style[name]=value" to assign a style to node?

Because you have to use the code below to get back the style.

const styles=window.getComputedStyle(node);
const value=styles.getPropertyValue(name);

A problems is getPropertyValue() will not return the value you put by "node.style[name]=value"

For example, If you execute style['font-weight']='bold', then getPropertyValue() will return '700' instead of 'bold'