Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Swap DOM objects in / out to object variables?

Reply
Thread Tools

Swap DOM objects in / out to object variables?

 
 
sneill@mxlogic.com
Guest
Posts: n/a
 
      01-27-2005
I know its possible to dynamically remove elements from the DOM, but
rather than deleting them forever, is it possible to 'capture' them and
save them as an object variable so they can be reused elsewhere?

Consider this...

There are 2 DIV tags with the same ID value.

Wouldn't it be a neat trick if you could move one of the DIV tags out
to an object variable so that a getElementById() would return a result
for DIV tag that remained? Swapping the first DIV tag object back and
repeating the process on the second would return the first DIV tag on a
getElementById().

I tried cloning a DOM element by creating a clone() prototype function
on the Object object, but that didn't work.

Any ideas anyone?

Steve

 
Reply With Quote
 
 
 
 
Jeff North
Guest
Posts: n/a
 
      01-27-2005
On 26 Jan 2005 19:08:29 -0800, in comp.lang.javascript
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:

>| I know its possible to dynamically remove elements from the DOM, but
>| rather than deleting them forever, is it possible to 'capture' them and
>| save them as an object variable so they can be reused elsewhere?
>|
>| Consider this...
>|
>| There are 2 DIV tags with the same ID value.
>|
>| Wouldn't it be a neat trick if you could move one of the DIV tags out
>| to an object variable so that a getElementById() would return a result
>| for DIV tag that remained? Swapping the first DIV tag object back and
>| repeating the process on the second would return the first DIV tag on a
>| getElementById().
>|
>| I tried cloning a DOM element by creating a clone() prototype function
>| on the Object object, but that didn't work.
>|
>| Any ideas anyone?


The fact that you have 2 IDs the same is going to cause the
application logic problems. When you tell the program to manipulate
the ID which ID is it supposed to manipulate, the first or the second?
How will the application 'know' which of the 2 identical IDs are
active or which one to clone?

You'd be better off giving the DIVs unique IDs and NAME attributes.
Then in your code store the 'active' element within a variable and
then do further processing.


---------------------------------------------------------------
(E-Mail Removed) : Remove your pants to reply
---------------------------------------------------------------
 
Reply With Quote
 
 
 
 
John Doe
Guest
Posts: n/a
 
      01-27-2005
I don't guarantee this for standards or cross-browser compatibility, but
on latest IE it works:
<head>
<title>
Test of Div Replacement using Cloning and removeNode will swap the divs
three times thus leaving them in reverse order
</title>
<script>
function swapem() {
var mydiv=document.getElementById("my1").cloneNode(tru e);
document.getElementById("my1").removeNode(true);
alert(document.getElementById("my1").innerHTML);
document.getElementById("my1").insertAdjacentEleme nt("afterEnd",mydiv);
}
</script>
</head>
<body
onload="alert(document.getElementById('my1').inner HTML);swapem();swapem();swapem();">
<DIV id=my1>
This is div1
</div>
<div id=my1>
This is div1.1
</div>
</body>
 
Reply With Quote
 
Martin Honnen
Guest
Posts: n/a
 
      01-27-2005


(E-Mail Removed) wrote:

> I know its possible to dynamically remove elements from the DOM, but
> rather than deleting them forever, is it possible to 'capture' them and
> save them as an object variable so they can be reused elsewhere?


Sure, a node can be detached from the document and stored in a variable
or attached to a document fragment and later on reinserted or moved
elsewhere.


> I tried cloning a DOM element by creating a clone() prototype function
> on the Object object, but that didn't work.


DOM nodes are host objects so a method on the Object prototype doesn't
help but you can call cloneNode(true) for a deep clone and
cloneNode(false) for a shallow clone on DOM nodes.


--

Martin Honnen
http://JavaScript.FAQTs.com/
 
Reply With Quote
 
Martin Honnen
Guest
Posts: n/a
 
      01-27-2005


John Doe wrote:

> my example above (which only works in IE) can you tell me how I
> would convert it to be standards compliant? W3C doesn't appear to
> define a removeNode(), only removeChild(), but I got bogged down once I
> reached that point, trying to point a document.removeChild to the right
> element, and just settled for the IE way.


Your example seems to start with two elements in one document with the
same id attribute value and what happens with document.getElementById is
left open.
As for removing a node in the W3C DOM
if (node.parentNode) {
node.parentNode.removeChild(node);
}

--

Martin Honnen
http://JavaScript.FAQTs.com/
 
Reply With Quote
 
John Doe
Guest
Posts: n/a
 
      01-27-2005
Martin,
RE my example above (which only works in IE) can you tell me how I
would convert it to be standards compliant? W3C doesn't appear to
define a removeNode(), only removeChild(), but I got bogged down once I
reached that point, trying to point a document.removeChild to the right
element, and just settled for the IE way.
In article <41f904c2$0$807$(E-Mail Removed)-online.net>,
(E-Mail Removed) says...
>
>
> (E-Mail Removed) wrote:
>
> > I know its possible to dynamically remove elements from the DOM, but
> > rather than deleting them forever, is it possible to 'capture' them and
> > save them as an object variable so they can be reused elsewhere?

>
> Sure, a node can be detached from the document and stored in a variable
> or attached to a document fragment and later on reinserted or moved
> elsewhere.
>
>
> > I tried cloning a DOM element by creating a clone() prototype function
> > on the Object object, but that didn't work.

>
> DOM nodes are host objects so a method on the Object prototype doesn't
> help but you can call cloneNode(true) for a deep clone and
> cloneNode(false) for a shallow clone on DOM nodes.
>
>
>

 
Reply With Quote
 
John Doe
Guest
Posts: n/a
 
      01-27-2005
Actually W3C specifies that getElementById returns the first element
with the supplied id, so the functionality of that part should be
standard (Although giving multiple elements the same id is certainly bad
programming practice); I was just giving the original poster what they
wanted, a way to do that silly little trick. Thanks for the info, makes
sense. What about the insertAdjacent? Also not in the official DOM
methinks.
In article <41f93170$0$18551$(E-Mail Removed)-online.net>,
(E-Mail Removed) says...
> same id attribute value and what happens with document.getElementById is
>
>

 
Reply With Quote
 
Zifud
Guest
Posts: n/a
 
      01-28-2005
John Doe wrote:
> Actually W3C specifies that getElementById returns the first element
> with the supplied id,


Rubbish.

"ID
This attribute assigns a name to an element. This name must be
unique in a document.

"...The id attribute assigns a unique identifier to an
element...

"...Note that the French "msg1" and the English "msg1" may not
appear in the same document since they share the same id
value."

<URL:http://www.w3.org/TR/html4/struct/global.html#adef-id>

You will also find a number of references in the anchors section
highlighting that *ID must be unique*


<URL:http://www.w3.org/TR/html4/struct/links.html#anchors-with-id>


The specification absolutely unequivocal: ID must be unique.

Furthermore, ID and NAME share the same namespace so the only
way to have an identical name and id in the same document is for
them to be on the same element (either A, APPLET, FORM, FRAME,
IFRAME, IMG, or MAP), and in that case they *must* be
identical. Name need not be unique, but when used as an anchor
it must be.

Most browsers will return the first element if two have
identical IDs - but it is not part of the W3C standard.


> so the functionality of that part should be
> standard


No, it's not. It's just that the major browsers do it that way
to play nice and not barf if you make a mistake.



--
Zif
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-28-2005
John Doe wrote:
> Actually W3C specifies that getElementById returns the first element
> with the supplied id,


Rubbish.

The W3C DOM Level 1 spec says:

"getElementById
Returns the Element whose id is given by elementId. If no such
element exists, returns null. Behavior is not defined if more
than one element has this id.

"Parameters
elementId
The unique id value for an element."

<URL:http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-36113835>

In other words, it must be unique and if not, the behavior is
not defined. Quite a bit different from your guess - got a
reference?

Further more, the HTML specification is even more explicit:

"ID
This attribute assigns a name to an element. This name must be
unique in a document.

"...The id attribute assigns a unique identifier to an
element...

"...Note that the French "msg1" and the English "msg1" may not
appear in the same document since they share the same id
value."

<URL:http://www.w3.org/TR/html4/struct/global.html#adef-id>

You will also find a number of references in the anchors section
highlighting that *ID must be unique*


<URL:http://www.w3.org/TR/html4/struct/links.html#anchors-with-id>


The specification absolutely unequivocal: ID must be unique.

Furthermore, ID and NAME share the same namespace so the only
way to have an identical name and id in the same document is for
them to be on the same element (either A, APPLET, FORM, FRAME,
IFRAME, IMG, or MAP), and in that case they *must* be
identical. Name need not be unique, but when used as an anchor
it must be.

Most browsers will return the first element if two have
identical IDs - but it is not part of the W3C standard.

> so the functionality of that part should be standard


Not at all. The "functionality" is undefined.

> standard (Although giving multiple elements the same id is certainly bad
> programming practice);


Not just bad, but it will create invalid HTML.



--
Rob
 
Reply With Quote
 
Zifud
Guest
Posts: n/a
 
      01-28-2005
John Doe wrote:
> Actually W3C specifies that getElementById returns the first element
> with the supplied id...


Rubbish.

The W3C DOM 1 and 3 specs say the same thing:

"getElementById
"Returns the Element that has an ID attribute with the given
value. If no such element exists, this returns null. If more
than one element has an ID attribute with that value, *what is
returned is undefined.*" (my emphasis)

<URL:http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-getElBId>

The W3C specification actually says to return undefined. Most
browsers don't, being somewhat sympathetic they tend to return
the first element that matches. However, it is *not* the
behaviour specified by the W3C.

The HTML specification is unwavering in its insistence that id
be unique in a document:

"ID
This attribute assigns a name to an element. This name must be
unique in a document.

"...The id attribute assigns a unique identifier to an
element...

"...Note that the French "msg1" and the English "msg1" may not
appear in the same document since they share the same id
value."

<URL:http://www.w3.org/TR/html4/struct/global.html#adef-id>

You will also find a number of references in the anchors section
highlighting that *ID must be unique*


<URL:http://www.w3.org/TR/html4/struct/links.html#anchors-with-id>

The specification is absolutely unequivocal: ID must be unique.

Furthermore, ID and NAME share the same namespace so the only
way to have an identical name and id in the same document is for
them to be on the same element (either A, APPLET, FORM, FRAME,
IFRAME, IMG, or MAP) and in that case they *must* be
identical. Name need not always be unique, but when used as an
anchor, it must be.

Most browsers will return the first element if two have
identical IDs - but it is not part of the W3C standard.

> ...so the functionality of that part should be
> standard...


The functionality is common, but not standard.

Browsers that return the first element with the duplicate ID do
so for the sake of tolerance of invalid markup, not because they
are compelled to do so for standards compliance. Making the
operation of pages dependent on this "feature" is like refusing
to add closing </p> tags because nearly all browsers infer them
anyway.

> ...(Although giving multiple elements the same id is certainly bad
> programming practice)


Not just bad practice, it creates invalid HTML and depends on
the successful operation of an unspecified "feature".


--
Zif
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
"Swap" baseclass of two similar Objects... .rhavin grobert C++ 5 10-07-2007 09:30 PM
class objects, method objects, function objects 7stud Python 11 03-20-2007 06:05 PM
What swap is called when using std::swap? Niels Dekker (no reply address) C++ 4 07-20-2006 08:44 PM
Convert a XML DOM Object to a HTML DOM Object manjunath.d@gmail.com XML 0 09-20-2005 08:16 AM
How to swap two rows using JS + DOM ? Timmy Javascript 1 06-17-2005 04:36 PM



Advertisments