|
Javascript & JQuery & CSS > Javascript - 문서객체 가져오기 - getElementById() , getElementsByName() , getElementsByTagName() , getElemen
1. getElementById()
문서객체 중 ID 값을 가져오는데 사용되는 함수 입니다.
2. getElementsByName()
문서객체 중 NAME 값을 가져오는데 사용되는 함수 입니다.
읽어드린 객체는 배열로 저장이 됩니다.
문서에 지정된 태그 객체를 나타냅니다. 결과는 배열 형식이되기 때문에 length에서 사용되는 태그의 수를 가져 오거나
태그로 표시되는 내용을 변경할 수있습니다.
주어진 클래스 이름이 주어진 요소의 집합을 반환합니다.
document 개체를 호출하면 루트 노드를 포함하여 전체 문서를 검색합니다. 임의의 요소로 getElementsByClassName를 호출할 수있습니다.
이 경우에는 주어진 클래스 이름을 사용하여 지정된 루트 요소 아래의 요소만 반환합니다.
문서객체 중 ID 값을 가져오는데 사용되는 함수 입니다.
// 문서 객체를 가져옵니다.
var header1 = document.getElementById('header_1');
var header2 = document.getElementById('header_2');
// 문서 객체의 속성을 변경합니다.
header1.innerHTML = 'with getElementById()';
header2.innerHTML = 'with getElementById()';
<div id="header_1"> Header </div>
<div id="header_2"> Header </div>
함수를 이용해 넘어온 변수를 객체로 변경하고 싶을 경우는 아래처럼 처리 하면 됩니다.
function test(form_name)
{
var OBJ = eval("document.getElementById('"+ form_name + "')");
}
2. getElementsByName()
문서객체 중 NAME 값을 가져오는데 사용되는 함수 입니다.
읽어드린 객체는 배열로 저장이 됩니다.
window.onload = function () {
alert(document.getElementsByName("point").length);
var OBJ_Point = document.getElementsByName("point");
//변수 OBJ_Point 는 문서 객체를 가지는 배열로 들어값니다. 아래처럼 처리됩니다.
for (var i = 0; i < OBJ_Point.length; i++) {
alert(OBJ_Point[i].value);
}
}
<body>
<input type="text" name="point" value="11" size='10'>
<input type="text" name="point" value="22" size='10'>
<input type="text" name="point" value="33" size='10'>
<input type="text" name="point" value="44" size='10'>
<input type="text" name="point" value="55" size='10'>
</body>
3. getElementsByTagName()문서에 지정된 태그 객체를 나타냅니다. 결과는 배열 형식이되기 때문에 length에서 사용되는 태그의 수를 가져 오거나
태그로 표시되는 내용을 변경할 수있습니다.
window.onload = function () {
alert(document.getElementsByTagName("input").length);
var OBJ_Point = document.getElementsByTagName("input");
for (var i = 0; i < OBJ_Point.length; i++) {
alert(OBJ_Point[i].type);
}
}
<body>
<input type="text" name="point" value="11" size='10'>
<input type="text" name="point" value="22" size='10'>
<input type="text" name="point" value="33" size='10'>
<input type="text" name="point" value="44" size='10'>
<input type="text" name="point" value="55" size='10'>
</body>
4. getElementsByClassName()주어진 클래스 이름이 주어진 요소의 집합을 반환합니다.
document 개체를 호출하면 루트 노드를 포함하여 전체 문서를 검색합니다. 임의의 요소로 getElementsByClassName를 호출할 수있습니다.
이 경우에는 주어진 클래스 이름을 사용하여 지정된 루트 요소 아래의 요소만 반환합니다.
|
|
||||
|
이메일 문의 : cak0280@nate.com Copyright 2000 By ENTERSOFT.KR All Rights Reserved. |