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>