Содержание

1 DOM API: getAncestorByClassName("listItem")
2 Exploring the Dom Collection"s API
- 2.1 Source
- 2.2 Functions
- 2.3 Render
- 2.4 Output
- 2.5 DOM API: getAncestorByTagName("div", "one")
3 Exploring the Dom Collection"s API
- 3.1 Source
- 3.2 Functions
- 3.3 Render
- 3.4 Output
- 3.5 DOM API: getChildren("demoList")
4 Exploring the Dom Collection"s API
- 4.1 Source
- 4.2 Functions
- 4.3 Render
- 4.4 Output
- 4.5 DOM API: getElementsBy()
5 Exploring the Dom Collection"s API
- 5.1 Source
- 5.2 Functions
- 5.3 Render
- 5.4 Output
- 5.5 DOM API: getElementsByClassName("specialItems")
6 Exploring the Dom Collection"s API
- 6.1 Source
- 6.2 Functions
- 6.3 Render
- 6.4 Output
- 6.5 DOM API: getFirstChild("demoList")
7 Exploring the Dom Collection"s API
- 7.1 Source
- 7.2 Functions
- 7.3 Render
- 7.4 Output
- 7.5 DOM API: get(id)
8 Exploring the Dom Collection"s API
- 8.1 Source
- 8.2 Functions
- 8.3 Render
- 8.4 Output
- 8.5 DOM API: get(id, child id)
9 Exploring the Dom Collection"s API
- 9.1 Source
- 9.2 Functions
- 9.3 Render
- 9.4 Output
- 9.5 Dynamically update table cell
10 Type-Checking Your Data
- 10.1 getLastChild("demoList")
11 Exploring the Dom Collection"s API
- 11.1 Source
- 11.2 Functions
- 11.3 Render
- 11.4 Output
- 11.5 getNextSibling("one")
12 Exploring the Dom Collection"s API
- 12.1 Source
- 12.2 Functions
- 12.3 Render
- 12.4 Output
- 12.5 getPreviousSibling("two")
13 Exploring the Dom Collection"s API
- 13.1 Source
- 13.2 Functions
- 13.3 Render
- 13.4 Output
- 13.5 insertAfter(li, "one")
14 Exploring the Dom Collection"s API
- 14.1 Source
- 14.2 Functions
- 14.3 Render
- 14.4 Output
- 14.5 insertBefore(li, "one")
15 Exploring the Dom Collection"s API
- 15.1 Source
- 15.2 Functions
- 15.3 Render
- 15.4 Output
- 15.5 isAncestor("demo", "one")
16 Exploring the Dom Collection"s API
- 16.1 Source
- 16.2 Functions
- 16.3 Render
- 16.4 Output
- 16.5 Use Dom"s getStyle method to get the background color of the red element and pass it to the setStyle method
17 Using getStyle
- 17.1 Use Dom"s getXY method to get the position of the red element and pass it to the setXY method
18 Using getXY
- 18.1 Use Dom"s hasClass method to test if the element has the class baz applied.
19 Using hasClass
- 19.1 Use Dom"s removeClass method to remove the class baz from the element.
20 Using removeClass
- 20.1 Use Dom"s setStyle method to set the opacity of the element.
21 Using setStyle
- 21.1 Use Dom"s setXY method to position the element to the click point.
22 Using setXY
- 22.1 Using filter
23 Using filter

DOM API: getAncestorByClassName("listItem")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">getAncestorByClassName("listItem")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

DOM API: getAncestorByTagName("div", "one")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">getAncestorByTagName("div", "one")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

DOM API: getChildren("demoList")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">getChildren("demoList")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

DOM API: getElementsBy()

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">getElementsBy(getElementsByClassName("specialItems"), "li", "demo")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

DOM API: getElementsByClassName("specialItems")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">getElementsBy(getElementsByClassName("specialItems"), "li", "demo")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

DOM API: getFirstChild("demoList")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">getFirstChild("demoList")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

DOM API: get(id)

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">get("demo")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

DOM API: get(id, child id)

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">get(["demo", "demoList"])</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

