DOM(Document Object Model): ElementDOMメソッド
- appendChild()〔ノードを末尾に追加〕
- cloneNode()〔ノードを複製する〕
- createComment()〔コメントノードを生成する〕
- createElement()〔エレメントノードを生成する〕
- createTextNode()〔テキストノードを生成する〕
- getAttribute()〔ノードの属性値を取得〕
- getElementById()〔特定のID名の要素を取得〕
- getElementsByTagName()〔指定した要素名の全てのノードリストを取得〕
- hasChildNodes()〔子ノードがあるか調べる〕
- insertBefore()〔任意の位置にノードを挿入する〕
- replaceChild()〔ノードを置換する〕
- removeChild()〔ノードを削除する〕
- setAttribute()〔ノードの属性値を設定〕
appendChild()
ノードを末尾に追加
unknown
対象ノードの子ノードリストの末尾に新しいノードを追加し、追加した新しいノードを返します。 第1引数newNodeに追加するノードを指定します。
任意の位置にノードを追加する場合 ⇒ insertBefore()メソッド
<form action="#"> <select id="pulldown"> <option value="" selected>---------</option> </select> <input type="button" value="プルダウン生成" onclick="fCreatePulldownMenuA()" /> </form> <script type="text/javascript"> function fCreatePulldownMenuA(){ var todofuken=["---------","北海道","本州","四国","九州","沖縄"]; var selObj=document.getElementById("pulldown"); var length=selObj.childNodes.length-1; if(length>0){ /* ノード削除:プルダウン初期化 */ for(var i=length; i>0; i--){ var childObj=selObj.childNodes[i]; if(childObj.nodeName!=undefined){ selObj.removeChild(childObj); } } } /* ノード生成:OPTION要素生成 */ for(var i in todofuken){ var optObj=document.createElement("option"); if(navigator.userAgent.indexOf("MSIE")>-1){ optObj.innerText=todofuken[i]; }else{ optObj.textContent=todofuken[i]; } /* ノード追加 */ selObj.appendChild(optObj); } } </script>
cloneNode()
ノードを複製する
unknown
対象ノードを複製し、複製したノードを返します。
第1引数deepにTRUEを指定した場合は、対象ノードの全ての子ノードが複製されます。 FALSEを指定した場合は、対象ノードのみが複製されます。 複製しただけではページ上に表示されないので、appendChild()メソッドやinsertBefore()メソッドなどを使って複製したノードをページ上のノードに連結する必要があります。
以下の例では、 第1引数にTRUEを指定し、LI要素の子ノード(INPUT要素)を含めて複製しています。
<!-- ex. 第1引数にTRUEを指定し、LI要素の子ノード(INPUT要素)を含めて複製する。 --> <style type="text/css"> ol#boxies { margin:0; padding:0 0 0 26px; list-style-type:decimal; } ol#boxies li { margin:0 0 5px 0; padding:0; font-weight:bold; } ol#boxies li.bg01 input { border:1px solid #666; background-color:#eee; } ol#boxies li.bg02 input { border:1px solid #666; background-color:#ffffff; } </style> <form action="#"> <p><input type="button" value="ノード複製" onclick="fCopyNode()" /></p> <ol id="boxies"> <li id="mbox1" class="bg02"><input type="text" name="t1" size="50" maxlength="10" /></li> </ol> </form> <script type="text/javascript"> function fCopyNode(){ /* コピー元ノード */ var copyObj=document.getElementById("mbox1"); /* クローンノード(ノード複製) */ var cloneObj=copyObj.cloneNode(true); /* 親ノード */ var parentObj=document.getElementById("boxies"); /* クローンノードにID名、クラス名を付与 */ var nodeLen=parentObj.childNodes.length+1; cloneObj.id="mbox"+nodeLen; cloneObj.className="bg0"+(parseInt(nodeLen%2)+1) /* ノード追加 */ parentObj.appendChild(cloneObj); } </script>
createComment()
コメントノードを生成する
unknown
コメントノードを生成します。
第1引数commentにはコメントを指定します。
<form action="#"> <p><input type="button" value="コメントノード生成" onclick="fCreateCommentNode()" /></p> <div id="txtDiv">あああああああああ</div> <p id="resCreateCommentNode"></p> </form> <script type="text/javascript"> function fCreateCommentNode(){ /* 親ノード */ var parentObj=document.getElementById("txtDiv"); /* コメントノード生成 */ var commentNode=document.createComment("コメントです"); /* 親ノードにコメントノードを追加 */ parentObj.appendChild(commentNode); /* コメントノードが生成されているか確認 */ var s="【確認】<br>\n"; for(var i in parentObj.childNodes){ var childObj=parentObj.childNodes[i]; if(childObj!=undefined){ s+=childObj.nodeName+"<br \/>\n"; } } document.getElementById("resCreateCommentNode").innerHTML=s; } </script>
createElement()
エレメントノードを生成する
unknown
第1引数element-nameに指定した要素名のエレメントノードを生成します。 要素名は、P、DIV、SPANのように大文字で指定します。
ページ上に生成したエレメントノードを表示するには、appendChild()メソッドやinsertBefore()メソッドなどを使ってノードをページ上のノードに連結させます。
<form action="#"> <p><input type="button" value="都道府県プルダウン生成" onclick="fCreateElement()" /></p> <div id="resCreateElement"></div> </form> <script type="text/javascript"> function fCreateElement(){ var todofuken={ "0" : "---------", "hokkaido" : "北海道", "honsyu" : "本州", "sikoku" : "四国", "kyusyu" : "九州", "okinawa" : "沖縄" }; /* 親ノード */ var parentObj=document.getElementById("resCreateElement"); /* 既に生成されている場合はなにもしない */ if(document.getElementById("todofuken")!=undefined) return false; /* SELECT要素生成 */ var selObj=document.createElement("SELECT"); /* SELECT要素にid属性を設定 */ selObj.setAttribute("id","todofuken"); /* 親ノードの子ノードリストにSELECT要素を追加 */ selObj=parentObj.appendChild(selObj); for(var i in todofuken){ /* OPTION要素生成 */ var optObj=document.createElement("OPTION"); /* OPTION要素にvalue属性を設定 */ optObj.setAttribute("value",i); /* OPTION要素にテキストノード追加 */ optObj.appendChild(document.createTextNode(todofuken[i])); /* SELECT要素の子ノードリストにOPTION要素を追加 */ selObj.appendChild(optObj); } } </script>
createTextNode()
テキストノードを生成する
unknown
第1引数textに指定したテキスト(文字列)のテキストノードを生成します。
ページ上に生成したテキストノードを表示するには、appendChild()メソッドやinsertBefore()メソッドなどを使ってノードをページ上のノードに連結させます。
<style type="text/css"> blockquote#bq { margin:0; padding:10px 0; } blockquote#bq p { margin:10px; padding:0; line-height:1.2; } blockquote#bq p q{ margin:0 2px; padding:0; font-style:italic; } </style> <form action="#"> <p><input type="button" value="引用元リンク生成" onclick="fGetQuote()" /></p> </form> <blockquote id="bq" title="JavaScript - Wikipedia" cite="http://ja.wikipedia.org/wiki/Javascript"> <p> <q>JavaScript</q>(<q>ジャバスクリプト</q>、<q>ジャヴァスクリプト</q>、略称:<q>JS</q>)はスクリプト言語である。 主にWebブラウザ上で動作し、HTMLの動的書き換えや入力フォームの自動補完など、Webページの使用感向上を目的として使用されたり、リッチクライアントアプリケーションの構築に使われる。 </p> </blockquote> <script type="text/javascript"> function fGetQuote(){ /* 親ノード(blockquote) */ var bqObj=document.getElementById("bq"); /* 親ノードのtitle属性 */ var title=bqObj.getAttribute("title"); /* 親ノードのcite属性 */ var cite=bqObj.getAttribute("cite"); /* 既に引用元リンクが存在したら作成しない */ if(document.getElementById("bqLink")!=null) return false; /* cite属性が空でない場合 */ if(cite!=""){ /* a要素を作成し、href・title・id属性を設定 */ var aObj=document.createElement("a"); aObj.setAttribute("href", cite); aObj.setAttribute("title", title); aObj.setAttribute("id", "bqLink"); /* a要素にテキストノードを追加 */ aObj.appendChild(document.createTextNode(title)); /* p要素を作成し、テキストノードを追加 */ var tObj=document.createTextNode("引用元:"); var pObj=document.createElement("p"); pObj.appendChild(tObj); pObj.appendChild(aObj); /* 親ノードに作成した引用元リンクを追加 */ bqObj.appendChild(pObj); } } </script>
JavaScript(ジャバスクリプト、ジャヴァスクリプト、略称:JS)はスクリプト言語である。 主にWebブラウザ上で動作し、HTMLの動的書き換えや入力フォームの自動補完など、Webページの使用感向上を目的として使用されたり、リッチクライアントアプリケーションの構築に使われる。
getAttribute()
ノードの属性値を取得
unknown
対象ノードの属性値を取得します。
第1引数nameには、取得する属性名を指定します。
属性値を設定する場合 ⇒ setAttribute()メソッド
<ul id="searchLists2"> <li><a href="http://www.yahoo.co.jp" title="YAHOO! JAPAN">YAHOO検索</a></li> <li><a href="http://www.google.co.jp" title="Google">Google検索</a></li> </ul> <form action="#"> <input type="button" value="a要素の属性値を取得" onclick="fGetAttribute()" /> </form> <p id="resGetAttribute"></p> <script type="text/javascript"> function fGetAttribute(){ var s=""; /* 親ノード */ var parentObj=document.getElementById("searchLists2"); for(var i in parentObj.childNodes){ var childObj=parentObj.childNodes[i]; if(childObj!=undefined){ /* LI要素 */ if(childObj.nodeName=="LI"){ for(var j in childObj.childNodes){ /* A要素 */ var aObj=childObj.childNodes[j]; if(aObj!=undefined && aObj.nodeName=="A"){ s+="<p>"; /* href属性取得 */ s+="href: "+aObj.getAttribute("href")+"<br \/>"; /* title属性取得 */ s+="title:"+aObj.getAttribute("title")+"<br \/>"; /* リンクテキスト取得 */ s+="テキスト:"+aObj.firstChild.nodeValue; s+="<\/p>\n"; } } } } } document.getElementById("resGetAttribute").innerHTML=s; } </script>
getElementById()
特定のID名の要素を取得
unknown
指定したID名の要素オブジェクトを返します。指定したID名の要素がない場合はNULLを返します。 第1引数idには、要素のID名を指定します。
<form action="#"> <input type="button" onclick="fChgPhotoSize()" value="画像サイズ取得" /> </form> <p> <img src="/content/img/pic1-thumb.png" alt="写真1" id="p1" /> <img src="/content/img/dog_mini.gif" alt="写真2" id="p2" /> <img src="/content/img/deepblue.png" alt="写真3" id="p3" /> </p> <script type="text/javascript"> function fChgPhotoSize(){ var photoAry=new Array( document.getElementById("p1"), document.getElementById("p2"), document.getElementById("p3") ); var s=""; /* 画像の幅と高さを取得 */ for(var i=0; i<photoAry.length; i++){ var photo=photoAry[i]; s+="ID名:"+photo.id+"\t"; s+="幅:"+photo.width+"px\t"; s+="高さ:"+photo.height+"px\n"; } /* 取得したサイズを書き出し */ document.getElementById("res_photosize").innerHTML="<pre>"+s+"</pre>"; } </script> <div id="res_photosize"></div>
getElementsByTagName()
指定した要素名の全てのノードリストを取得
unknown
対象ノード内にある指定した要素名の全エレメントノードの配列(ノードリスト)を取得します。 第1引数nameには、要素名を大文字で指定します。
例えば以下の例のようにページ内に存在するDIV要素のID名を取得することができます。
ノードリストは配列なので、各ノードにはノードリストを格納した変数[参照番号]
でアクセスできます。
<form action="#"> <input type="button" value="このページのDIV要素を取得" onclick="fGetElementsByTagName('DIV')" /> <div id="resGetElementsByTagName"></div> </form> <script type="text/javascript"> function fGetElementsByTagName(tagName){ var s=""; var nodeList=document.getElementsByTagName(tagName); s+="このページにDIV要素は "+nodeList.length+" ありますよ<br \/>"; s+="そのうちID名があるのは以下のとおり<br \/>"; for(var i in nodeList){ if(nodeList[i].id){ s+=nodeList[i].id+"<br>"; } } document.getElementById("resGetElementsByTagName").innerHTML=s; } </script>
hasChildNodes()
子ノードがあるか調べる
unknown
対象ノードに子ノードがあるか調べ、子ノードがある場合にTRUE、ない場合にFALSEを返します。
<form action="#"> <select id="drinks"> <option>コーヒー</option> <option>ジュース</option> <option>アルコール</option> </select> <input type="button" value="子ノードがあるか調べ、あったらアルコールを削除" onclick="fHasChildNodes()" /><br> </form> <script type="text/javascript"> function fHasChildNodes(){ /* 親ノード */ var parentObj=document.getElementById("drinks"); /* 子ノードの存在チェック */ var chk=parentObj.hasChildNodes(); /* 子ノードが存在する場合 */ if(chk==true){ for(var i in parentObj.childNodes){ var childObj=parentObj.childNodes[i]; /* 子ノードのノード名がOPTIONの場合 */ if(childObj.nodeName=="OPTION"){ /* ノードの値がアルコールだったら */ if(childObj.firstChild.nodeValue=="アルコール"){ /* プルダウンから削除 */ parentObj.removeChild(childObj); } } } } } </script>
insertBefore()
任意の位置にノードを挿入する
unknown
対象ノードの指定した子ノードの前に新しいノードを挿入し、挿入する新しいノードを返します。
第1引数newChildに挿入する子ノードを指定します。
第2引数refChildに挿入位置の子ノードを指定します。
appendChild()メソッドと異なり任意の位置に子ノードを挿入できます。 第2引数refChildがNULLの場合は、子ノードリストの末尾に挿入されます(appendChild()メソッドと同じ)。
<form action="#"> <p> <input type="button" value="顔アイコン1" onclick="fInsertBefore('emoticon117')" /> <input type="button" value="顔アイコン2" onclick="fInsertBefore('good4')" /> <input type="button" value="顔アイコン3" onclick="fInsertBefore('android11')" /> </p> </form> <div id="resInsertBefore">←ここにアイコンが挿入されますよ</div> <script type="text/javascript"> function fInsertBefore(iconName){ /* 親ノード */ var parentObj=document.getElementById("resInsertBefore"); /* IMG要素生成 */ var iconObj=document.createElement("IMG"); /* IMG要素のsrc属性を設定 */ iconObj.setAttribute("src", "/content/img/icon/material-design/png/"+iconName+".png"); iconObj.setAttribute("width",32); iconObj.setAttribute("height",32); /* 親ノードの子ノードの先頭にIMG要素を挿入 */ parentObj.insertBefore(iconObj, parentObj.lastChild); } </script>
replaceChild()
ノードを置換する
unknown
指定したノードを新しいノードに置換し。置換されたノードを返します。
第1引数newChildに置換する新しい子ノードを指定します。
第2引数oldChildに置換される古い子ノードを指定します。
<form action="#"> <p>▼ クリックすると画像が入れ替わります</p> <span onclick="fReplaceChild(this)"><img src="/content/img/pengin.gif" alt="ペンギン" /></span> </form> <script type="text/javascript"> function fReplaceChild(parentObj){ /* 新しいIMG要素を生成 */ var newNode=document.createElement("IMG"); /* 古いIMG要素を取得 */ var oldNode=parentObj.firstChild; /* 古いIMG要素のsrc属性を取得し、新しいIMG要素のsrc属性を差替 */ var btnFLG=(oldNode.getAttribute("src").indexOf("_doki")>-1) ? "" : "_doki"; newNode.setAttribute("src", "/content/img/pengin"+btnFLG+".gif"); /* 新しいIMG要素に置換 */ parentObj.replaceChild(newNode, oldNode); } </script>
removeChild()
ノードを削除する
unknown
対象ノードの子ノードリストから指定したノードを削除し、削除したノードを返します。
第1引数oldChildには、削除するノードを指定します。
最初の子ノードを削除する場合はfirstChild、
最後の子ノードを削除する場合はlastChild、
任意の子ノードを指定する場合はchildNodes[i]のように参照番号で指定します。
第1引数oldChildに指定したノードが存在しない場合は削除できないためエラーになります。
親ノード.childNodes.length
で、親ノードの子ノード数を取得してfor文などでループさせて指定したノードが存在するか判定してから、削除するようにしましょう。
複数の子ノードを削除する場合は注意が必要です! 0番目のノードから削除していくとノードの参照番号が変わるため、正しく削除できません。 そのためループで削除していく場合は、必ず子ノードの末尾から削除する必要があります。
以下の例では、for文を使ってfor(var i=length; i>0; i--){ ... }
のようにデクリメントしながら、子ノードの末尾から削除しています。
<form action="#"> <select id="pulldown2"> <option value="" selected>---------</option> </select> <input type="button" value="プルダウン生成" onclick="fCreatePulldownMenuD()" /> </form> <script type="text/javascript"> function fCreatePulldownMenuD(){ var todofuken=["---------","北海道","本州","四国","九州","沖縄"]; var selObj=document.getElementById("pulldown2"); var length=selObj.childNodes.length-1; if(length>0){ /* ノード削除:プルダウン初期化 */ /* デクリメントしながら、子ノードの末尾から削除 */ for(var i=length; i>0; i--){ var childObj=selObj.childNodes[i]; if(childObj.nodeName!=undefined){ selObj.removeChild(childObj); } } } /* ノード生成:OPTION要素生成 */ for(var i in todofuken){ var optObj=document.createElement("option"); if(navigator.userAgent.indexOf("MSIE")>-1){ optObj.innerText=todofuken[i]; }else{ optObj.textContent=todofuken[i]; } /* ノード追加 */ selObj.appendChild(optObj); } } </script>
以下の例では、同意するがチェックされた時にボタン要素を生成し、チェックが外れた時にボタン要素を削除しています。
<form action="#" id="frmA"> <textarea cols="60" rows="5">【利用規約】 利用規約に同意すると、ダウンロードボタンが表示されます。</textarea> <p> <label for="ag1"><input type="radio" name="agreement" id="ag1" value="1" onclick="fAgreement()" />同意する</label> <label for="ag2"><input type="radio" name="agreement" id="ag2" value="0" onclick="fAgreement()" />同意しない</label><br> </p> </form> <script type="text/javascript"> function fAgreement(){ /* フォーム */ var frmObj=document.getElementById("frmA"); /* ボタン */ var btnObj=document.getElementById("btnDownload"); /* ラジオボタンのチェック状況 */ var agreeFLG=document.getElementById("ag1").checked; /* ボタンが存在する場合 */ if(btnObj!=undefined){ /* 同意するにチェックなし */ if(agreeFLG!=true){ /* ボタンを削除 */ frmObj.removeChild(btnObj); } /* ボタンが存在しない場合 */ }else{ /* 同意するにチェックあり */ if(agreeFLG==true){ /* フォームにボタンを追加 */ var btnObj=document.createElement("input"); btnObj.setAttribute("type", "submit"); btnObj.setAttribute("id", "btnDownload"); btnObj.setAttribute("value", "ダウンロード"); frmObj.appendChild(btnObj); } } } </script>
setAttribute()
ノードの属性値を設定
unknown
対象ノードに属性を設定します。
第1引数nameに属性名、第2引数valueに属性値を指定します。
<form action="#"> <p><input type="button" value="生成したa要素に属性名・値を設定" onclick="fSetAttribute()" /></p> </form> <ul id="searchLists"></ul> <script type="text/javascript"> function fSetAttribute(){ var search={ "YAHOO! JAPAN" : "http://www.yahoo.co.jp", "Google" : "http://www.google.co.jp" } /* 親ノード */ var parentObj=document.getElementById("searchLists"); for(var i in search){ /* LI要素を生成 */ var listObj=parentObj.appendChild(document.createElement("LI")); /* a要素を生成し、LI要素に追加 */ var aObj=listObj.appendChild(document.createElement("A")); /* a要素のhref属性にリンク先URLを設定 */ aObj.setAttribute("href", search[i]); /* a要素のtitle属性にリンクテキストを設定 */ aObj.setAttribute("title", i); /* a要素のtarget属性を設定 */ aObj.setAttribute("target", "_blank"); /* a要素のリンクテキストをテキストノードとして追加 */ aObj.appendChild(document.createTextNode(i)); } } </script>