Search
  1. attributes[]〔ノードの属性リストを取得〕
  2. childNodes[]〔子ノードのリストを取得〕
  3. className〔クラス名の取得・設定〕
  4. clientWidth/clientHeight〔要素の内部の幅、高さを取得〕
  5. clientLeft/clientTop〔要素の左ボーダーの幅、上ボーダーの幅を取得〕
  6. dir〔テキストの方向の取得・設定〕
  7. firstChild〔最初の子ノードを取得〕
  8. id〔ID名の取得・設定〕
  9. innerHTML〔ノード内のHTML要素の取得・設定〕
  10. innerText / textContent〔ノード内のプレーンテキストの取得・設定〕
  11. lang〔言語コードの取得・設定〕
  12. lastChild〔最後の子ノードを取得〕
  13. localName〔ローカル名の取得〕
  14. name〔要素のname属性を取得・設定〕
  15. namespaceURI〔名前空間のURIの取得〕
  16. previousSibling/nextSibling〔直前・直後にある兄弟ノードを取得 :: Mac風OSメニュー〕
  17. nodeName〔ノードの名前を取得〕
  18. nodeType〔ノードの型を取得〕
  19. nodeValue〔ノードの値を取得〕
  20. offsetWidth/offsetHeight〔配置に応じた要素の幅・高さを取得〕
  21. offsetLeft/offsetTop〔要素の左ボーダーから基準要素の左ボーダーまでの距離、要素の上ボーダーから基準要素までの距離〕
  22. offsetParent〔オフセットの基準となる要素〕
  23. ownerDocument〔オーナードキュメントを取得〕
  24. parentNode〔親ノードを取得〕
  25. prefix〔名前空間の識別子を取得・設定〕
  26. scrollWidth/scrollHeight〔要素のスクロールビューの幅・高さを取得〕
  27. scrollLeft/scrollTop〔要素の左スクロールオフセット、上スクロールオフセットを取得・設定〕
  28. style〔要素のstyle属性の宣言を表すオブジェクトを取得〕
  29. tagName〔要素名の取得・設定〕
  30. tabIndex〔要素のタブインデックス番号を取得〕
  31. title〔タイトル属性の取得・設定〕

attributes[]
ノードの属性リストを取得

unknown

エレメント.attributes -> 属性リスト

対象ノードがノードの場合にエレメントの属性リストを返し、ノードでない場合はNULLを返します。

特定のimg要素の属性取得

サンプルを見る
<p><img src="/content/img/pic1-thumb.png" alt="Krispy Kreme Doughnuts" id="sweets" /></p>

<form action="#">
    <input type="button" value="属性取得" onclick="fGetAttributes()" />
    <p id="resGetAttributes"></p>
</form>

<script type="text/javascript">
function fGetAttributes(){
    var s="";
    if(document.getElementById("sweets").attributes.length>0){
      /* ID名取得 */
      s+=document.getElementById("sweets").getAttribute("id")+"<br>";
      s+=document.getElementById("sweets").attributes.getNamedItem("id").value+"<br>";
      s+=document.getElementById("sweets").attributes.getNamedItem("id").nodeValue+"<br>";
      /* ALT属性取得 */
      s+=document.getElementById("sweets").getAttribute("alt")+"<br>";
      s+=document.getElementById("sweets").attributes.getNamedItem("alt").value+"<br>";
      s+=document.getElementById("sweets").attributes.getNamedItem("alt").nodeValue+"<br>";
    }
    document.getElementById("resGetAttributes").innerHTML=s;
}
</script>

Krispy Kreme Doughnuts

特定のテーブルのボーダーの太さを切り替え

特定のテーブルのボーダーの太さを切り替え特定のテーブルのボーダーの太さを切り替え
サンプルを見る
<!-- テーブルの行をストライプに -->
<style type="text/css">
    table#atbl th {
        border:1px solid #ccc;
        background-color:#666;
        color:#fff;
    }
    table#atbl td {
        border:1px solid #ccc;
    }
    table#atbl tr.bg01{
        background:#ffffcc;
    }
    table#atbl tr.bg02{
        background:#eee;
    }
</style>

<form action="#">
    <p><input type="button" onclick="swRowColor()" id="btn_attributes2" value="枠線を太くする" /></p>
</form>

<table border="1" id="atbl">
    <caption>《検索サイト》</caption>
    <tr>
        <th>サイト名</th>
        <th>URL</th>
    </tr>
    <tr>
        <td>Yahoo! JAPAN</td>
        <td>http://www.yahoo.co.jp/</td>
    </tr>
    <tr>
        <td>Google</td>
        <td>http://www.google.co.jp/</td>
    </tr>
    <tr>
        <td>goo</td>
        <td>http://www.goo.ne.jp/</td>
    </tr>
    <tr>
        <td>Infoseek</td>
        <td>http://www.infoseek.co.jp/</td>
    </tr>
</table>

<script type="text/javascript">
function swRowColor(){
    var tblObjAry=document.getElementsByTagName("table");
    var btnObj=document.getElementById("btn_attributes2");
    for (var i=0; i<tblObjAry.length; i++){
        var tblObj=tblObjAry[i];
        if(tblObj.id=="atbl"){
            var tblAttributes=tblObj.attributes;
            for (var i=0; i<tblAttributes.length; i++){
                if(tblAttributes[i].nodeName.toLowerCase()=="border"){
                    tblObj.border=(tblObj.border=="10") ? "0" : "10";
                    btnObj.value=(tblObj.border=="10") ? "枠線なし" : "枠線を太くする";
                }
            }
        }
    }
}
</script>

childNodes[]
子ノードのリストを取得

unknown

