(function(global) { global.doc = document; global.body = doc.getElementsByTagName('body')[0]; global.$ = function(id) { return doc.getElementById(id); } global.Logger = function(id) { this.logElem = $(id); this.logArr = []; }; global.Logger.prototype = { constructor: global.logger, append: function(comment) { this.logArr.push('<p>' + comment + '</p>'); }, flush: function() { this.logElem.innerHTML = this.logArr.join(''); }, clear: function() { this.logElem.innerHTML = ''; this.logArr = []; } }; })(this); (function() { var logger = new Logger('log'); var items = $('inner').querySelectorAll('#main h4.inside'); logger.append(items.length); for(var i = 0, len = items.length; i < len; i++) { logger.append(items[i].innerHTML); } logger.flush(); })();
<div id="main"> <div id="inner"> <h4 class="inside">h4 inside 1</h4> <h4 class="inside">h4 inside 2</h4> <ul class="nodelist"> <li>list item one</li> <li>list item two</li> <li>list itme three</li> </ul> </div> <div id="outter"> <h4 class="outside">h4 outside 1</h4> <h4 class="outside">h4 outside 2</h4> </div> <div id="log"></div>
#log { font-size: 10px; }