DOM의 메소드는 보통 이름을 보면 메소드의 특징을 잘 알 수 있다.
var ultraman_a = document.getElementById(ultraman);
라고 한다면 문서 내에서 ultraman이라는 id를 가진 element를 불러와서
ultraman_a 라는 객체에 저장시킨다는 뜻이다.
이처럼 getElementById 는 특정 아이디의 요소 노드에 직접 접근할 수 있는 메소드이다. 자바스크립트는 대소문자를 구분하기 때문에 사용할 때 대소문자 구분에 주의하여야 한다.
아래 예시 소스가 있다.
<doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>how can I get there</title>
<script type="text/javascript">
var purchases = document.getElementById("purchases");
alert(typeof purchases+"기타넣고싶은것")
</script>
</head>
<body>
<h1>how can I get there</h1>
<p title="i don't know">can you listen to me?</p>
<ul id="purchases">
<li>chew</li>
<li>milk</li>
<li>water</li>
</ul>
</body>
</html>
purchases라는 id명을 가진 요소노드를 불러와 purchases라는 객체를 만든다.
그리고 alert (typeof purchases); 에서 typeof 는 purchases라는 객체의 type을 가리키는 것이다. purchases는 객체이므로 object 라는 대화상자가 뜨게 될 것이다.
-------------------
getElementsByTagName은
getElementById 와 마찬가지로 요소노드에 접근하는 메소드이다.
다만 id명을 통해 접근하는 것이 아닌 요소노드의 태그명으로 접근하는 것이다.
var items = document.getElementsByTagName("li");
라고 하면 문서내의 <li> 태그들을 모두 불러와 items이라는 변수에 저장하게 된다. items 라는 변수는 물론 객체변수이고 만약에 문서내 <li> 태그들이 여러개라면 items라는 변수는 1차원 배열이 된다.
(items[0], items[1], items[2] ... 이런식으로...)
그렇기 때문에 위에 메소드명을 보면 Elements 라고 복수형으로 쓰여 있는 걸 알 수 있다.
(소스)
<script type"text/javascript
function Func0()
{var items = document.getElementsByTagName("li"); alert(items.length);}
window.onload = Func0;
</script>
문서내 <li>태그들을 모두 불러와 items라는 1차원 배열 객체형 변수를 생성해 저장하고 alert(items.length) 에서 그 배열 변수의 길이가 몇인지 대화상자를 띄워서 출력하라는 것이다. 배열변수의 길이는 곧 문서내 <li>태그의 갯수이다.
--------------------------
getAttribute 는 특정 요소노드 내에서 특정 한 속성값을 가져오는 메소드이다.
var para = document.getElementById("홍길동");
var title = para.getAttribute("title")
위의 소스를 보면
첫 번째 줄에는 "홍길동"이라는 id를 가진 요소노드를 불러와 para라는 객체를 만들어 저장하고
두 번째 줄에는 para내 객체에서 "title" 이라는 속성노드의 값을 title이라는 변수에 저장하는 것이다.
(소스)
function Func2() {
var paras =
document.getElementsByTagName("ul");
for (var i=0;i<paras.length
;i++ ) { alert(paras[i].getAttribute("id")); }
}
window.onload=Func2;
소스 설명을 하자면 문서내에서 <ul>태그들을 불러와 paras라는 변수에 저장하고 (만약 <ul>태그가 여러개면 paras는 1차원 배열 변수가 될 것이다.)
그렇게 생성된 paras[0..1..2...]라는 객체 변수들이 가진 속성노드 중 id가 가진 속성값을 for문을 이용해 대화상자를 띄워 출력시키라는 소스이다.
(<ul>태그가 여러개라면 대화상자가 갯수만큼 차례로 뜨게 될 것이다.)
--------------------------
앞의 강좌에서 getAttribute가 속성값을 불러오는 메소드였다면
setAttribute 메소드는 속성값을 변경시키는 메소드이다.
사용방법은 객체명.setAttribute("속성노드명", 새로운속성값); 이다.
(예) object.setAttribute("id", 속성값);
- object라는 객체의 id 라는 속성이 가진 값이 "속성값"으로 바뀌게 된다.
(소스)
function Func4() {
var list = document.getElementsByTagName("p");
for (var i=0;i<list.length ;i++ ) { list[i].setAttribute("title","Please
smile"); }
}
window.onload=Func4;
문서내에 <p>태그들을 불러와 list라는 1차원 배열 객체에 저장하고
for문을 이용해 list 객체의 "title"이라는 속성노드의 기존 속성값을 "please smile" 이라는 문자열 값으로 바꿔준다.
출처 : 주옥단편
'progarm_old > [HTML-JS]' 카테고리의 다른 글
| MouseOver (0) | 2012.07.11 |
|---|---|
| 객체, DOM, 노드에 대해서 (0) | 2012.07.11 |
| 금지단어 설정하기 (0) | 2012.06.21 |
| urldecode/urlencode 디코더/인코더 (0) | 2012.06.05 |
| colgroup 열 (0) | 2012.06.05 |