반응형

문서에서 어떤 문자열이나 특정 요소를 컨트롤 하고자 하는 경우에 노드를 참조하는 방법

 

  • 직접 접근 - 노드의 id값이나 name값 또는 태그명을 이용하여 직접 노드를 참조(성능 저하 고려)
  • 노드 워킹 - 특정 노드를 기준으로 자식, 또는 부모, 형제 노드에 접근하여 참조(절차 복잡도 고려)

 

 

1. 노드의 id값을 이용하여 노드를 참조하기

    getElementById()

 

HTML문서에서 요소에 부여하는 id속성을 문서내에서 고유함.

이 id값을 이용하여 특정 노드를 자바스크립트로 참조하여 조작이 가능

 

getElementByIdtest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>다이렉트 액세스</title>
<script type="text/javascript">
function btn_onclick() {
        var result = document.getElementById('result');
        result.innerHTML = '안녕하세요,' + document.fm.name.value + '씨！';
        //result.innerHTML = '안녕하세요,' + document.getElementById('name').value + '씨！';
}
</script>
</head>
<body>
<form name="fm">
<label>이름：
  <input type="text" id="name" name="name" size="15" /></label>
<input type="button" value="송신" onclick="btn_onclick()" />
<div id="result"></div>
</form>
</body>
</html>
 
 cs

innerHTML : 현재 요소의 내용을 가져오거나 설정할 수 있는 프로퍼티이다.

 

2. 노드의 태그 이름을 이용하여 노드를 참조하기

    getElementsByTagName()

 

동일한 태그가 여러 개 있을 경우 집합을 반환한다.

 

getElementsByTagNametest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>다이렉트 액세스</title>
<script type="text/javascript">
window.onload = function() {
        var result = [];
        var list = document.getElementsByTagName('a');
        for(var i = 0; i < list.length; i++){
                result.push(list.item(i).href);
        }
        window.alert(result.join('\n'));
}
</script>
</head>
<body>
<a href="http://www.naver.com/">검색 사이트 - NAVER</a><br />
<a href="http://www.google.com/">검색 사이트 - GOOGLE</a><br />
<a href="http://blog.itthis.me/166?category=215492">자바스크립트 시작하기</a>
</body>
</html>
 
 cs

 

3. 노드의 클래스 속성을 이용하여 노드 참조하기

    getElementsByClassName()

 

동일한 클래스 이름을 가진 요소를 반환

 

getElementsByClassNametest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>다이렉트 액세스</title>
<script type="text/javascript">
window.onload = function() {
  var result = [];
  var list = document.getElementsByClassName('my');
  for(var i = 0; i < list.length; i++){
    result.push(list.item(i).href);
  }
  window.alert(result.join('\n'));
}
</script>
</head>
<body>
<a href="http://www.naver.com/">검색 사이트 - NAVER</a><br />
<a href="http://www.google.com/">검색 사이트 - GOOGLE</a><br />
<a href="http://blog.itthis.me/166?category=215492">자바스크립트 시작하기</a>
</body>
</html>
 
 cs

 

4. 노드의 이름 속성을 이용하여 노드 참조하기

    getElementsByName()

 

앞의 예제에서 getElementsByClassName을 getElementsByName으로 변경

a태그에 지정된 class속성을 name속성으로 변경

 

 

5. 상대위치로 노드 참조하기

childNodestest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>노드 워킹</title>
<script type="text/javascript">
window.onload = function() {
        var result = [];
        var s = document.getElementById('food');
        var opts = s.childNodes;
        for(var i = 0; i < opts.length; i++) {
                var opt = opts.item(i);
                if(opt.nodeType == 1) {
                        result.push(opts.item(i).value);
                }
        }
        window.alert(result.join(','));
}
</script>
</head>
<body>
<form name="fm">
        가장 먹고 싶은 음식은？：
        <select id="food" name="food">
                <option value="라면">라면</option>
                <option value="만두">만두</option>
                <option value="불고기">불고기</option>
        </select>
        <input type="submit" value="송신" />
</form>
</body>
</html>
 
 cs

위 예제는 food id를 가진 노드를 찾아 하위 노드 집합을 가져온다.

이 때 하위 노드 집합에 공백이나 개행이 텍스트 노드의 형태로 인식될 수 있다.(브라우저마다 다름)

이럴때 option태그만 가져오게 하려는 경우는 nodeType을 활용한다.

nodeType의 반환값

반환값

개요

1

요소 노드

2

속성 노드

3

텍스트 노드

4

CDATA 섹션

5

실제 참조 노드

6

실제 선언 노드

7

처리 명령 노드

8

코멘트 노드

9

문서 노드

10

문서형 선언 노드

11

문서의 단편(fragment)

12

기법 선언 노드

firstChildtest.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>노드 워킹</title>
<script type="text/javascript">
window.onload = function() {
        var result = [];
        var s = document.getElementById('food');
        var child = s.firstChild;
        while(child) {
                if(child.nodeType == 1) {
                        result.push(child.value);
                }
                child = child.nextSibling;
        }
 
        window.alert(result.join(','));
}
</script>
</head>
<body>
<form name="fm">
        가장 좋아하는 음식은？：
        <select id="food" name="food">
                <option value="라면">라면</option>
                <option value="만두">만두</option>
                <option value="불고기">불고기</option>
        </select>
        <input type="submit" value="송신" />
</form>
</body>
</html>
 
 cs

일반적으로 위 예제의 실행결과는 같으나 요소간의 공백이나 개행은 브라우저마다 다르므로 크로스브라우징을 고려한다면 노드타입을 고려하여 작성하도록 하자.

반응형
저작자표시 비영리 변경금지

'교육자료 > Javascript' 카테고리의 다른 글

18-3. 노드 치환하기  (0) 2019.05.13
18-2. 속성 값 가져오기  (0) 2019.05.13
18-1. DOM(Document Object Model)  (0) 2019.05.13
17-7. Screen 브라우저 객체  (0) 2019.05.13
17-6. Navigator 브라우저 객체  (0) 2019.05.13

+ Recent posts

티스토리툴바