Search
  1. appendChild()〔ノードを末尾に追加〕
  2. cloneNode()〔ノードを複製する〕
  3. createComment()〔コメントノードを生成する〕
  4. createElement()〔エレメントノードを生成する〕
  5. createTextNode()〔テキストノードを生成する〕
  6. getAttribute()〔ノードの属性値を取得〕
  7. getElementById()〔特定のID名の要素を取得〕
  8. getElementsByTagName()〔指定した要素名の全てのノードリストを取得〕
  9. hasChildNodes()〔子ノードがあるか調べる〕
  10. insertBefore()〔任意の位置にノードを挿入する〕
  11. replaceChild()〔ノードを置換する〕
  12. removeChild()〔ノードを削除する〕
  13. setAttribute()〔ノードの属性値を設定〕

appendChild()
ノードを末尾に追加

unknown

エレメント.appendChild ( newChild );

対象ノードの子ノードリストの末尾に新しいノードを追加し、追加した新しいノードを返します。 第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

エレメント.cloneNode ( deep );

対象ノードを複製し、複製したノードを返します。

第1引数deepTRUEを指定した場合は、対象ノードの全ての子ノードが複製されます。 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

document.createComment ( commetnt );

コメントノードを生成します。
第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

document.createElement ( element-name );

第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

document.createTextNode ( text );

第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

エレメント.getAttribute (name);

対象ノードの属性値を取得します。
第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

document.getElementById ( id );

指定した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>

写真1 写真2 写真3

getElementsByTagName()
指定した要素名の全てのノードリストを取得

unknown

エレメント.getElementsByTagName ( name );

対象ノード内にある指定した要素名の全エレメントノードの配列(ノードリスト)を取得します。 第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

エレメント.hasChildNodes ();

対象ノードに子ノードがあるか調べ、子ノードがある場合に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

エレメント.insertBefore ( newChild, refChild );

対象ノードの指定した子ノードの前に新しいノードを挿入し、挿入する新しいノードを返します。

第1引数newChildに挿入する子ノードを指定します。
第2引数refChildに挿入位置の子ノードを指定します。

appendChild()メソッドと異なり任意の位置に子ノードを挿入できます。 第2引数refChildNULLの場合は、子ノードリストの末尾に挿入されます(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

エレメント.replaceChild ( newChild, oldChild );

指定したノードを新しいノードに置換し。置換されたノードを返します。

第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

エレメント.removeChild ( oldChild );

対象ノードの子ノードリストから指定したノードを削除し、削除したノードを返します。

第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

エレメント.setAttribute ( name, value );

対象ノードに属性を設定します。
第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>

    関連コンテンツ

    Q. このサイトの情報はお役に立ちましたでしょうか?

    投票する 投票結果を見る

    管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

    pagetop

    polarized women