By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,908 Members | 2,055 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,908 IT Pros & Developers. It's quick & easy.

"Live" DOM NodeList: rationale?

P: n/a
Given the html at the end of this message, I see how
a DOM NodeList exhibits its "live" behavior; that is,
adding elements to a document can change any NodeList
variables, when there's *no* code that refers to them.

I suppose I can imagine cases where this idea would be
useful, but I can imagine many more where I'd like to
get a *static* list of, e.g., the <p> elements in my
document, and do something with them, regardless of any
I might add while I'm working on the list.

Can anyone explain the rationale behind this decision?

hj

---
Sample code exhibiting this behavior:

<html><head><title>Live Collection Demo</title></head><body>
<h1>Live Collection Demo</h1>
<script type="text/javascript">
function dumplist(plist) {
var s = plist.length + ' elements:\r\n ';
for (var i=0; i<plist.length; i++)
s += "plist[" + i + "] id='" + plist[i].getAttribute('id') + "'\r\n ";
return s;
}
function add_para() {
var plist,newp,lastp,desc,description;

plist = document.getElementsByTagName('p');
lastp = document.getElementById('last');
description = ' Initially: ' + dumplist(plist);
newp = document.createElement('p');
newp.appendChild(document.createTextNode('A middle paragraph.'));
newp.setAttribute('id','middle');
lastp.parentNode.insertBefore(newp,lastp);
description += '\r\n After adding: ' + dumplist(plist);
description += '\r\n\r\n The element referenced at plist[1] changed ' +
'with no reference to plist. It\'s "live".'
desc = document.createElement('pre');
desc.style.whitespace = 'pre';
desc.appendChild(document.createTextNode(descripti on));
document.body.appendChild(desc);
}
</script>
<p id="first">There are initially two paragraphs in this document.
This one's id is "first".
</p><p id="last">This paragraph's id is "last".</p>
<form action="" onsubmit="return false">
<button onclick="add_para()">Add a paragraph</button>
</form></body></html>
Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Howard Jess wrote:
Given the html at the end of this message, I see how
a DOM NodeList exhibits its "live" behavior; that is,
adding elements to a document can change any NodeList
variables, when there's *no* code that refers to them.

I suppose I can imagine cases where this idea would be
useful, but I can imagine many more where I'd like to
get a *static* list of, e.g., the <p> elements in my
document, and do something with them, regardless of any
I might add while I'm working on the list.

Can anyone explain the rationale behind this decision?

hj


I'd guess the rationale is that they didn't want to create two node types to
represent "real" nodes and those that were added programmatically. Ultimately,
there is no difference between them, so there is no need to treat them differently.

It's not hard to keep track of nodes you insert programmatically anyway. When you
add elements to the DOM programmatically, set the ID to something like "jsMyId".
Then you can do:

var paragraphs = document.getElementsByTagName("p");
if (p) {
for (var i = 0; i < p.length; i++) {
if (p[i].id.indexOf("js") != 1) {
// it was part of the downloaded HTML
} else {
// it was added by JavaScript
}
}
}

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #2

P: n/a
Howard Jess <ho****@at.dhitechnologies.dot.com> writes:
I suppose I can imagine cases where this idea would be
useful, but I can imagine many more where I'd like to
get a *static* list of, e.g., the <p> elements in my
document, and do something with them, regardless of any
I might add while I'm working on the list.
It's easier to go from a dynamic list to a static than
the other way :)
---
function arrayOfNodeList(nodeList) {
return Array.prototype.slice.call(nodeList, 0, nodeList.length);
}
---
which oddly enough doesn't work in Opera (well, there's host objects
involved, so all bet's are off). Or the longer:
---
function arrayOfNodeList(nodeList) {
var arr = new Array();
for (var i=0; i<nodeList.length;i++) {
arr[i] = nodeList[i];
}
return arr;
}
---
Can anyone explain the rationale behind this decision?


Only the ones who made it. But my guess is the above.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.