Dynamically update table cell

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Type-Checking Your Data</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

   #demo {
       border-collapse: collapse;
   }
   #demo th {
       background: #E76300;
       color: #fff;
       padding: .2em 1em;
       border: 1px solid #ccc;
   }
   #demo td {
       padding: .2em 1ex;
       border: 1px solid #ccc;
       text-align: center;
   }
   #demo code {
       background: #eee;
       display: block;
       text-align: left;
   }

</style>

</head> <body class=" yui-skin-sam">

Type-Checking Your Data

The <a href="http://developer.yahoo.ru/yui/yahoo/">Yahoo Global Object</a> includes several useful type-checking methods in the YAHOO.lang object. Click the Check button in each row to evaluate the data.

Data	isObject	isArray	isFunction
`null<code></td>`	<input type="button" name="demo-1" id="demo-1" value="check"/></td> </tr>
<code>[] or new Array()	<input type="button" name="demo-2" id="demo-2" value="check"/>
`{} or new Object()`	<input type="button" name="demo-3" id="demo-3" value="check"/>
`function Foo() {}`	<input type="button" name="demo-4" id="demo-4" value="check"/>
`new Foo()`	<input type="button" name="demo-5" id="demo-5" value="check"/>
`elem.getElementsByTagName("p")`	<input type="button" name="demo-6" id="demo-6" value="check"/>
`YAHOO.util.Dom. getElementsByClassName( "foo","p",elem)`	<input type="button" name="demo-7" id="demo-7" value="check"/>

   YAHOO.namespace("example");
   YAHOO.example.checkType = function (val) {
       return {
           "object"  : YAHOO.lang.isObject(val),
           "array"   : YAHOO.lang.isArray(val),
           "function": YAHOO.lang.isFunction(val)
       };
   }
   YAHOO.example.populateRow = function (e, data) {
       var cell = this.parentNode,
           row  = cell.parentNode;
       row.removeChild(cell);
       var td0 = document.createElement("td"),
           td1 = td0.cloneNode(false),
           td2 = td0.cloneNode(false);
       var results = YAHOO.example.checkType(data);
       td0.appendChild(document.createTextNode(
           results["object"] ?   "Y" : "N"));
       td1.appendChild(document.createTextNode(
           results["array"] ?    "Y" : "N"));
       td2.appendChild(document.createTextNode(
           results["function"] ? "Y" : "N"));
       row.appendChild(td0);
       row.appendChild(td1);
       row.appendChild(td2);
   }
   var foo = function () {};
   var f = document.getElementById("demo");
   YAHOO.util.Event.on("demo-1","click",YAHOO.example.populateRow, null);
   YAHOO.util.Event.on("demo-2","click",YAHOO.example.populateRow, []);
   YAHOO.util.Event.on("demo-3","click",YAHOO.example.populateRow, {});
   YAHOO.util.Event.on("demo-4","click",YAHOO.example.populateRow, foo);
   YAHOO.util.Event.on("demo-5","click",YAHOO.example.populateRow, new foo());
   YAHOO.util.Event.on("demo-6","click",YAHOO.example.populateRow,
       f.getElementsByTagName("tr"));
   YAHOO.util.Event.on("demo-7","click",YAHOO.example.populateRow,
       YAHOO.util.Dom.getElementsByClassName("foo","td",f));

</script>

</body> </html>

 </source>

getLastChild("demoList")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">getLastChild("demoList")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

getNextSibling("one")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">getNextSibling("one")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

getPreviousSibling("two")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">getPreviousSibling("two")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

insertAfter(li, "one")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">insertAfter(li, "one")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

insertBefore(li, "one")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">insertBefore(li, "one")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

isAncestor("demo", "one")

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Exploring the Dom Collection"s API</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

 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;

}

</style>

</head> <body class=" yui-skin-sam">

   This example was contributed by <a href="http://www.wait-till-i.ru/">Christian Heilmann</a> and members of his <a href="http://yuiblog.ru/blog/2007/12/06/juku/">Juku</a> 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

<a href="foo.html">isAncestor("demo", "one")</a>

