getElementById, getElementsByName, getElementsByTagName
Language/JAVASCRIPT 2010. 5. 10. 15:04getElementById
document.getElementById(string)
string : id 속성값을 지정하는 string
getElementsByName
|
①collObjects |
같은 name 속성값을 가지는 개체의 콜렉션을 나타내는 개체 |
|
②string |
콜렉션을 만들 name 속성값을 지정하는 string |
getElementsByTagName
|
①collObjects |
같은 element 이름을 가진 개체의 콜렉션을 나타내는 개체, 주의할 것은 getElementsByTagName을 이용해서 특정한 element를 참조하면 이 element가 포함하고 있는 모든 child element도 포함된다는 것이다. |
|
②string |
element의 이름을 지정하는 string |
getlement.htm
if(indexx==0){
<html>
<head>
<title>getElementsByName </title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=euc-kr">
<SCRIPT-x>
function getelef(){
var indexx = document.form1.getele.selectedIndex
var indexxValue=document.form1.getele.options[indexx].value
var indexxseq = document.form1.sequence.selectedIndex
var resultID=document.getElementById("result");
if(indexx==0){
var getidx=document.getElementById("topmenu");
resultID.innerHTML=getidx.innerHTML
}else if(indexx==1){
var getbynamex=document.getElementsByName(indexxValue);
resultID.innerHTML=getbynamex[indexxseq].parentNode.innerHTML;
}else{
var getbytagnamex = document.getElementById("middlemenu").getElementsByTagName(indexxValue)
resultID.innerHTML=getbytagnamex[indexxseq].innerHTML;
}
}
</SCRIPT-x>
<style>
<!--
div { border-width:2; border-color:green; border-style:solid; }
-->
</style>
</head>
<body>
<form name="form1">
<p><select size="1" name="getele" onchange="getelef();">
<option value="topmenu">getElementById</option>
<option value="firstmenu">getElementsByName</option>
<option value="li">getElementsByTagName</option>
</select>
<select name="sequence" size="1" onchange="getelef();">
<option selected >1</option>
<option >2</option>
<option >3</option>
</select></p>
</form>
<UL>
<LI id="topmenu">getElementsByTagName
<UL>
<LI><BUTTON VALUE="first" NAME="firstmenu" >버튼 1</BUTTON>
<LI><BUTTON VALUE="second" NAME="firstmenu" >버튼 2</BUTTON>
<LI><BUTTON VALUE="third" NAME="firstmenu" >버튼 3</BUTTON>
</UL>
<LI id="topmenu">getElementsByName
<UL id="middlemenu" >
<LI><INPUT TYPE="text" value="type=text">
<LI><INPUT TYPE="checkbox">type=checkbox
<LI><INPUT TYPE="radio">type=radio
</UL>
</UL>
<div id="result" style="width:265px; height:160px; position:
<p> </p>
</div>
</body>
</html>
var getidx=document.getElementById("topmenu");
result.innerHTML=getidx.innerHTML
첫 번째 메뉴 즉 getElementById를 선택하면 topmenu라는 id를 가진 개체의 내부 html을 result라는개체의 innerHTML 속성에 대입한다. 즉 topmenu라는 개체의 innerHTML을 result라는 개체의 innerHTML로 그대로 가져가는 것이다.
}else if(indexx==1){
var getbynamex=document.getElementsByName(indexxvalue);
result.innerHTML=getbynamex[form1.sequence.selectedIndex].outerHTML;
두 번째 메뉴 즉 getElementsByName을 선택하면 그 메뉴의 value 속성값(firstmenu)을 변수 getbynamex에 대입한다. 같은 name 속성값을 가진 개체 중에서 두 번째 펼침메뉴에서 선택한 순서에 해당하는 개체의 outerHTML을 result 개체의 innerHTML로 대입한다.
}else{
var getbytagnamex = middlemenu.getElementsByTagName(indexxvalue)
result.innerHTML=getbytagnamex[form1.sequence.selectedIndex].outerHTML
세 번째 메뉴 즉 getElementsByTagName을 선택하면 그 개체의 value 속성값(li 태그)을 getbytagnamex라는 변수에 대입한다. li태그 중 오른쪽 펼침메뉴의 순서에 해당하는 순서에 있는 li태그의 outerHTML 속성을 result 개체의 innerHTML 속성에 대입한다.
}
}
function getelef(){
var indexx = document.form1.getele.selectedIndex
펼침메뉴에서 선택된 메뉴의 순서에 해당하는 정수를 변수 indexx에 대입한다.
var indexxValue=document.form1.getele.options[indexx].value
선택된 메뉴의 value 속성을 변수 indexxvalue에 대입한다. 이것이 속성 이름을 알아내는 것이다.
var indexxseq = document.form1.sequence.selectedIndex
선택된 메뉴의 순서를 지정해 주는 2번째 펼침메뉴 개체의 선택된 메뉴의 순서를 변수 indexxseq에 대입한다.
var resultID=document.getElementById("result");
선택된 값들을 오른쪽 박스에 보여주기 위해 박스 개체를 인식해서 resultID에 대입한다.
if(indexx==0){
펼침 메뉴에서 첫 번째 메뉴가 선택된 경우에 이 조건식이 실행된다. 이 메뉴는 오른쪽에 있는 메뉴의 순서와는 상관이 없다.
var getidx=document.getElementById("topmenu");
topmenu라는 개체를 인식해서 변수 getidx에 대입한다.
resultID.innerHTML=getidx.innerHTML
getidx내에 포함된 HTML을 resultID라는 박스의 내부에 그대로 포함시킨다.
}else if(indexx==1){
getElementsByName 메뉴를 선택한 경우에 이 조건식이 실행된다.
var getbynamex=document.getElementsByName(indexxValue);
getElementsByName 매서드는 indexxValue 변수에 의해 인식한 Name 속성이 지정된다. 그런데 indexxValue의 firstmenu 이므로 firstmenu라는 Name 속성을 가진 개체의 콜렉션을 변수 getbynamex라는 변수에 대입한다.
resultID.innerHTML=getbynamex[indexxseq].parentNode.innerHTML;
firstmenu라는 Name 속성을 가진 개체중 변수 indexxseq에 의해 지정된 순서에 해당하는 개체의 parent 개체내에 포함된 HTML을 resultID의 내부에 포함시킨다. netscape에서는 outerHTML을 지원하지 않기 때문에 우회적인 방법으로 사용했다.
}else{
그 박의 경우 즉 getElementsByTagName 메뉴를 선택한 경우에 아래의 명령문이 실행된다.
var getbytagnamex = document.getElementById("middlemenu").getElementsByTagName(indexxValue)
middlemenu개체내에 포함된 변수 indexxValue에 지정된 개체 즉 li 태그인 개체들의 콜렉션을 변수 getbytagnamex에 대입한다.
resultID.innerHTML=getbytagnamex[indexxseq].innerHTML;
li 태그중 변수 indexxseq에 의해 지정된 개체내에 포함된 HTML을 resultID 개체내에 포함시킨다.
}
}
'Language > JAVASCRIPT' 카테고리의 다른 글
| 키코드 (keyCode) (0) | 2010.05.10 |
|---|---|
| 이벤트 정의와 사용 (0) | 2010.05.10 |
| document 및 속성 (0) | 2010.05.10 |
| history (0) | 2010.05.10 |
| document.open, docment.write ,document.clear (0) | 2010.05.10 |