Find the Element in which a Range Starts or Ends

Question

I am trying to find the element in which a Selected Range Starts. For example:

<p>Hello, <span class="editet">Genei180</span> is My Name</p>

The user now Selects: "ei180 is My Name"

Therefore i want something like startElementofRange() which Returns "object HTMLSpanElement"
I than want that on keypress only the Part which sits in Span Edíted gets Deleted.

I know about the Node.startOffset and Node.startContainer. But Node.startContainer would return in this case the whole p-Element as Text Element. But Node.startOffset is in this Case Relative to the Span Element so it would be 2. Also there can be occasions where more than one Span Edited Element can be selected. Current Approach is to loop true them all:

Sitenote:

This is for a Website which allows editing true the Javascript tag Contenteditable='true' and Displays Everything that changed in Green. I also want to read in only the Changed Parts from the Spans if Submited. So it can be Disscussed by the Users and Voteaccepted into an Articel. Is this in general a Secure and sense Making approach?

Answer 1

I searched for weeks...

range.startContainer returns the Notetype but not as i thought of the p Element instead it returns the type of the Span Element.

So you just need to use range.startContainer.parentNode to get The Element from it.

I feel stupid now. I leaf this up in case some one has the Same Problem