basically I'm building an array of offsetTop, offsetLeft and offsetHeight for a bunch of elements. these are used to work with the element that is closest to where the user clicked.
one part of the script, though, changes the DOM, so that node[0] becomes for instance node[1].
I've temporarely solved the issue by saving the container's innerHTML and replacing it at the end of every loop.
this is obviously really slow.
how can one work with the DOM changing on the fly?
If you make changes that require the page to redraw,
either because of adding or removing elements or changing the style of an element,
you'd be better to read the offsets when you handle the event.
Even changing a single word's font weight can change the position of another element,
far from that one, by as much as the line-height.
A tiny change can be just enough to cause a line of text to wrap over another line, or remove a line.
the tricky part is that in order to read the offset stuff I have to change the DOM.
basically I need to get the coordinates of single characters on the screen. the only way that I found to do this is adding a random tag (<span>) next to the character and get its offset properties instead. the when I'm done I remove the tag, and go on to the next character.
could you do something like:
1. get the closest parent's offsets
2. create a hidden, position absolute container- a div, probably
3. append a clone of the parent
4.do your span trick offstage, as it were, so the page won't be frantically redrawing.
Return an array of character[x,y] items, with the parent's offsets added.
But you have to really want to know the positions-
and in that case, why not just put every position-significant character in a permanent span?
working with DOM changing
Bookmarks