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行メッセージも送れます♪)


    polarized women