Render

Output

 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("

item 1
item 2
item 3

"); 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);

";

     return temp;
   },

output: ["

"]

 },
 get2 : {
   source: function(){
     var temp = [].concat(codedemo);

temp[0] = "

"; temp[1] = "

", "

 },
 getAncestorByTagName : {
   source: function() {
     var temp = [].concat(codedemo);

";

     return temp;
   },

output: ["

"]

 },
 getAncestorByClassName : {
   source: function (){
       var temp = [].concat(codedemo);

temp[1]="

item 1
item 2
item 3

      return temp;
    },

first
second
item 3

  },
  getFirstChild : {
 source: function (){
   var temp =[].concat(codedemo);

item 1

   return temp;
 },

"] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = "
item 3

   return temp;
 },

"] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]="
item 2

   return temp;
  },

"] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]="
item 1

   return temp;
  },

"] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = "
"; temp[2]="
item 1

   return temp;
 },
 output: ["true"]
  },
  insertBefore : {
   source : function(){
   var temp = [].concat(codedemo);

new Item

   return temp;
 },

"] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); temp.splice(3,0,"
new Item

   return temp;
 },

"] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] ="
item 3

       return temp;
   },

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 = "";

<ol>";
  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 += "<li" + hlString + "><code>"+encode(codedemo[i])+"</code></li>"
  hlString = ""
  }
  out+="</ol>

 return out;

} function encode(str){

 str = str.replace(/</g,"<");
 str = str.replace(/>/g,">");
 str = str.replace(/"/g,""");
 return str;

} })(); </script>

</body> </html>

 </source>

Use Dom"s getStyle method to get the background color of the red element and pass it to the setStyle method

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Using getStyle</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

foo {

   background-color:#00f;
   height:10px;
   width:10px;

}

bar {

   width:100px;
   height:100px;
   background-color:#f00;
   margin:0 0 1em 100px;

} </style>

</head> <body class=" yui-skin-sam">

Using getStyle

Clicking the button will use Dom"s getStyle method to get the background color of the red element and pass it to the setStyle method, which will set the blue element"s background to the same color.

<button id="demo-run">run</button> <script type="text/javascript"> (function() {

   var setBgColor = function() {
       var bgcolor = YAHOO.util.Dom.getStyle("bar", "backgroundColor");
       YAHOO.util.Dom.setStyle("foo", "backgroundColor", bgcolor);
   };
   YAHOO.util.Event.on("demo-run", "click", setBgColor);
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html>

 </source>

Use Dom"s getXY method to get the position of the red element and pass it to the setXY method

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Using getXY</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

foo {

   background-color:#00f;
   height:10px;
   width:10px;

}

bar {

   background-color:#f00;
   height:100px;
   width:100px;
   margin:0 100px 1em;

} </style>

</head> <body class=" yui-skin-sam">

Using getXY

Clicking the button will use Dom"s getXY method to get the position of the red element and pass it to the setXY method, which will move the blue element to that position.

<button id="demo-run">run</button> <script type="text/javascript"> (function() {

   var move = function() {
       var xy = YAHOO.util.Dom.getXY("bar");
       YAHOO.util.Dom.setXY("foo", xy);
   };
   YAHOO.util.Event.on("demo-run", "click", move);
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html>

 </source>

Use Dom"s hasClass method to test if the element has the class baz applied.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Using hasClass</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

foo {

   margin-bottom:1em;

} </style>

</head> <body class=" yui-skin-sam">

Using hasClass

Clicking the button will use Dom"s hasClass method to test if the element has the class baz applied.

foo

<button id="demo-run">run</button> <script type="text/javascript"> (function() {

   var testClass = function(e) {
       alert(YAHOO.util.Dom.hasClass("foo", "baz"));
   };
   YAHOO.util.Event.on("demo-run", "click", testClass);
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html>

 </source>

Use Dom"s removeClass method to remove the class baz from the element.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Using removeClass</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

foo {

   margin-bottom:1em;

} </style>

</head> <body class=" yui-skin-sam">

Using removeClass

Clicking the button will use Dom"s removeClass method to remove the class baz from the element.

foo

<button id="demo-run">run</button> <script type="text/javascript"> (function() {

   var removeClass = function(e) {
       YAHOO.util.Dom.removeClass("foo", "baz");
       alert(YAHOO.util.Dom.get("foo").className);
   };
   YAHOO.util.Event.on("demo-run", "click", removeClass);
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html>

 </source>

Use Dom"s setStyle method to set the opacity of the element.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Using setStyle</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

foo {

   background-color:#00f;
   color:#fff;
   height:100px;
   width:100px;
   margin-bottom:1em;

} </style>

</head> <body class=" yui-skin-sam">

Using setStyle

Clicking the button will use Dom"s setStyle method to set the opacity of the element.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<button id="demo-run">run</button> <script type="text/javascript"> (function() {

   var fade = function() {
       YAHOO.util.Dom.setStyle("foo", "opacity", 0.5);
   };
   YAHOO.util.Event.on("demo-run", "click", fade);
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html>

 </source>

Use Dom"s setXY method to position the element to the click point.

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Using setXY</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>

demo {

   background-color:#00f;
   height:10px;
   width:10px;
   margin-bottom:1em;

} </style>

</head> <body class=" yui-skin-sam">

Using setXY

Clicking the document will use Dom"s setXY method to position the element to the click point.

foo {width:10px; height:10px;background-color:#00f;}

</style>

   var move = function(e) {
       YAHOO.util.Dom.setXY("foo", YAHOO.util.Event.getXY(e));
   };
   YAHOO.util.Event.on(document, "click", move);
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html>

 </source>

Using filter

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Using filter</title> <style type="text/css"> /*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;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/selector/selector-min.js"></script>

selector-demo ul {

   float:left;

}

selector-demo ol {

   clear:both;

} </style>

</head> <body class=" yui-skin-sam">

Using filter

Clicking the button will alert the number of items with the class of "selected" applied.

lorem
ipsum
dolor
sit

lorem
ipsum
dolor
sit

lorem
ipsum
dolor
sit

lorem
ipsum
dolor
sit

   <button id="demo-run">run</button>

   var nodes = document.getElementById("selector-demo").getElementsByTagName("li");
   var handleClick = function(e) {
       nodes = YAHOO.util.Selector.filter(nodes, ".selected");
       alert(nodes.length); 
   };
   YAHOO.util.Event.on("demo-run", "click", handleClick);
   YAHOO.log("The example has finished loading; as you interact with it, you"ll see log messages appearing here.", "info", "example");

})(); </script>

</body> </html>

 </source>

http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip

JavaScript DHTML/YUI Library/DOM

Содержание

DOM API: getAncestorByClassName("listItem")

Exploring the Dom Collection"s API

Source

Functions

Render

Output

DOM API: getAncestorByTagName("div", "one")

Exploring the Dom Collection"s API

Source

Functions

Render

Output

DOM API: getChildren("demoList")

Exploring the Dom Collection"s API

Source

Functions

Render

Output

DOM API: getElementsBy()

Exploring the Dom Collection"s API

Source

Functions

Render

Output

DOM API: getElementsByClassName("specialItems")

Exploring the Dom Collection"s API

Source

Functions

Render

Output

DOM API: getFirstChild("demoList")

Exploring the Dom Collection"s API

Source

Functions

Render

Output

DOM API: get(id)

Exploring the Dom Collection"s API

Source

Functions

Render

Output

DOM API: get(id, child id)

Exploring the Dom Collection"s API

Source

Functions

Render

Output

Dynamically update table cell

Type-Checking Your Data

getLastChild("demoList")

Exploring the Dom Collection"s API

Source

Functions

Render

Output

getNextSibling("one")

Exploring the Dom Collection"s API

Source

Functions

Render

Output

getPreviousSibling("two")

Exploring the Dom Collection"s API

Source

Functions

Render

Output

insertAfter(li, "one")

Exploring the Dom Collection"s API

Source

Functions

Render

Output

insertBefore(li, "one")

Exploring the Dom Collection"s API

Source

Functions