javascript 에서 html value 값을 버전관계없이 바꾸고 싶을때

브라우저의 종류에 따라서 text 값을 바꾸는 방식이 모두다 적용되는것은아니다.
아래 내용은 IE6, Netscape 6.2 and 7, Firefox 1.04,  Opera 8 on the PC. 동일하게 적용되는
과정을 알아본다.

<input type="button"> 선언된 버튼의 value 값을 바꿔보는데
첫번째 예제는  getElementById("ID").value 변수로 값을 바꾸는 방식이다

<input type="button" value="Button Text" id="myButton1"></input>
document.getElementById("myButton1").value="New Button Text";

위의 방식은 IE6 에서는  "Unknown Runtime Error; Netscape 7 에서는  won't change the text
에러가 날것이다. 그래서 두번째는 innerHTML 을 사용해서 바꾸는 방식이다.

document.getElementById("myButton1").innerHTML="New Button Text";

다음은 버튼 태그 사이의 text  값을 바꿔본다.
innerHTML 을 사용해서 바꾸었다.

document.getElementById("myButton2").innnerHTML=  "New Button Text using innerHTML";
<button type="button" id="myButton2">Button Label</button>

위의 방식은 Netscape 6.2 and 7.02 에서 쓰레기 값을 가져오게 되어 에러가 발생한다.
그래서 childNodes  를 아래와 같이 사용한다.
이와 같이 값을 바꾸고자 할때 버전에 구애받지 않게 적용하고 싶을 것이다.
아래의 함수는 처음에 childNodes 바꿀수 있는지 체크해서 시도하고 그게 안된다면 value 로 적용한다
그리고 그것도 안된다면 innerHTML 을 사용하는 전천후 함수이다.

<SCRIPT LANGUAGE="JavaScript">

<!--

function replaceButtonText(buttonId, text)

{

  if (document.getElementById)

  {

    var button=document.getElementById(buttonId);

    if (button){

      if (button.childNodes[0]){

        button.childNodes[0].nodeValue=text;

      }

      else if (button.value){

        button.value=text;

      }

      else //if (button.innerHTML){

        button.innerHTML=text;

      }

    }

  }

}

//-->

</SCRIPT>

replaceButtonText('myButton1', 'new button text');