DOMプロパティ｜DOM（Document Object Model）: Element｜JavaScript/DOM

attributes[]〔ノードの属性リストを取得〕
childNodes[]〔子ノードのリストを取得〕
className〔クラス名の取得・設定〕
clientWidth／clientHeight〔要素の内部の幅、高さを取得〕
clientLeft／clientTop〔要素の左ボーダーの幅、上ボーダーの幅を取得〕
dir〔テキストの方向の取得・設定〕
firstChild〔最初の子ノードを取得〕
id〔ID名の取得・設定〕
innerHTML〔ノード内のHTML要素の取得・設定〕
innerText / textContent〔ノード内のプレーンテキストの取得・設定〕
lang〔言語コードの取得・設定〕
lastChild〔最後の子ノードを取得〕
localName〔ローカル名の取得〕
name〔要素のname属性を取得・設定〕
namespaceURI〔名前空間のURIの取得〕
previousSibling/nextSibling〔直前・直後にある兄弟ノードを取得 :: Mac風OSメニュー〕
nodeName〔ノードの名前を取得〕
nodeType〔ノードの型を取得〕
nodeValue〔ノードの値を取得〕
offsetWidth／offsetHeight〔配置に応じた要素の幅・高さを取得〕
offsetLeft／offsetTop〔要素の左ボーダーから基準要素の左ボーダーまでの距離、要素の上ボーダーから基準要素までの距離〕
offsetParent〔オフセットの基準となる要素〕
ownerDocument〔オーナードキュメントを取得〕
parentNode〔親ノードを取得〕
prefix〔名前空間の識別子を取得・設定〕
scrollWidth／scrollHeight〔要素のスクロールビューの幅・高さを取得〕
scrollLeft／scrollTop〔要素の左スクロールオフセット、上スクロールオフセットを取得・設定〕
style〔要素のstyle属性の宣言を表すオブジェクトを取得〕
tagName〔要素名の取得・設定〕
tabIndex〔要素のタブインデックス番号を取得〕
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>

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

サンプルを見る

<!-- テーブルの行をストライプに -->
<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プロパティを使いましょう。

Chrome

IE8

<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>

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

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を返します。

ノードの型
型	説明
1	Element（エレメント）
2	Attribute（属性）
3	Text（テキスト）
4	CDATA Section（CDATAセクション）
5	Entity Reference（エンティティリファレンス）
6	Entity（エンティティ）
7	Processing Instruction（処理命令）
8	Comment（コメント）
9	Document（ドキュメント）
10	Document Type（ドキュメントタイプ）
11	Document Fragment（ドキュメントフラグメント）
12	Notation（記述）

<!-- ノードの型を調べる -->
<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>

DOM（Document Object Model）: Element DOM関数

DOM（Document Object Model）: Element DOMメソッド

DOM（Document Object Model）: ElementDOMプロパティ

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

特定のimg要素の属性取得

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

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

子ノードの値を取得

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

classNameクラス名の取得・設定

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

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

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

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

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

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

firstChild最初の子ノードを取得

idID名の取得・設定

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

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

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

lastChild最後の子ノードを取得

localNameローカル名の取得

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

namespaceURI名前空間のURIの取得

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

nodeNameノードの名前を取得

nodeTypeノードの型を取得

nodeValueノードの値を取得

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

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

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

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

parentNode親ノードを取得

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

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

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

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

tagName要素名の取得・設定

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

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

リンクのtitle属性取得

画像キャプション表示

関連コンテンツ

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

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

className
クラス名の取得・設定

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

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

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

firstChild
最初の子ノードを取得

id
ID名の取得・設定

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

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

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

lastChild
最後の子ノードを取得

localName
ローカル名の取得

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

namespaceURI
名前空間のURIの取得

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

nodeName
ノードの名前を取得

nodeType
ノードの型を取得

nodeValue
ノードの値を取得

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

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

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

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

parentNode
親ノードを取得

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

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

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

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

tagName
要素名の取得・設定

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

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