Question about element's life cycle

**the_dp** · 09-07-2009 03:55 AM

I would like to understand how elements behave after they were appended to the page.

Code:

var newElem = document.createElement("div");
document.appendChild(newElem);

newElem.setAttribute("name", "something");

Will the attribute applied in the code above automatically added to the page as well? And if so, can I rely on that?

Thank you.

**Kor** · 09-07-2009 04:29 AM

Don't confound the element with its reference. Even after you have appended an element, you may set new attributes on it using its reference. The only thing you should keep in mind is that a new created element can be appended only once.

Note: You have chosen, unfortunately, a wrong example. DIV elements can not bear a name, they can only have an id.

**the_dp** · 09-07-2009 05:11 AM

Originally Posted by Kor

Note: You have chosen, unfortunately, a wrong example. DIV elements can not bear a name, they can only have an id.

Why not? from what I can see, all browsers support it.

**the_dp** · 09-07-2009 05:20 AM

Originally Posted by Kor

Don't confound the element with its reference. Even after you have appended an element, you may set new attributes on it using its reference. The only thing you should keep in mind is that a new created element can be appended only once.

Reference? What does getElementsByTagName return? A list of references?

Also, my dynamically created pages contain a huge number of div elements, which makes getElementsByTagName slow down the application. (especially with IE).
So I decided to save my own array of elems (Nodes) and update newly created elements there.
In other words, each time I need to add/remove an element, I insert/remove child from the page, and then add/remove cells from the saved list of elems.

The thing is, while the add works great (probably because of the reference) the remove with removeChild() doesn't... Any idea?

**Kor** · 09-07-2009 07:06 AM

Originally Posted by the_dp

Why not? from what I can see, all browsers support it.

If by all the browsers you mean IE

... No, definitely no. All the browsers, except IE, will return undefined the following:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
onload=function(){
var div=document.getElementsByTagName('div')[0];
alert(div.name);
}
</script>
</head>
<body>
<div name="myDiv"></div>
</body>
</html>

IE is famous for another mismatch: If id is not defined, IE will take the name as id, or the id as name if the name is missing. Completely wrong, according to the standards.

name is to be used only for the form's controls. It may be used for links, images and frames/iframes as well, but the W3C Recommendation is to use the name only for the form's controls.

id and name are different things.

**Kor** · 09-07-2009 07:11 AM

Originally Posted by the_dp

Reference? What does getElementsByTagName return? A list of references??

a reference of a collection of elements. Not exactly an array, but very much alike.

Don't you know the difference between an element and the reference of an element?

**the_dp** · 09-07-2009 07:33 AM

I guess I never noticed it since I don't use div.name. Instead I use getAttribute.

**the_dp** · 09-07-2009 07:34 AM

Originally Posted by Kor

a reference of a collection of elements. Not exactly an array, but very much alike.

Don't you know the difference between an element and the reference of an element?

I do, but I had no idea it returns me a reference... It's not specified in any of the books I read on the subject.

**Kor** · 09-07-2009 07:49 AM

Originally Posted by the_dp

I do, but I had no idea it returns me a reference... It's not specified in any of the books I read on the subject.

Here's an example:

Nullify the reference will not nullify the object, as inside a function the reference has a local scope.:

Code:

<script type="text/javascript">
var x = new Object();
function nullify(a){
    a = null;
}
nullify(x);
alert(x); 
</script>

**the_dp** · 09-08-2009 02:38 PM

Originally Posted by Kor

Here's an example:

Nullify the reference will not nullify the object, as inside a function the reference has a local scope.:

Code:

<script type="text/javascript">
var x = new Object();
function nullify(a){
    a = null;
}
nullify(x);
alert(x); 
</script>

Interesting. Then how can I nullify/change the object inside the function?

Thread: Question about element's life cycle

Thread Tools

Display

Question about element's life cycle

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions