Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #14612

Re: Indexing DOM Elements

Show all headers | View raw

On 12-06-21 07:48 PM, Gene Wirchenko wrote:

> It establishes a 100x100 table of cells to draw in. What
> I would like to know is how to  refer to any of the cells
> directly.

What you seek lies in the DOM Level 2 HTML Specification[0].

First off, understand the HTMLTableElement[1] interface,
which provides access to table sections[2] and rows[3].

Secondly, understand the importance of table sections and
how integral they are in document tree traversal.

Third, understand how table cells[4] can be accessed[5]
from table rows.

With that knowledge, one can perform a vast amount of
operations on tables via the DOM.

> For example, I would like to click on two points and have
> the line between the two points drawn.  To do that, I would
> have to directly access the cells of the table. How do I do
> this?  What is it called?

What you seek lies in the technique of "Event Delegation".
Your problem can be solved with a handler for the `click`
event (be it DOM 0 or DOM Level 2+) attached to the
corresponding table element or another common ancestor.
Next, fetch the event target ([event object].target in DOM
0 or DOM Level 2+ events, [global].event.srcElement in
MSIE events). A logical step would to then check if the
target is a table cell (which would be context-specific) by
its `nodeName`[6] property. Then, store the target if it is
a table cell. A second invocation of the specified `click`
event handler would store another table cell, from which a
line could be drawn spanning a distance to the other
stored table cell. The storage medium could perhaps then
be cleared, and the cycle would continue.

[Quotations trimmed and indentation removed.]

[0]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html
[1]: http://www.w3.org/TR/DOM-Level-2-HTML/
html.html#ID-64060425
[2]: http://www.w3.org/TR/DOM-Level-2-HTML/
html.html#ID-67417573
[3]: http://www.w3.org/TR/DOM-Level-2-HTML/
html.html#ID-6986576
[4]: http://www.w3.org/TR/DOM-Level-2-HTML/
html.html#ID-82915075
[5]: http://www.w3.org/TR/DOM-Level-2-HTML/
html.html#ID-67349879
[6]: http://www.w3.org/TR/DOM-Level-2-Core/
core.html#ID-F68D095

(mind the spaces on trimmed links)

-- 
Matt McDonald: Web/Flash Developer; Edmonton, Alberta, Canada

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Indexing DOM Elements Gene Wirchenko <genew@ocis.net> - 2012-06-21 18:48 -0700
  Re: Indexing DOM Elements Matt McDonald <matt@fortybelow.ca> - 2012-06-21 21:31 -0600
  Re: Indexing DOM Elements Dr J R Stockton <reply1225@merlyn.demon.co.uk.not.invalid> - 2012-06-23 20:16 +0100

csiph-web