YUI Library JavaScript DHTML


            



    
Exploring the Dom Collection's API

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}





div.contentContainer {
  border: 1px solid #333;
  padding: 10px;
  margin-bottom:1em;        
}
#source li {
  list-style-type: decimal;
  margin-left: 20px;
}
#source li.highlight {
  list-style-type: decimal;           
}
.highlight {
  background: #ccf;
  color: blue;
}
li.even {
  background: #b3b3b3;
}




    This example was contributed by Christian Heilmann and members of his Juku training class at Yahoo.
Exploring the Dom Collection's API


  In this example, the use of several key Dom Collection methods is explored.  Given the markup in the source section, you can invoke any of the methods by clicking on them; the Source is updated, as is its in-browser appearance (Render).  In the Outupt section, you can review the elements that are selected or affected (or, in a few cases, the JavaScript return value) of the function you invoked.



Source


        
Functions


    
        getNextSibling('one')


Render

            

Output




(function() {
YAHOO.util.Event.addListener("functionList", "click", function(evt) {
  var target = YAHOO.util.Event.getTarget(evt);  
  YAHOO.util.Event.preventDefault(evt);        
  if(evt.type === 'click' && target && target.parentNode.id) {
    setView(target.parentNode.id);
  }
});       
// constant codedemo
var codedemo = [];
codedemo.push('');
codedemo.push('  ');      
codedemo.push('    item 1');
codedemo.push('    item 2');
codedemo.push('    item 3');      
codedemo.push('  ');
codedemo.push('');
// views object
var views = {
  sourceView: document.getElementById('source'),
  renderView: document.getElementById('render'),
  outputView: document.getElementById('output'),
  defaultView: {
    source: function() {
      return codedemo;
    },
    output: ['Please select a function.']
  },
  get1 : {
    source: function(){
      var temp = [].concat(codedemo);
      temp[0] = '';
      return temp;
    },
    output: ['']
  },
  get2 : {
    source: function(){
      var temp = [].concat(codedemo);
      temp[0] = '';
      temp[1] = '  ';
      return temp;
    },
    output: ['', '']
  },
  getAncestorByTagName : {
    source: function() {
      var temp = [].concat(codedemo);
      temp[0] = '';
      return temp;
    },
    output: ['']
  },
  getAncestorByClassName : {
    source: function (){
        var temp = [].concat(codedemo);
        temp[1]='  ';
        return temp;
    },
    output: ['']    
  },
  getChildren : {
     source: function (){
       var temp = [].concat(codedemo);
       temp[2]='    item 1';
       temp[3]='    item 2';
       temp[4]='    item 3';                   
       return temp;
     },        
     output: ['first', 
        'second' ,
        'item 3']
   },
   getFirstChild : {
  source: function (){
    var temp =[].concat(codedemo);
    temp[2]='    item 1';
    return temp;
  }, 
  output: ['']
   },
   getLastChild : {
  source: function(){
    var temp =[].concat(codedemo);
    temp[4] = '    item 3';
    return temp;
  },
  output : ['']
   },
   getNextSibling : {
   source: function(){
    var temp = [].concat(codedemo);
    temp[3]='    item 2';
    return temp;
   },
   output: ['']
   },
   getPreviousSibling : {
   source: function(){
    var temp = [].concat(codedemo);
    temp[2]='    item 1';
    return temp;
   },
   output: ['']
   },
   isAncestor : {
  source : function(){
    var temp = [].concat(codedemo);
    temp[0] = '';
    temp[2]='    item 1';
    return temp;
  },
  output: ['true']
   },
   insertBefore : {
    source : function(){
    var temp = [].concat(codedemo);
    temp.splice(2,0,'    new Item');
    return temp;
  },
  output: ['']
   },
   insertAfter: {
    source : function(){
    var temp = [].concat(codedemo);
    temp.splice(3,0,'    new Item');
    return temp;
  },
  output: ['']
   },
   getElementsBy : {
    source: function (){
        var temp = [].concat(codedemo);
        temp[4] ='    item 3';
        return temp;
    },    
    output: ['item 3']
  }
};
// render initial view
setView('defaultView');
function setView(viewName) {   
  // update sourceView
  views['sourceView'].innerHTML = renderCode(views[viewName].source());
  
  // update renderView
  var code = views[viewName].source().join('');
  code = code.replace(',', '');
  views['renderView'].innerHTML = code;   
  var output = views[viewName].output;
  views['outputView'].innerHTML = '';
  var pre = document.createElement('pre');
  for (var i = 0; output[i]; i++) {
    pre.appendChild(document.createTextNode(output[i]));
    pre.appendChild(document.createTextNode('\n'));                
    views['outputView'].appendChild(pre);
  }
}
function renderCode(codedemo){
  var out = '';          
  out += '';
  var hlString = '';
  
  for(var i=0;codedemo[i];i++){                          
  if (codedemo[i].search('highlight') !== -1) {
    hlString = ' class="highlight"';
  } else {
    if (i%2==0)
    hlString = ' class="even"';
  }        
  out += ''+encode(codedemo[i])+''
  hlString = ''
  }
  out+='
';
  return out;
}        
function encode(str){
  str = str.replace(/  str = str.replace(/>/g,'>');
  str = str.replace(/"/g,'"');
  return str;
}
})();   





   
   
yui_2.7.0b.zip( 4,431 k)