DOM Exploring the Dom Collection's API
このページでは、DOM APIのおさらいと追加がまとめられている。
DomのAPIについては、APIドキュメントを参照だが、下の表にあるように便利そうなDOMハンドリングの関数が並んでいる。
YAHOO.util.Dom.get("id_name")は、id名一発で要素を取得するメソッド。
| YAHOO.util.Domのメソッド | 意味 |
| get("id_name") | 該当するidの要素を取得。配列を引数にすることも可。 |
| getAncestorByTagName('div', 'one') | id="one"の要素の親のdivタグ要素 |
| getAncestorByClassName('listItem') | class="listItem"要素の親要素 |
| getChildren('demoList') | id="demoList"の子要素 |
| getElementsBy(getElementsByClassName('specialItems'),'li','demo') | id="demo"から探索をスタートし、タグliのなかでgetElementsByClassName('specialItems')を実行する |
| getFirstChild('demoList') | id="demoList"の最初の子要素を取得する |
| getLastChild('demoList') | id="demoList"の最後の子要素を取得する |
| getNextSibling('one') | id="one"の次の兄弟要素を取得する |
| getPreviousSibling('two') | id="two"の前の兄弟要素を取得する |
| isAncestor('demo', 'one') | id="demo"はid="one"の親要素であるか |
| insertBefore(li, 'one') | liタグのid="one"の前に兄弟要素を追加 |
| insertAfter(li, 'one') | liタグのid="one"の後に兄弟要素を追加 |
この画面は、メソッドの動きを例示するものであるが、少々こみいっているので、下にソースコード（簡単な注釈入り）を書いておく。
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>Ajax_Sampling</TITLE> <!-- #style で id=foo,barの全ての要素に適用する。 --> <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部のマージンとパディングの設定は要素（element）の位置を決める のにエラーの原因となることが多いので非推奨。 YUIのCSSでは、これをともに0に設定するのを基本にしている */ 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; } </style> <!-- 読み込むjs --> <script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" > </script> <script type="text/javascript" src="scripts/yui/dom/dom-min.js" > </script> <script type="text/javascript" src="scripts/yui/event/event-min.js" > </script> <script type="text/javascript"> init = function() { YAHOO.util.Event.addListener("functionList", "click", function(evt) { var target = YAHOO.util.Event.getTarget(evt); // デフォルトの動き（foo.htmlへ飛ぶ）を抑止する。 YAHOO.util.Event.preventDefault(evt); if(evt.type === 'click' && target && target.parentNode.id) { // target.parentNode.id // = a要素の親のli要素のidをとってsetViewする。 setView(target.parentNode.id); } }); // constant codedemo var codedemo = []; codedemo.push('<div id="demo">'); codedemo.push(' <ul id="demoList" class="parent">'); codedemo.push(' <li id="one" class="listItem">item 1</li>'); codedemo.push(' <li id="two" class="listItem">item 2</li>'); codedemo.push(' <li id="three" class="specialItem">item 3</li>'); codedemo.push(' </ul>'); codedemo.push('</div>'); // views object var views = { // viewオブジェクト // プロパティー名 : プロパティー値（連想配列） で定義。 sourceView: document.getElementById('source'), renderView: document.getElementById('render'), outputView: document.getElementById('output'), defaultView: { // defaultViewオブジェクト // プロパティー名 : プロパティー値（連想配列） で定義。 // source: 関数, output : Array[1] source: function() { return codedemo; }, output: ['Please select a function.'] }, get1 : { source: function(){ // nullの配列をcodedemoにconcatし、tempへ入れる。 // = codedemoをtempにコピーする。 var temp = [].concat(codedemo); // classname を highlight に置き換える。 temp[0] = '<div id="demo" class="highlight">'; return temp; }, output: ['<div id="demo" class="highlight">'] }, get2 : { source: function(){ var temp = [].concat(codedemo); temp[0] = '<div id="demo" class="highlight">'; temp[1] = ' <ul id="demoList" class="parent highlight">'; return temp; }, output: ['<div id="demo" class="highlight">', '<ul id="demoList" class="parent highlight">'] }, getAncestorByTagName : { source: function() { var temp = [].concat(codedemo); temp[0] = '<div id="demo" class="highlight">'; return temp; }, output: ['<div id="demo" class="highlight">'] }, getAncestorByClassName : { source: function (){ var temp = [].concat(codedemo); temp[1]=' <ul id="demoList" class="parent highlight">'; return temp; }, output: ['<ul id="demoList" class="parent highlight">'] }, getChildren : { source: function (){ var temp = [].concat(codedemo); temp[2]=' <li id="one" class="listItem highlight"> item 1</li>'; temp[3]=' <li id="two" class="listItem highlight"> item 2</li>'; temp[4]=' <li id="three" class="specialItem highlight"> item 3</li>'; return temp; }, output: ['<li id="one" class="listItem">first</li>', '<li id="two" class="listItem highlight">second</li>' , '<li id="three" class="specialItem highlight">item 3</li>'] }, getFirstChild : { source: function (){ var temp =[].concat(codedemo); temp[2]=' <li id="one" class="listItem highlight">item 1</li>'; return temp; }, output: ['<li id="one" class="listItem">'] }, getLastChild : { source: function(){ var temp =[].concat(codedemo); temp[4] = ' <li id="three" class="specialItem highlight">item 3</li>'; return temp; }, output : ['<li id="three" class="specialItem">'] }, getNextSibling : { source: function(){ var temp = [].concat(codedemo); temp[3]=' <li id="two" class="listItem highlight">item 2</li>'; return temp; }, output: ['<li id="two" class="listItem">'] }, getPreviousSibling : { source: function(){ var temp = [].concat(codedemo); temp[2]=' <li id="one" class="listItem highlight">item 1</li>'; return temp; }, output: ['<li id="one" class="listItem">'] }, isAncestor : { source : function(){ var temp = [].concat(codedemo); temp[0] = '<div id="demo" "highlight">'; temp[2]=' <li id="one" class="listItem highlight">item 1</li>'; return temp; }, output: ['true'] }, insertBefore : { source : function(){ var temp = [].concat(codedemo); //tempの3番目から0個の要素を入れ替える。（つまり、3,4番目の間に追加） temp.splice(2,0, ' <li id="four" class ="listItem highlight">new Item</li>'); return temp; }, output: ['<li id="four">'] }, insertAfter: { source : function(){ var temp = [].concat(codedemo); //tempの4番目から0個の要素を入れ替える。（つまり、4,5番目の間に追加） temp.splice(3,0, ' <li id="four" class ="listItem highlight">new Item</li>'); return temp; }, output: ['<li id="four">'] }, getElementsBy : { source: function (){ var temp = [].concat(codedemo); temp[4] = ' <li id="three" class="specialItem highlight">item 3</li>'; return temp; }, output: ['<li id="three" class="specialItem">item 3</li>'] } }; // 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 += '<pre><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></pre>'; return out; } function encode(str){ str = str.replace(/</g,'<'); str = str.replace(/>/g,'>'); str = str.replace(/"/g,'"'); return str; } } </script> </HEAD> <BODY onload=init()> <h3>Source</h3> <div id="source" class="contentContainer"> <pre> </pre> </div> <h3>Functions</h3> <div id="functions" class="contentContainer"> <ul id="functionList"> <li id="get1"><a href="foo.html">get('demo')</a></li> <li id="get2"><a href="foo.html">get(['demo', 'demoList'])</a></li> <li id="getAncestorByTagName"><a href="foo.html"> getAncestorByTagName('div', 'one')</a></li> <li id="getAncestorByClassName"><a href="foo.html"> getAncestorByClassName('listItem')</a></li> <li id="getChildren"><a href="foo.html"> getChildren('demoList')</a></li> <li id="getElementsBy"><a href="foo.html"> getElementsBy(<em>getElementsByClassName('specialItems')</em>, 'li', 'demo')</a></li> <li id="getFirstChild"><a href="foo.html"> getFirstChild('demoList')</a></li> <li id="getLastChild"><a href="foo.html"> getLastChild('demoList')</a></li> <li id="getNextSibling"><a href="foo.html"> getNextSibling('one')</a></li> <li id="getPreviousSibling"><a href="foo.html"> getPreviousSibling('two')</a></li> <li id="isAncestor"><a href="foo.html"> isAncestor('demo', 'one')</a></li> <li id="insertBefore"><a href="foo.html"> insertBefore(<em>li</em>, 'one')</a></li> <li id="insertAfter"><a href="foo.html">insertAfter (<em>li</em>, 'one')</a></li> </ul> </div> <h3>Render</h3> <div id="render" class="contentContainer"> </div> <h3>Output</h3> <div id="output" class="contentContainer"> </div> </BODY> </HTML>
