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

Groups > comp.lang.javascript > #14609 > unrolled thread

Indexing DOM Elements

Back to article view | Back to comp.lang.javascript

Contents

  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

#14609 — Indexing DOM Elements

Dear JavaScripters:

     I am not quite sure how to word this, so please bear with me.

     I am digging into the DOM more.  I am using "Internet & World
Wide Web How to Program, 4th ed." by Deitel and Deitel.  Section 13.4
has a very simple drawing program.  It establishes a 100x100 table of
cells to draw in.  It uses onmousemove to do its drawing.  The drawing
is on cell at a time and only on the cell that the event fires for.

     What I would like to know is how to refer to any of the cells
directly.  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?

Sincerely,

Gene Wirchenko

[toc] | [next] | [standalone]

#14612

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

[toc] | [prev] | [next] | [standalone]

#14635

In comp.lang.javascript message <1cj7u7ta6tl66bmkmkqt3asr5lkh82ps7r@4ax.
com>, Thu, 21 Jun 2012 18:48:39, Gene Wirchenko <genew@ocis.net> posted:


>     I am digging into the DOM more.  I am using "Internet & World
>Wide Web How to Program, 4th ed." by Deitel and Deitel.  Section 13.4
>has a very simple drawing program.  It establishes a 100x100 table of
>cells to draw in.  It uses onmousemove to do its drawing.  The drawing
>is on cell at a time and only on the cell that the event fires for.
>
>     What I would like to know is how to refer to any of the cells
>directly.  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?

Antiquated?  If you actually need to draw, use a canvas (not IE8), for
which see <http://www.merlyn.demon.co.uk/js-grphx.htm>; or use SVG,
about which I happily know approximately nothing.  To find cells on your
line, use Bresenham's line algorithm.

Parts of <http://www.merlyn.demon.co.uk/js-date6.htm> include locating a
click in an HTML table or similar.  One way is to give each sensitive
element a property of the form Axy, where x & y are its coordinates.

An Amazon search suggests to me that the Deitels may be professional
book authors; you can consider the possible implications.

-- 
 (c) John Stockton, nr London, UK.    ?@merlyn.demon.co.uk     Turnpike v6.05.
 Website  <http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
 PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/> - see in 00index.htm
 Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web