이전글
DOM 노드 ID, 태그명, name 속성으로 탐색하기
이전시간에는 간단하게 노드를 생성하고 특정 태그의 자식태그로 추가하는것을 해봤습니다. 이번글에서는 특정 노드를 id값, name 속성, 태그명으로 탐색하는 방법을 알아보겠습니다.
노드 탐색(검색)하기
아래 그림과 같은 DOM 구조에서 IMG 태그를 찾는 방법을 알아보겠습니다.
|
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
var imgTag = document.getElementById('img1');
imgTag.width = 300;
imgTag.height = 350;
}
</script>
</head>
<body>
<h1>Dom</h1>
<img id="img1" name="imgTag">
</body>
</html> |
cs |
탐색 메서드
노드를 탐색하기 위해서는 다음과 같이 document객체의 메서드들을 이용합니다.
| 메서드명 |
설명 |
|
getElementById(요소의 id) |
태그의 id 속성의 값을 통해 탐색합니다. id는 유일해야 하므로 최초에 검색된 하나만을 리턴합니다. |
|
getElementsByName(요소의 name) |
태그의 name속성과 일치하는 노드들을 탐색하여 배열로 리턴합니다. |
|
getElementsByTagName(요소의 태그명) |
특정 태그들을 모두 탐색하여 배열로 리턴합니다. |
요소의 아이디값으로 탐색하기
getElementById() 메서드를 이용해 id값으로 Dom 요소를 탐색할 수 있습니다.
탐색한 imgTag 의 width와 height값을 변경해 주었습니다.
|
<script>
window.onload = function () {
var imgTag = document.getElementById('img1');
imgTag.width = 300;
imgTag.height = 350;
}
</script> |
cs |
해당 html 파일을 브라우저로 실행하면 src 속성값은 지정해주지 않았으므로 가로 300 세로 350 크기의 공백 이미지가 나타납니다.
태그명으로 탐색하기
특정 태그를 기준으로 탐색하는 경우에는 getElementsByTagName() 메서드를 사용합니다.
그런데 여기서 id로 탐색했을때와는 달리 탐색결과가 배열로 리턴되고 배열의 index로 참조하는것을 볼 수 있습니다. id의 경우 유일해야 하므로 하나의 요소만을 탐색하여 리턴하지만 태그로 탐색하는 경우 동일한 태그 모두를 탐색하여 NodeList라는 배열로 결과를 리턴하기 때문입니다.
|
<script>
window.onload = function () {
var imgTags = document.getElementsByTagName('img');
imgTags[0].width = 300;
imgTags[0].height = 350;
}
</script> |
cs |
여기서는 img 태그가 하나만 존재했으므로 [0] 번 index 요소만 존재하였고, 결과는 id로 탐색했을 때와 동일합니다.
name 속성값을 기준으로 탐색하기
html 태그에는 name속성을 사용할 수 있습니다. 이러한 name 속성값은 form 태그 내부에 작성한 데이터를 서버에 전송한 이후 서버측에서 구분하는 기준이 되기도 합니다. 그리고 name 속성값은 여러개가 중복될 수도 있습니다. 취미를 체크박스로 여러개 체크하는 경우에는 여러 input 태그의 checkbox들이 hobby라는 name을 가질 것입니다.
|
<script>
window.onload = function () {
var imgTags = document.getElementsByName('imgTag');
imgTags[0].width = 300;
imgTags[0].height = 350;
}
</script> |
cs |
name 속성값을 기준으로 탐색하는 경우에는 getElementsByName() 메서드를 사용합니다. 이또한 동일한 name값이 존재할 수 있으므로 배열로 결과를 리턴합니다.
'JavaScript' 카테고리의 다른 글
| [자바스크립트] DOM 객체 스타일(style) 변경하기 (0) | 2018.06.08 |
|---|---|
| [자바스크립트] DOM 객체 innerHTML 속성 (0) | 2018.06.08 |
| [자바스크립트] DOM이란? DOM 개념 및 자바스크립트 DOM 다루기 (0) | 2018.05.31 |
| [자바스크립트] Date 객체 (0) | 2017.11.13 |
| [자바스크립트] Number 객체 (0) | 2017.11.13 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그