SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Location
    au2650
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why is the DOM List of elements being auto updated..

    The following JavaScript has a variable *parList* which is global.

    At the start during the init function another function is called which fills the variable with paragraph elements from the page with the initial two that exist.

    When adding another paragraph (sentence) via the Add button the paragraph is added to the page as expected.
    The bizarre thing is the variable is being updated as they are added.

    Not what I expected to see when I went to use it.
    My primary question is why is it so?

    Code:
    var ParList;
    	function getPars() {
    		var len;
    		ParList = document.getElementById('pars').getElementsByTagName('p');
    		len = ParList.length;
    		alert("Original number of paragrahs in the list is\n\n" + len);
    	}
    	//
    	function setPar(item) {
    		var newEle, txtNode;
    		newEle = document.createElement('p');
    		txtNode = document.createTextNode(item);
    		newEle.appendChild(txtNode);
    		document.getElementById('pars').appendChild(newEle);
    	}
    	//
    	function addPar() {
    	    var done = false, addItem;
    		do {
    		    addItem = prompt("Add a sentence.");
    			if (addItem === null) {
    			    done = true;
    			} else if (addItem === '') {
    			    alert("Must be sumpin to add\n\nTry again");
    			} else {
    				setPar(addItem);
    				done = true;
    			}
    		} while (!done);
    		//
    		//ParList has now incremented..
    		//
    		alert("the number of paragraphs in the list is now\n\n" + ParList.length);
    	}
    	//
    	function init() {
    	    //
    		document.getElementById('add').addEventListener('click', addPar, false);
    		getPars();
    	}
    HTML Code:
    <div id="pars">
        <p>Bizare things are happening.</p>
        <p>Click Add to see.</p>
    </div>
    <p>
    <input id="add" type="button" value="Add">
    </p>

    Originally this was in a module and removed for testing.
    It has been tested in multiply modern browsers and all behave the same so it must be standard behaviour.
    Searching with appropriate keywords has results that are not relevant.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    document.getElementById('pars').getElementsByTagName('p'); provides a live link to all the paragraphs inside the element with id="pars" - all of the getElement... calls are live node lists. That these are live is specified in the standards http://www.w3.org/TR/DOM-Level-2-Core/core.html section 1.1.1

    querySelector() and querySelectorAll() are the calls to use if you want to speed up access by grabbing a "snapshot" of the current node structure rather than connecting to the live page content. That these are static is also defined in the standards http://www.w3.org/TR/selectors-api/ section 6.2

    http://www.webdirections.org/blog/ht...e-for-the-dom/ provides a good description of the alternatives and how they work.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Location
    au2650
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Be dammed it was under my nose all the time.
    Those w3 documents are but not for the faint hearted.

    Many thanks for the links that explain the live link situation. Originally I did look under the create element section with no luck.
    Now to spend time evaluating and testing all the options to see where to now

    Again many thanks.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    People tend to get surprised when they loop through nodeLists and try removing elements as they go, for similar reasons.


Bookmarks

Posting Permissions

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