DOM question

R

Richard Trahan

I have the following line of code:

var newopt = document.createElement("option");

I addChild this to a select list node and it works fine.

I want to attach an object reference to newopt, but the system doesn't
allow me to do this:
newopt.createAttribute("graph")

nor does it allow this:
newopt.setAttribute("graph",new MyObject)

I can't find any mention in the DOM that attributes cannot be added to
element nodes.

My question, then, is: how can I attach an object reference to an option
node?
 
O

oeyvind toft

Dont know for sure this is what you were looking for but..

This work in IE6:

<html>
<head>
<title></title>
<script type="text/javascript">
function init(){

var newOption = new Option('string', 'optionValue');
var elSelect = document.getElementById("selectID");
var elDiv = document.getElementById("divID");

elSelect.options[0] = newOption;
var attr = document.createAttribute('graph');

elSelect.options[0].setAttributeNode(attr);
elSelect.options[0].setAttribute('graph', elDiv);
alert(elSelect.options[0].getAttribute('graph').tagName);
}
</script>
</head>

<body onload="init()">
<div id="divID"></div>
<select id="selectID"></select>
</body>
</html>

Oeyvind
 
M

Michael Winter

Dont know for sure this is what you were looking for but..

This work in IE6:
Click to expand...

However, it won't work in any other browser. The setAttribute method takes
two arguments; both strings. All that will happen on compliant browsers is
the object will have its toString method called, and the result will be
assigned to the attribute.

[snip]

Mike
 
M

Michael Winter

[snip]
newopt.setAttribute("graph",new MyObject)

I can't find any mention in the DOM that attributes cannot be added to
element nodes.

My question, then, is: how can I attach an object reference to an option
node?
Click to expand...

As I said in response to Oeyvind's message, the setAttribute approach
cannot work as the arguments must be strings. However, you don't need to
worry about the *Attribute methods as you can create a new property just
as you would with any other object:

newopt.graph = new MyObject();

The *Attribute methods are designed to dynamically create attributes that
you would normally write directly with HTML. As you're not doing this,
it's inappropriate to use them. That said, HTML attributes (but not
XHTML/XML attributes) can be directly accessed using their property names,
like aObj.href and imgObj.alt.

Hope that helps,
Mike
 
R

Richard Trahan

Michael said:
newopt.graph = new MyObject();
Click to expand...

Thank you for responding, Mike. That does work; I seem to remember
trying that first and having trouble with it, but it works fine now.

However, this doesn't work:

var clone = child.cloneNode(true)

'child' is a select list option node, and contains my graph property
which I set with
child.graph = new MyObject()

'graph' disappears after the cloneNode(). I'm using Venkman on nn 7.1
and graph is clearly present in child and absent in clone. The DOM
reference on cloneNode indicates that everything should be copied,
including subtrees (which isn't relevant here). Could it be that the
browser interpets "clone" to refer only to values, not to attributes,
and will therefore only yield attributes defined in the DOM? If so, I
would have to maintain a parallel set of structures, which is a PITA.
I'm new at all this, so I may be missing something.
 
M

Michael Winter

[snip]
var clone = child.cloneNode(true)

'child' is a select list option node, and contains my graph property
which I set with
child.graph = new MyObject()

'graph' disappears after the cloneNode(). I'm using Venkman on nn 7.1
and graph is clearly present in child and absent in clone. The DOM
reference on cloneNode indicates that everything should be copied,
including subtrees (which isn't relevant here). Could it be that the
browser interpets "clone" to refer only to values, not to attributes,
and will therefore only yield attributes defined in the DOM?
Click to expand...

Clone copies all attributes, even custom ones, but you aren't adding an
attribute (you can't, as I explained). There is no requirement that
cloneNode copies user-defined properties.
If so, I would have to maintain a parallel set of structures, which is a
PITA.
Click to expand...

Why? You could just write something like:

function cloneGraph() {
var t = this.cloneNode(true);
if(t) {t.graph = this.graph;}
return t;
}

function createOption() {
var e = document.createElement('OPTION');
if(e) {
e.graph = new MyObject();
e.clone = cloneGraph;
}
return e;
}

var child = createOption();
// do stuff
var clone = child.clone();

unless I'm missing something you're not telling us.

Hope that helps,
Mike
 
R

Richard Trahan

Michael Winter wrote:
(snip)

Thanks again. I was confused about the meaning of clone, due partly to
inconsistent wording in the DOM: "The duplicate node returned by
cloneNode() has no parent. Cloning a node copies all of its attributes
and their values..."

To me, "duplicate" means everything, including user properties, but
"attributes and their values" apparently implies "and nothing else".

Learning this stuff is a nightmare. Can you recommend a book or tutorial
on the DOM?
 
M

Michael Winter

Michael Winter wrote:
(snip)

Thanks again. I was confused about the meaning of clone, due partly to
inconsistent wording in the DOM: "The duplicate node returned by
cloneNode() has no parent. Cloning a node copies all of its attributes
and their values..."

To me, "duplicate" means everything, including user properties, but
"attributes and their values" apparently implies "and nothing else".
Click to expand...

I don't think it's inconsistent; the apparent deviation is a product of
the nature of Javascript. In other languages that provide bindings for the
DOM (Java and C++, for example), you aren't able to modify an object. They
must be defined in advance.

In Java, you'd create a class that implements the Element interface (or
perhaps inherits from a class that already does), add your graph member,
and modify the cloneNode method to copy the graph and call the base class'
cloneNode. This is much more explicit, though it is, in fact, exactly what
I suggested.
Learning this stuff is a nightmare. Can you recommend a book or tutorial
on the DOM?
Click to expand...

Not personally. I learn through specifications and experimentation. :)

I can only suggest you check the resources in the FAQ
(<URL:http://jibbering.com/faq/>), though there don't seem to be many
appropriate links. Others reading this thread might be able to suggest
more.

Good luck,
Mike
 
R

Richard Cornford

Richard Trahan wrote:
Thanks again. I was confused about the meaning of clone,
due partly to inconsistent wording in the DOM: "The
duplicate node returned by cloneNode() has no parent.
Cloning a node copies all of its attributes and their
values..."

To me, "duplicate" means everything, including user
properties, but "attributes and their values" apparently
implies "and nothing else".
Click to expand...
<snip>

You should bear in mind that the DOM specifications are intended to be
language neutral. Adding arbitrary properties to objects is a very
ECMAScritp thing to be doing (and as DOM objects would qualify as 'host
objects' there is actually no good reason to expect that to work, beyond
precedence), in a language such as Java adding a property to an object
in a DOM implementation is unthinkable. That means that the
specification cannot imply behaviour that cannot be implemented in any
language (only the bindings for specific languages could do that).

Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Add Image and label dynamically inside the dropdown 2
Detect DOM Node Removal? 1
reversing dom surgery 5
Survey details won't go through using php, ajax, Mysql 0
How to reference one combo box from another combo box 2
Cannot write to the DOM 16
Custom property disappears after a while in a DOM Node 2
Creating custom methods to use with HTML DOM objects 1

Members online

Total: 22 (members: 1, guests: 21)
Robots: 127

Forum statistics

Threads
473,772
Messages
2,569,589
Members
45,100
Latest member
MelodeeFaj

Latest Threads

Top