www.webdeveloper.com
Results 1 to 10 of 10

Thread: Question about element's life cycle

  1. #1
    Join Date
    May 2008
    Posts
    80

    Question Question about element's life cycle

    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.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  3. #3
    Join Date
    May 2008
    Posts
    80
    Quote Originally Posted by Kor View Post
    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.

  4. #4
    Join Date
    May 2008
    Posts
    80
    Quote Originally Posted by Kor View Post
    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?
    Last edited by the_dp; 09-07-2009 at 05:41 AM.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by the_dp View Post
    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.
    Last edited by Kor; 09-07-2009 at 07:12 AM.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by the_dp View Post
    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?

  7. #7
    Join Date
    May 2008
    Posts
    80
    I guess I never noticed it since I don't use div.name. Instead I use getAttribute.

  8. #8
    Join Date
    May 2008
    Posts
    80
    Quote Originally Posted by Kor View Post
    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.

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by the_dp View Post
    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>

  10. #10
    Join Date
    May 2008
    Posts
    80
    Quote Originally Posted by Kor View Post
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles