【Javascript】DOM Samples /Core　Node/nodeValue

ボタンをクリックすると下記「jsGadgetリンク」のAタグ内の各属性値(nodeValue)をダイアログ表示します

<div id="test"><a href="http://jsgt.org/" target="targetWin">jsGadget</a></div>

<form>
  <input type    = "button" 
         value   = "hrefは?"
         onclick = "att1 = getElementById('test').firstChild.attributes ;
                    alert(att1.getNamedItem('href').nodeValue)">
  <input type    = "button" 
         value   = "targetは?"
         onclick = "att1 = getElementById('test').firstChild.attributes ;
                    alert(att1.getNamedItem('target').nodeValue)">
</form>

ここでは、<div id="test">の最初の子ノード(firstChild)であるAタグ内の属性をNamedNodeMapにより取得して 各nodeValueをダイアログ表示しています。

*注意: この場合、もし<div id="test">と<a href=...の間に空白や改行を入れると<a href=...はfirstChildではなくなりますがWinIEだけはそれを無視しますので、互換をとる場合は気をつける必要があります。

ただ、DOMへのアクセス方法は１通りではありません。参考までに下記のような方法やそれ以外にもいろいろなアクセス方法が用意されています。

<div id="test"><a href="http://jsgt.org/" target="targetWin">jsGadget</a></div>

<form>
  <input type="button" 
         value="hrefは?"
         onclick="alert(getElementById('test').firstChild.getAttribute('href'))">
  <input type="button" 
         value="targetは?"
         onclick="alert(getElementById('test').firstChild.getAttribute('target'))">
</form>

<div id="test"><a href="http://jsgt.org/" target="targetWin">jsGadget</a></div>

<form>
  <input type="button" 
         value="hrefは?"
         onclick="alert(getElementById('test').firstChild.href)">
  <input type="button" 
         value="targetは?"
         onclick="alert(getElementById('test').firstChild.target)">
</form>

入力フィールドへ書いたURLでAタグのリンク先を書き換えます。

<div id="test2"><a href="javascript:alert('url入力してボタンを押してください')">
     下のフォームに書いたリンク</a></div>

<form>
  <input type     = "text"
         name     = "url2"
         value    = "http://"
         style    = "width : 400px"><br>
  <input type="button" 
         value="リンクを書き換えます"
         onclick="att1 = getElementById('test2').firstChild.attributes ;
                  att1.getNamedItem('href').nodeValue = this.form.url2.value">
</form>

ボタンをクリックすると下記の入力フィールドへ書いたURLでAタグ内のhref属性値(nodeValue)を書き換えます。 最初、何もしない状態でリンクをクリックすると、href="javascript:alert('url入力して...のダイアログが出ますが、 入力フィールドへURLを書いてからボタンクリックすると、このhref="javascript:alert('url入力して...の部分 がURLに書き換わり、クリックするとそのURLが読み込まれます。

下記画像にマウスカーソルが触れると画像が変わります。

<script language='JavaScript'>
<!--

  function chgImgSrc(oj,src)
  {
    imgsrc = oj.attributes.getNamedItem('src')
    imgsrc.nodeValue = src
  }

//-->
</script>
下記画像にマウスカーソルが触れると画像が変わります。
<br>
<br>
<img src = "../CU20040306/plus.gif" 
     onmouseover = "chgImgSrc(this,'../CU20040306/minus.gif')"
     onmouseout  = "chgImgSrc(this,'../CU20040306/plus.gif')">

IMGタグの中のonmouseover（カーソルが触れたとき発生）,onmouseout（カーソルが離れたとき発生）というイベント ハンドラによって関数chgImgSrc(oj,src)を起動しています。引数ojにはIMGタグ自身がthisによって渡され、引数srcには 書き換えたい画像のURLが渡されます。そして、関数1行目の

oj.attributes.getNamedItem('src')

はIMGタグ(要素)のNamedNodeMap配列attributesの中の「src」属性のNodeをとりだしています。 次に、そのsrcの属性ノードのnodeValueを、引数srcで渡された 画像のURLで書き換えるというわけです。

もちろん、従来のJavaScript的下記のような書き方もDOM-CoreではなくDOM1-HTMLやDOM2-HTMLなどで規定されておりDOM的に?有効です。

<script language='JavaScript'>
<!--

  function chgImgSrc2(oj,src)
  {
    oj.src = src
  }

//-->
</script>
下記画像にマウスカーソルが触れると画像が変わります。
<br>
<br>
<img src = "../CU20040306/plus.gif" 
     onmouseover = "chgImgSrc2(this,'../CU20040306/minus.gif')"
     onmouseout  = "chgImgSrc2(this,'../CU20040306/plus.gif')">

下記画像にマウスカーソルが触れると画像が変わります。 
<img src = "../CU20040306/plus.gif" 
     onmouseover = "this.src='../CU20040306/minus.gif'"
     onmouseout  = "this.src='../CU20040306/plus.gif'">