About Htmlcollection and nodelist, record a bit.

Remember last year's work encountered old IE and modern browser JS about DOM operation compatibility issues, in Chrome, IE, Firefox test getelementsbytagname return value, the problem arises, Both Chrome and opera return the NodeList object, while IE and Firefox return the Htmlcollection object. At that time to check the information, a lot of articles said IE and Firefox did not follow the specifications, but the previous days I accidentally encountered a similar problem, browser (Chrome, IE, Firefox) a test, all returned to Htmlcollection, I and my little friends are stunned, Is there a problem with the spec or is chrome on the bandwagon? Turning over the new version of the book "JavaScript Advanced Programming", getElementsByTagName returns NodeList, but emphasizes that in an HTML document, a Htmlcollection object is returned. By the way also measured the next HTML5 added Getelementbyclassname, God Book said return is nodelist, in fact, browsers have returned htmlcollection. In fact, these two differences are not really small, they are dynamic, but because of this, each time access to nodelist and Htmlcollection will run a document-based query, so multiple access to these objects can affect performance. Do not write code like the following, resulting in an infinite loop:

var divs = document.getelementbytagname ("div"),     I,     div;  for (i = 0; i < divs.length; i++) {   = document.createelement ("div");   Document.body.appendChild (div);}

With a little modification, you can avoid infinite loops

var divs = document.getelementbytagname ("div"),     I,     Len,     div;  for (i = 0;len=divs.length; i < Len; i++) {     = document.createelement ("div");     Document.body.appendChild (div);}

Above is to set a Len variable and initialize its value, in the end is to cache the value of Divs.length, in writing JS code This small technology is very useful, this way to avoid infinite loops, but also to avoid repeated DOM traversal, both reduce the code overhead and improve performance.

Example of a jquery

// Bad  = $ (' #element '). Height (); $ (' #element '). CSS (' height ', h-20); // Recommended  = $ (' #element '= $element. Height (); $element. css (' height ', h-20);

The above is just a record, by the way, the debris of the front end of the trough, a variety of kernel browser, various terminals, various specifications of the endless modification and difficult to establish ... If there is a mistake welcome to point out and discuss