エレメント.childNodes -> 子ノードリスト

対象ノードの子ノードのリストを取得します。 子ノードがない場合は、空の子ノードリストを返します。

子ノードの値を取得

設置イメージ設置イメージ
子ノードの値を取得サンプルを見る
<!-- 子ノードの値を取得 -->
<p id="parentP">
    DOMとは、<strong>Document Object Model</strong>の略です。
    (X)HTMLやXMLのようなツリー構造の文書にアクセスし、操作するための<strong>API</strong>です。
</p>
<form action="#">
    <input type="button" value="子ノードリストからSTRONG要素のテキストを取得" onclick="fGetChildNodes()" />
</form>
<ul id="resGetChildNodes"></ul>

<script type="text/javascript">
function fGetChildNodes(){
    var s=""
    var parentObj=document.getElementById("parentP");
    for(var i in parentObj.childNodes){
        var childObj=parentObj.childNodes[i];
        if(childObj!=null && childObj.nodeName=="STRONG"){
            s+="<li>"+childObj.firstChild.nodeValue+"</li>";
        }
    }
    document.getElementById("resGetChildNodes").innerHTML=s;
}
</script>

DOMとは、Document Object Modelの略です。 (X)HTMLやXMLのようなツリー構造の文書にアクセスし、操作するためのAPIです。

    リンク先の拡張子アイコンを表示

    設置イメージ設置イメージ
    リンク先の拡張子アイコンを表示サンプルを見る
    <style type="text/css">
    ul#addLinkIcons li a {
        border:0;
        text-decoration:none;
    }
    ul#addLinkIcons li a img {
        vertical-align:middle;
    }
    </style>
    
    <form action="#">
        <!-- 通常はwindow.onloadイベントでページが読み込まれたときに実行 -->
        <p><input type="button" value="リンク先の拡張子アイコンを表示" onclick="fAddLinkIcons()" /></p>
    </form>
    <ul id="addLinkIcons">
        <li><a href="/content/demo/sample.pdf">PDFファイルへのリンク</a></li>
        <li><a href="/content/demo/sample.xml">XMLファイルへのリンク</a></li>
        <li><a href="/content/demo/sample.rdf">RSS Feedへのリンク</a></li>
        <li><a href="/content/demo/sample.xls">Excelファイルへのリンク</a></li>
        <li><a href="/content/demo/sample.jpg">画像ファイルへのリンク</a></li>
        <li><a href="/content/demo/sample.zip">圧縮ファイルへのリンク</a></li>
    </ul>
    
    <script type="text/javascript">
    var done_fAddLinkIcons=false;
    function fAddLinkIcons(){
        /* UL要素 */
        var ulObj=document.getElementById("addLinkIcons");
        if(!done_fAddLinkIcons){
            done_fAddLinkIcons=true;
        }else{
            return false;
        }
        for(var i in ulObj.childNodes){
            /* LI要素 */
            var liObj=ulObj.childNodes[i];
            if(liObj!=null && liObj.nodeName=="LI"){
                for(var j in liObj.childNodes){
                    /* A要素 */
                    var aObj=liObj.childNodes[j];
                    if(aObj!=null && aObj.nodeName=="A"){
                        /* A要素のhref属性取得 */
                        var aHref=aObj.getAttribute("href");
                        if(aHref!=""){
                            /* IMG要素生成 */
                            var imgObj=document.createElement("IMG");
                            var fType="";
                            if(aHref.indexOf(".pdf")>-1){
                                fType="pdf";
                            }else if(aHref.indexOf(".xml")>-1){
                                fType="xml";
                            }else if(aHref.indexOf(".rdf")>-1){
                                fType="feed";
                            }else if(aHref.indexOf(".xls")>-1 || aHref.indexOf(".xlsx")>-1){
                                fType="xls";
                            }else if(aHref.indexOf(".jpg")>-1 || aHref.indexOf(".gif")>-1 || aHref.indexOf(".png")>-1){
                                fType="image";
                            }else if(aHref.indexOf(".zip")>-1 || aHref.indexOf(".lzh")>-1){
                                fType="zip";
                            }
                            /* IMG要素のsrc属性に拡張子アイコン画像URLを設定 */
                            imgObj.setAttribute("src","/content/img/icon/file/icon_"+fType+".gif");
                            /* A要素の子ノードリストの先頭に生成したIMG要素を連結 */
                            /* 末尾に加える場合は aObj.appendChild(imgObj) */
                            aObj.insertBefore(imgObj, aObj.firstChild);
                        }
                    }
                }
            }
        }
    }
    </script>
    

    className
    クラス名の取得・設定

    unknown

    エレメント.className = クラス名;

    対象ノードのクラス名を取得・設定します。

    回答部分のの開閉(子ノードのクラス名を入替)

    設置イメージ設置イメージ
    回答部分のの開閉(子ノードのクラス名を入替)サンプルを見る
    <!-- 回答部分のの開閉(子ノードのクラス名を入替) -->
    <style type="text/css">
    dl#faqList dt {
        font-weight:bold;
    }
    dl#faqList dd.openclose {
        margin:10px 10px 20px 20px;
        display:block;
    }
    dl#faqList dd.close {
        margin:10px 10px 20px 20px;
        display:none;
    }
    </style>
    
    <form action="#">
        <input type="button" onclick="fTglAnswer()" id="btnOpenClose" value="回答を閉じる" />
    </form>
    
    <dl id="faqList">
        <dt>質問1</dt>
            <dd class="open">回答1</dd>
        <dt>質問2</dt>
            <dd class="open">回答2</dd>
    </dl>
    
    <script type="text/javascript">
    function fTglAnswer(){
        /* 親ノードを格納 */
        var parenObj=document.getElementById("faqList");
        /* ボタンオブジェクトを格納 */
        var btnObj=document.getElementById("btnOpenClose");
        for(var i in parenObj.childNodes){
            /* 子ノードを格納 */
            var childObj=parenObj.childNodes[i];
            if(childObj.tagName=="DD"){
                /* クラス名取得 */
                if(childObj.className=="open"){
                    /* クラス名設定 */
                    childObj.className="close";
                    btnObj.value="回答を開く";
                }else{
                    childObj.className="open";
                    btnObj.value="回答を閉じる";
                }
            }
        }
    }
    </script>
    質問1
    回答1
    質問2
    回答2

    テーブルの行をストライプに

    設置イメージ設置イメージ
    テーブルの行をストライプにサンプルを見る
    <!-- テーブルの行をストライプに -->
    <style type="text/css">
    table.stripe {
        border:0;
        border-spacing:0;
        border-collapse:collapse;
        margin:0; padding:0;
    }
        table.stripe th {
            border:1px solid #ccc;
            background-color:#666;
            color:#fff;
        }
        table.stripe td {
            border:1px solid #ccc;
        }
        table.stripe tr.bg02{
            background:#eee;
        }
    </style>
    
    <form action="#">
        <input type="button" onclick="fStripeTable()" value="行をストライプにする" />
    </form>
    <br>
    <table class="stripe">
        <caption>《検索サイト》</caption>
        <tr>
            <th>サイト名</th>
            <th>URL</th>
        </tr>
        <tr>
            <td>Yahoo! JAPAN</td>
            <td>http://www.yahoo.co.jp/</td>
        </tr>
        <tr>
            <td>Google</td>
            <td>http://www.google.co.jp/</td>
        </tr>
        <tr>
            <td>goo</td>
            <td>http://www.goo.ne.jp/</td>
        </tr>
        <tr>
            <td>Infoseek</td>
            <td>http://www.infoseek.co.jp/</td>
        </tr>
    </table>
    
    <script type="text/javascript">
    function fStripeTable(){
        var tblObjAry=document.getElementsByTagName("table");
        for (var i=0; i<tblObjAry.length; i++){
            var tblObj=tblObjAry[i];
            if(tblObj.className=="stripe"){
                var rows=tblObj.getElementsByTagName("tr");
                for (var i=1; i<rows.length; i++){
                    rows[i].className="bg02";
                    i++;
                }
            }
        }
    }
    </script>

    《検索サイト》
    サイト名 URL
    Yahoo! JAPAN http://www.yahoo.co.jp/
    Google http://www.google.co.jp/
    goo http://www.goo.ne.jp/
    Infoseek http://www.infoseek.co.jp/

    clientWidth/clientHeight
    要素の内部の幅、高さを取得

    unknown

    エレメント.clientWidth -> 数値(px)
    エレメント.clientHeight ->数値(px)

    clientLeft/clientTop
    要素の左ボーダーの幅、上ボーダーの幅を取得

    unknown

    エレメント.clientLeft -> 数値(px)
    エレメント.clientTop -> 数値(px)

    dir
    テキストの方向の取得・設定

    unknown

    エレメント.dir = 現在のテキストの方向

    対象ノードのテキスト・ディレクション(書字方向)を取得・設定します。

    対象ノードのテキスト・ディレクションを取得・設定

    設置イメージ設置イメージ
    対象ノードのテキスト・ディレクションを取得・設定サンプルを見る
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang='ja'>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>対象エレメントのテキスト・ディレクションを取得・設定</title>
    </head>
    <body id="myBody" dir="rtl">
    
    <script type="text/javascript">
    document.write("Text direction: "+document.getElementsByTagName('body')[0].dir+"<br>");
    document.write("An alternate way: "+document.getElementById('myBody').dir+"<br>");
    </script>
    
    </body>
    </html>

    firstChild
    最初の子ノードを取得

    unknown

    ノード.firstChild -> 最初の子ノード

    対象ノードの最初の子ノードを取得します。

    以下のように改行を含めて記述した場合、Firefoxでは改行も1つのノードとして扱われるので#textが返ります。

    <ul>
    	<li>りんご</li>
    	...

    以下のように改行を含めなければli要素が返ります。

    <ul><li>りんご</li> ...

    ブラウザおよびそのバージョンによって差異がありますのでfirstChildを使う場合は注意が必要です。 クロスブラウザ対応にするには、childNodesプロパティを使いましょう。

    ChromeChrome
    IE8IE8
    <ul id="fruitNodes2">
        <li>リンゴ</li>
        <li>オレンジ</li>
        <li>バナナ</li>
    </ul>
    
    <form action="#">
        <input type="button" value="firstChildを取得" onclick="fGetfirstChild()" />
        <p id="resGetfirstChild"></p>
    </form>
    
    <script type="text/javascript">
    function fGetfirstChild(){
        var s="";
        var parentObj=document.getElementById("fruitNodes2");
        var firstChildObj=parentObj.firstChild;
        if(firstChildObj!=null){
            s+="nodeName: "+firstChildObj.nodeName+"<br>";
            if(navigator.userAgent.indexOf("MSIE")>-1){
                /* IE */
                s+="innerText: "+firstChildObj.innerText+"<br>";
            }else{
                /* Firefox */
                s+="textContent: "+firstChildObj.textContent+"<br>";
            }
        }
        document.getElementById("resGetfirstChild").innerHTML=s;
    }
    </script>
    
    • リンゴ
    • オレンジ
    • バナナ

    id
    ID名の取得・設定

    unknown

    エレメント.id = ID名

    対象ノードのID名を取得・設定します。

    <!-- 親要素(div#hoge1)鋸要素のID名を取得 -->
    <div id="hoge1">
        <div id="hoge1-1">ほげ1-1</div>
        <div id="hoge1-2">ほげ1-2</div>
    </div>
    
    <form action="#">
        <p><input type="button" value="ID名取得" onclick="fGetIDName()" /></p>
    </form>
    
    <script type="text/javascript">
    function fGetIDName(){
        var s="";
        var parentObj=document.getElementById("hoge1");
        for(var i in parentObj.childNodes){
            var childObj=parentObj.childNodes[i];
            if(childObj.id!=undefined){
                s+=childObj.id+"<br>";
            }
        }
        document.getElementById("reshoge").innerHTML=s;
    }
    </script>
    <p id="reshoge"></p>
    
    ほげ1-1
    ほげ1-2

    innerHTML
    ノード内のHTML要素の取得・設定

    unknown

    エレメント.innerHTML = HTML文

    対象ノード内のHTML文を取得・設定します。

    HTMLタグを含めずにプレーンテキストのみ取得・設定したい場合は、innerText/textContentを使用します。

    ノード内のHTML文を取得
    <ul id="searchLinks">
      <li><a href="http://www.yahoo.co.jp">Yahoo! Japan</a></li>
      <li><a href="http://www.google.co.jp">Google</a></li>
    </ul>
    
    <form action="#">
      <input type="button" value="innerHTMLを取得" onclick="fGetInnerHTML()" />
      <p id="resGetInnerHTML"></p>
    </form>
    
    <script type="text/javascript">
    function fGetInnerHTML(){
        var s="";
        var parentObj=document.getElementById("searchLinks");
        for(var i in parentObj.childNodes){
            var childObj=parentObj.childNodes[i];
            if(childObj.nodeName=="LI"){
                s+="innerHTML: "+childObj.innerHTML+"<br>";
            }
        }
        document.getElementById("resGetInnerHTML").innerHTML=s;
    }
    </script>

    設定:時間帯によってメッセージを変える サンプルを見る
    <!-- 時間帯によってメッセージを変える -->
    <div id="message"></div>
    
    <script type="text/javascript">
    var username="hoge";
    var greeting=["おはようございます","こんにちは","こんばんは"];
    var now=new Date();
    var hour=now.getHours();
    var str="";
    if(hour>4 && hour<12){
        str=greeting[0];
    }else if(hour<18){
        str=greeting[1];
    }else{
        str=greeting[2];
    }
    if(document.getElementById("message")){
        document.getElementById("message").innerHTML="<p>"+str+"、"+username+"さん<\/p>";
    }
    </script>

    innerText / textContent
    ノード内のプレーンテキストの取得・設定

    unknown

    エレメント.innerText = 文字列
    エレメント.textContent = 文字列

    対象ノードのプレーンテキストを取得・設定します。 IEではinnerTextプロパティ、FirefoxではtextContentプロパティを使用します。

    取得できるのはテキスト部分のみで、HTMLタグは無視されます。 HTMLタグを含める場合は、innerHTMLプロパティを使用します。

    <ul id="fruitNodes">
      <li><strong>リンゴ</strong></li>
      <li></li>
      <li><em>オレンジ</em></li>
      <li><a href="#">バナナ</a></li>
      <li></li>
    </ul>
    
    <form action="#">
      <input type="button" value="プレーンテキストを取得" onclick="fGetPlaneText()" />
      <p id="resGetPlaneText"></p>
    </form>
    
    <script type="text/javascript">
    function fGetPlaneText(){
        var s="";
        var parentObj=document.getElementById("fruitNodes");
        for(var i in parentObj.childNodes){
            var childObj=parentObj.childNodes[i];
            if(childObj.nodeName=="LI"){
                if(navigator.userAgent.indexOf("MSIE")>-1){
                      /* IE */
                      s+="innerText: "+childObj.innerText+"<br>";
                }else{
                      /* Firefox */
                     s+="textContent: "+childObj.textContent+"<br>";
                  }
            }
        }
        document.getElementById("resGetPlaneText").innerHTML=s;
    }
    </script>
    

    lang
    言語コードの取得・設定

    unknown

    エレメント.lang = 言語コード

    対象ノードの言語コードを取得・設定します。

    対象ノードの言語コードを取得・設定サンプルを見る
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang='ja'>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>対象エレメントの言語コードを取得・設定</title>
    </head>
    <body>
    
    <script type="text/javascript">
    
    /* 言語コード取得 */
    document.write("Content Language: "+document.getElementsByTagName('html')[0].lang+"<br \/>");
    
    /* 言語コードを"en-us"に設定 */
    document.getElementsByTagName('html')[0].lang="en-us";
    document.write("Content Language: "+document.getElementsByTagName('html')[0].lang+"<br \/>");
    </script>
    
    </body>
    </html>

    lastChild
    最後の子ノードを取得

    unknown

    エレメント.lastChild -> 最後の子ノード

    対象ノードの最後の子ノードを取得します。

    以下のように改行を含めて記述した場合、Firefoxでは改行も1つのノードとして扱われるので#textが返ります。

    <ul>
    	<li>りんご</li>
    	...

    以下のように改行を含めなければli要素が返ります。

    <ul><li>りんご</li> ...

    このように、IE以外のブラウザでlastChildを使う場合は注意が必要です。 クロスブラウザ対応にするには、childNodesプロパティを使いましょう。

    <ul id="fruitNodes3">
        <li>リンゴ</li>
        <li>オレンジ</li>
        <li>バナナ</li>
    </ul>
    
    <form action="#">
        <input type="button" value="lastChildを取得" onclick="fGetLastChild()" />
        <p id="resGetLastChild"></p>
    </form>
    
    <script type="text/javascript">
    function fGetLastChild(){
        var s="";
        var parentObj=document.getElementById("fruitNodes3");
        var lastChildObj=parentObj.lastChild;
        if(lastChildObj!=null){
            s+="nodeName: "+lastChildObj.nodeName+"<br>";
            if(navigator.userAgent.indexOf("MSIE")>-1){
                /* IE */
                s+="innerText: "+lastChildObj.innerText+"<br>";
            }else{
                /* Firefox */
                s+="textContent: "+lastChildObj.textContent+"<br>";
            }
        }
        document.getElementById("resGetLastChild").innerHTML=s;
    }
    </script>
    
    • リンゴ
    • オレンジ
    • バナナ

    localName
    ローカル名の取得

    unknown

    エレメント.localName = ローカル名

    対象ノードの名前空間の識別子を除いたローカル名を取得・設定します。 (X)HTMLの場合は、対象ノードのノード名が返ります。

    <div id="hogediv">div要素です。</div>
    
    <form action="#">
        <p><input type="button" value="ローカル名取得" onclick="fGetLocalName()" /></p>
        <p id="resGetLocalName"></p>
    </form>
    
    <script type="text/javascript">
    function fGetLocalName(){
        var s="";
        s+="localName: "+document.getElementById("hogediv").localName+"<br>";
        document.getElementById("resGetLocalName").innerHTML=s;
    }
    </script>
    
    div要素です。

    name
    要素のname属性を取得・設定

    unknown

    エレメント.name = 要素の名前
    <input type="text" name="username" id="username" />
    
    <script type="text/javascript">
        document.getElementById("username").value=document.getElementById("username").name;
    </script>
    

    namespaceURI
    名前空間のURIの取得

    unknown

    ノード.namespaceURI = URI

    対象ノードの名前空間のURIを取得・設定します。 指定されていない場合はNULLを返します。

    <div id="hogediv2">div要素です。</div>
    
    <form action="#">
        <p><input type="button" value="名前空間のURI取得" onclick="fGetNameSpaceURI()" /></p>
        <p id="resGetNameSpaceURI"></p>
    </form>
    
    <script type="text/javascript">
    function fGetNameSpaceURI(){
        var s="";
        s+="namespaceURI: "+document.getElementById("hogediv2").namespaceURI+"<br>";
        document.getElementById("resGetNameSpaceURI").innerHTML=s;
    }
    </script>
    
    div要素です。

    previousSibling/nextSibling
    直前・直後にある兄弟ノードを取得 :: Mac風OSメニュー

    unknown

    ノード.previousSibling -> 前のノード
    ノード.nextSibling -> 次のノード

    previousSiblingプロパティは、対象ノードの直前にある兄弟ノードを取得します。 nextSiblingプロパティは、対象ノードの直後にある兄弟ノードを取得します。 兄弟ノードがない場合は、共にNULLを返します。

    <form action="#">
        <p>
            <span id="Brothers"><strong>Brother</strong><em>(兄弟)</em></span>
            <input type="button" value="最初の子ノードの次のノード名を取得" onclick="fGetBrothers()" />
        </p>
        <p id="resGetBrothers"></p>
    </form>
    
    <script type="text/javascript">
    function fGetBrothers(){
        var s="";
        var parentObj=document.getElementById("Brothers");
        var firstChildObj=parentObj.firstChild;
        s+=firstChildObj.nextSibling.nodeName+"<br>";
        document.getElementById("resGetBrothers").innerHTML=s;
    }
    </script>
    

    Brother(兄弟)

    Mac OS 風のメニューを作ってみました。 IEとFirefoxではノードの挙動が違う(Firefoxは#textもノードとして扱う)ので、処理を分岐する必要があります。 もっとすっきりかけると思いますが、あしからずw

    MacOSメニューサンプルを見る
    <style type="text/css">
        ul#macmenu {
            list-style:none;
            margin:0; padding:0;
            zoom:100%;
            height:140px;
        }
        ul#macmenu:after {
          height: 0;
          visibility: hidden;
          content: ".";
          display: block;
          clear: both;
        }
        ul#macmenu li {
            margin:0; padding:0;
            display:block;
            float:left;
        }
        ul#macmenu li img.defsize {
            width:64px; height:64px;
        }
    </style>
    
    <script type="text/javascript">
        var defsize='64px';
        var prevnextsize='80px';
        var zoomsize='128px';
    
        /* アイコンを拡大表示 */
        function fZoomIcon(id){
            var ie=false;
            if(navigator.userAgent.indexOf("MSIE")>-1){
                ie=true;
            }
            var Obj=document.getElementById(id);
            for(var i in Obj.childNodes){
                if(Obj.childNodes[i].nodeName=="IMG"){
                    var imgObj=Obj.childNodes[i];
                    imgObj.style.width=zoomsize;
                    imgObj.style.height=zoomsize;
                }
            }
            var nextObj="";
            var prevObj="";
            if(ie==true){
                /* IE */
                if(Obj.nextSibling!=null && Obj.nextSibling.nodeName=="LI"){
                    var nextObj=Obj.nextSibling;
                }
                if(Obj.previousSibling!=null && Obj.previousSibling.nodeName=="LI"){
                    var prevObj=Obj.previousSibling;
                }
            }else{
                /* Firefox */
                if(Obj.nextSibling.nextSibling!=null && Obj.nextSibling.nextSibling.nodeName=="LI"){
                    var nextObj=Obj.nextSibling.nextSibling;
                }
                if(Obj.previousSibling.previousSibling!=null && Obj.previousSibling.previousSibling.nodeName=="LI"){
                    var prevObj=Obj.previousSibling.previousSibling;
                }
            }
            if(nextObj!=""){
                for(var i in nextObj.childNodes){
                    if(nextObj.childNodes[i].nodeName=="IMG"){
                        var imgObj=nextObj.childNodes[i];
                        imgObj.style.width=prevnextsize;
                        imgObj.style.height=prevnextsize;
                    }
                }
            }
            if(prevObj!=""){
                for(var i in prevObj.childNodes){
                    if(prevObj.childNodes[i].nodeName=="IMG"){
                        var imgObj=prevObj.childNodes[i];
                        imgObj.style.width=prevnextsize;
                        imgObj.style.height=prevnextsize;
                    }
                }
            }
        }
        /* アイコンを縮小表示 */
        function fDefaultIcon(id) {
            var ie=false;
            if(navigator.userAgent.indexOf("MSIE")>-1){
                ie=true;
            }
            var Obj=document.getElementById(id);
            for(var i in Obj.childNodes){
                if(Obj.childNodes[i].nodeName=="IMG"){
                    var imgObj=Obj.childNodes[i];
                    imgObj.style.width=defsize;
                    imgObj.style.height=defsize;
                }
            }
            var nextObj="";
            var prevObj="";
            if(ie==true){
                 /* IE */
                if(Obj.nextSibling!=null && Obj.nextSibling.nodeName=="LI"){
                    var nextObj=Obj.nextSibling;
                }
                if(Obj.previousSibling!=null && Obj.previousSibling.nodeName=="LI"){
                    var prevObj=Obj.previousSibling;
                }
            }else{
                /* Firefox */
                if(Obj.nextSibling.nextSibling!=null && Obj.nextSibling.nextSibling.nodeName=="LI"){
                    var nextObj=Obj.nextSibling.nextSibling;
                }
                if(Obj.previousSibling.previousSibling!=null && Obj.previousSibling.previousSibling.nodeName=="LI"){
                    var prevObj=Obj.previousSibling.previousSibling;
                }
            }
            if(nextObj!=""){
                for(var i in nextObj.childNodes){
                    if(nextObj.childNodes[i].nodeName=="IMG"){
                        var imgObj=nextObj.childNodes[i];
                        imgObj.style.width=defsize;
                        imgObj.style.height=defsize;
                    }
                }
            }
            if(prevObj!=""){
                for(var i in prevObj.childNodes){
                    if(prevObj.childNodes[i].nodeName=="IMG"){
                        var imgObj=prevObj.childNodes[i];
                        imgObj.style.width=defsize;
                        imgObj.style.height=defsize;
                    }
                }
            }
        }
    </script>
    
    <ul id="macmenu">
        <li id="macmenu_os" onmouseover="fZoomIcon(this.id)" onmouseout="fDefaultIcon(this.id)"><img src="/content/img/js/xpico_os.gif" class="defsize" /></li>
        <li id="macmenu_dust" onmouseover="fZoomIcon(this.id)" onmouseout="fDefaultIcon(this.id)"><img src="/content/img/js/xpico_dust.gif" class="defsize" /></li>
        <li id="macmenu_ie" onmouseover="fZoomIcon(this.id)" onmouseout="fDefaultIcon(this.id)"><img src="/content/img/js/xpico_ie.gif" class="defsize" /></li>
        <li id="macmenu_photo" onmouseover="fZoomIcon(this.id)" onmouseout="fDefaultIcon(this.id)"><img src="/content/img/js/xpico_photo.gif" class="defsize" /></li>
        <li id="macmenu_video" onmouseover="fZoomIcon(this.id)" onmouseout="fDefaultIcon(this.id)"><img src="/content/img/js/xpico_video.gif" class="defsize" /></li>
        <li id="macmenu_music" onmouseover="fZoomIcon(this.id)" onmouseout="fDefaultIcon(this.id)"><img src="/content/img/js/xpico_music.gif" class="defsize" /></li>
    </ul>

    nodeName
    ノードの名前を取得

    unknown

    ノード.nodeName = ノード名

    対象ノードのノード名を大文字で返します。 ノードが空の場合、取得できない場合にundefinedを返します。

    <!-- 子要素(dd)を開閉 -->
    <form action="#">
        <input type="button" value="回答を開く" onclick="fTglOpen('open')" />
        <input type="button" value="回答を閉じる" onclick="fTglOpen('close')" />
    </form>
    
    <dl id="faq">
        <dt>質問1</dt>
            <dd>回答1</dd>
        <dt>質問2</dt>
            <dd>回答2</dd>
    </dl>
    
    <script type="text/javascript">
    function fTglOpen(tgl){
        var qObj=document.getElementById("faq");
        var s="";
        for(var i in qObj.childNodes){
            var aObj=qObj.childNodes[i];
            if(aObj.nodeName=="DD"){
                if(tgl!="open"){
                    aObj.style.display="none";
                }else{
                    aObj.style.display="block";
                }
            }
        }
    }
    </script>
    
    質問1
    回答1
    質問2
    回答2

    nodeType
    ノードの型を取得

    unknown

    ノード.nodeType = 型番号

    対象ノードの型番号を数字で取得します。 対象のノードが不明の場合は、undefinedを返します。

    ノードの型
    説明
    1Element(エレメント)
    2Attribute(属性)
    3Text(テキスト)
    4CDATA Section(CDATAセクション)
    5Entity Reference(エンティティリファレンス)
    6Entity(エンティティ)
    7Processing Instruction(処理命令)
    8Comment(コメント)
    9Document(ドキュメント)
    10Document Type(ドキュメントタイプ)
    11Document Fragment(ドキュメントフラグメント)
    12Notation(記述)
    <!-- ノードの型を調べる -->
    <form action="#">
        <p><input type="button" value="ノードの型を表示" onclick="fGetNodeType()" /></p>
        <pre id="nodeTypeLis"></pre>
    </form>
    
    <div id="nList">
        <!-- コメント -->
        <span>テキスト</span>
    </div>
    
    
    <script type="text/javascript">
    function fGetNodeType(){
        var parentObj=document.getElementById("nList");
        var s="";
        for(var i in parentObj.childNodes){
            var childObj=parentObj.childNodes[i];
            if(childObj.nodeType!=undefined){
                s+=childObj.nodeType+"\n";
            }
        }
        document.getElementById("nodeTypeLis").innerHTML=s;
    }
    </script>
    

    
    
    テキスト

    nodeValue
    ノードの値を取得

    unknown

    document.nodeValue = 値
    <!-- 
    テキストエリアに何も入力されていない場合は警告メッセージ表示&テキストボックスにフォーカスを当てる
    送信ボタンをクリックした時に、ボタンの値とスタイルを替える(二重送信防止)
     -->
    
    <form action="#" name="testform">
        <p>
            <input type="text" id="txtBox" size="30" />
            <input type="button" value="送信" onclick="fChgSubmitBtn()" id="btnSubmit" />
        </p>
        <p id="errMessage"></p>
    </form>
    
    <script type="text/javascript">
    function fChgSubmitBtn(){
        var s="";
        var btnObj=document.getElementById("btnSubmit");
        var txtObj=document.getElementById("txtBox");
        if(txtObj.value==""){
            document.getElementById("errMessage").innerHTML="<span style='color:red;'>※入力してください。<\/span>";
            txtObj.focus();
        }else{
            //document.testform.submit(); /* サンプルなので送信処理はコメントアウト */
            btnObj.value="送信しました";
            btnObj.disabled=true;
        }
    }
    </script>
    

    offsetWidth/offsetHeight
    配置に応じた要素の幅・高さを取得

    unknown

    エレメント.offsetWidth -> 数値(px)
    エレメント.offsetHeight -> 数値(px)
    <div id="elmoff_wh" style="border:1px solid orange; padding:10px;"></div>
    <script type="text/javascript">
        document.getElementById("elmoff_wh").innerHTML="要素の幅:"+document.getElementById("elmoff_wh").offsetWidth+"<br>要素の幅:"+document.getElementById("elmoff_wh").offsetHeight;
    </script>
    

    offsetLeft/offsetTop
    要素の左ボーダーから基準要素の左ボーダーまでの距離、要素の上ボーダーから基準要素までの距離

    unknown

    エレメント.offsetLeft -> 数値(px)
    エレメント.offsetTop -> 数値(px)
    <div id="elmoff_lt" style="border:1px solid orange;"></div>
    <script type="text/javascript">
        document.getElementById("elmoff_lt").innerHTML="要素の左ボーダーから基準要素の左ボーダーまでの距離:"+document.getElementById("elmoff_lt").offsetLeft+"<br>要素の上ボーダーから基準要素の左ボーダーまでの距離:"+document.getElementById("elmoff_lt").offsetTop;
    </script>
    

    offsetParent
    オフセットの基準となる要素

    unknown

    エレメント.offsetParent -> 親要素オブジェクト
    <input type="text" id="txtchild" />
    <script type="text/javascript">
        document.getElementById("txtchild").value=document.getElementById("txtchild").offsetParent.nodeName;
    </script>
    

    ownerDocument
    オーナードキュメントを取得

    unknown

    エレメント.ownerDocument -> ドキュメント;

    対象ノードに関連付けられたドキュメントを取得します。 対象ノードがドキュメントの場合はNULLを返します。

    <form action="#">
        <input type="button" value="document.bodyのオーナードキュメントを取得" onclick="fGetOwnerDocument()" />
        <p id="resGetOwnerDocument"></p>
    </form>
    
    <script type="text/javascript">
    function fGetOwnerDocument(){
        var s="";
        var OwnerObj=document.body.ownerDocument;
        s+="Object: "+OwnerObj+"<br>";
        s+="nodeType: "+OwnerObj.nodeType+"<br>";
        s+="nodeName: "+OwnerObj.nodeName+"<br>";
        s+="nodeValue: "+OwnerObj.nodeValue+"<br>";
        document.getElementById("resGetOwnerDocument").innerHTML=s;
    }
    </script>
    

    parentNode
    親ノードを取得

    unknown

    ノード.parentNode -> 親ノード

    対象ノードの親ノードを取得します。

    <input type="button" value="親ノードの情報を取得" onclick="fGetParentNode(this.id)" id="myBtn" />
    <p id="resGetParentNode"></p>
    
    <script type="text/javascript">
    function fGetParentNode(id){
        var s="";
        var childObj=document.getElementById(id);
        var parentObj=childObj.parentNode;
        s+="nodeName: "+parentObj.nodeName+"<br>";
        s+="nodeType: "+parentObj.nodeType+"<br>";
        s+="tagName: "+parentObj.tagName+"<br>";
        s+="className: "+parentObj.className+"<br>";
        document.getElementById("resGetParentNode").innerHTML=s;
    }
    </script>
    

    prefix
    名前空間の識別子を取得・設定

    unknown

    エレメント.prefix = 文字列;

    対象ノードの名前空間の識別子を取得します。 指定されていない場合はNULLを返します。

    scrollWidth/scrollHeight
    要素のスクロールビューの幅・高さを取得

    unknown

    エレメント.scrollWidth -> 数値;
    エレメント.scrollHeight -> 数値;

    scrollLeft/scrollTop
    要素の左スクロールオフセット、上スクロールオフセットを取得・設定

    unknown

    エレメント.scrollLeft = 数値;
    エレメント.scrollTop = 数値;

    style
    要素のstyle属性の宣言を表すオブジェクトを取得

    unknown

    エレメント.style.プロパティ名 = 値;

    tagName
    要素名の取得・設定

    unknown

    エレメント.tagName = 要素名;

    対象ノードの要素名を取得・設定します。

    <style type="text/css">
    div#sampleCode {
        margin:0; padding:0;
    }
    div#sampleCode pre {
        margin:0; padding:1em;
        display:none;
        color:#fff;
        background-color:#666;
        font-family:monospace;
        font-size:10px;
        letter-spacing:1px;
        line-height:1.22em;
    }
    </style>
    <div id="sampleCode">
        <a href="javascript:fOpenCloseSource();">▼サンプルコード表示</a>
        <pre>&lt;script type="text/javascript"&gt;
    function fGetYYYYMMDD(){
        var now=new Date();
        var nowY=now.getFullYear();
        var nowM=now.getMonth()+1;
        var nowD=now.getDay();
        return nowY+"/"+nowM+"/"+nowD;
    }
    &lt;/script&gt;</pre>
    </div>
    
    <script type="text/javascript">
    function fOpenCloseSource(){
        var parentObj=document.getElementById("sampleCode");
        var preObj="";
        var aObj="";
        for(var i in parentObj.childNodes){
            var childObj=parentObj.childNodes[i];
            if(childObj.tagName=="PRE"){
                preObj=childObj;
            }else if(childObj.tagName=="A"){
                aObj=childObj;
            }
        }
        if(preObj!="" && aObj!=""){
            if(preObj.style.display=="block"){
                preObj.style.display="none";
                aObj.innerHTML="▼サンプルコード表示";
            }else{
                preObj.style.display="block";
                aObj.innerHTML="▲サンプルコード非表示";
            }
        }
    }
    </script>
    
    ▼サンプルコード表示
    <script type="text/javascript">
    function fGetYYYYMMDD(){
    	var now=new Date();
    	var nowY=now.getFullYear();
    	var nowM=now.getMonth()+1;
    	var nowD=now.getDay();
    	return nowY+"/"+nowM+"/"+nowD;
    }
    </script>

    tabIndex
    要素のタブインデックス番号を取得

    unknown

    エレメント.tabIndex = 数値;

    title
    タイトル属性の取得・設定

    unknown

    エレメント.title = 文字列;

    対象ノードのTITLE属性を取得・設定します。

    リンクのtitle属性取得

    リンクのtitle属性取得サンプルを見る
    <ul id="urlLists">
        <li><a href="http://phpjavascriptroom.com/" title="PHP & JavaScript Roomを開きます">PHP &amp; JavaScript Room</a></li>
        <li><a href="http://www.yahoo.co.jp" title="Yahoo! Japanを開きます">Yahoo! JAPAN</a></li>
        <li><a href="http://www.google.co.jp" title="Googleを開きます">Google</a></li>
    </ul>
    
    <form action="#">
        <input type="button" value="リンクのtitle属性の値を取得" onclick="fGetAnchorTitle()" />
        <p id="resGetAnchorTitle"></p>
    </form>
    
    <script type="text/javascript">
    function fGetAnchorTitle(){
        var s="";
        /* 親ノード(UL) */
        var parentObj=document.getElementById("urlLists");
        for(var i in parentObj.childNodes){
            /* 子ノード(LI)*/
            var childObj=parentObj.childNodes[i];
            if(childObj.nodeName=="LI"){
                /* 子ノード(LI)の最初の子ノード(A) */
                s+=childObj.firstChild.title+"<br>";
            }
        }
        document.getElementById("resGetAnchorTitle").innerHTML=s;
    }
    </script>

    画像キャプション表示

    画像キャプション表示サンプルを見る
    <form action="#">
        <p><input type="button" value="画像キャプション表示" onclick="fShowGazoCap()" /></p>
    </form>
    
    <ul id="ThmbnailLinks">
        <li><a href="/content/img/pic1.png" title="Krispy Kreme Doughnuts by 有楽町丸井★"><img src="/content/img/pic1-thumb.png" alt="pic1" /></a></li>
        <li><a href="/content/img/pic2.png" title="クマさんケーキ by 新宿ALTA★"><img src="/content/img/pic2-thumb.png" alt="pic2" /></a></li>
        <li><a href="/content/img/pic3.png" title="すごい肉 by 牛兵衛 渋谷店★"><img src="/content/img/pic3-thumb.png" alt="pic3" /></a></li>
    </ul>
    
    <script type="text/javascript">
    var done_fShowGazoCap=false;
    function fShowGazoCap(){
        if(!done_fShowGazoCap){
            done_fShowGazoCap=true;
        }else{
            return false;
        }
        var ulObj=document.getElementById("ThmbnailLinks");
        for(var i in ulObj.childNodes){
            var liObj=ulObj.childNodes[i];
            if(liObj!=null && liObj.nodeName=="LI"){
                for(var j in liObj.childNodes){
                    var aObj=liObj.childNodes[j];
                    if(aObj!=null && aObj.nodeName=="A"){
                        var aTitle=aObj.title;
                        if(aTitle!=""){
                            var addObj=aObj.appendChild(document.createElement("span"));
                            addObj.innerHTML=aTitle;
                        }
                    }
                }
            }
        }
    }
    </script>
    

    関連コンテンツ

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

    投票する 投票結果を見る

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

    pagetop