8.3 getElementById(), getElementsByTagName() 메서드를 이용한 접근
지금까지는 HTML DOM에서 “A를 부모 노드로 하는 자식 노드(들)은 어떤 것들이 있는가?”와
같이 조금은 불편하고 복잡한 방법으로 노드에 접근을 했습니다. 하지만
DOM에는 이보다 발전된 형태의 getElementById(),
getElementsByTagName() 메서드 2개를 제공하여 원하는 노드에 직접 접근이
가능하도록 지원합니다.
첫 번째 메서드인 getElementById() 메서드는
id 속성을 이용하여 해당 속성을 가진 노드에 접근하는데 사용할 수 있는 메서드이고 두 번째 메서드인 getElementsByTagName() 메서드는 요소(Element) 이름을
이용하여 노드에 접근할 수 있도록 지원합니다.
먼저 첫 번째 메서드인 getElementById() 메서드는 다음과 같은 형식을 이용합니다.
var retElement = document.getElementById(id이름);
id이름은 id 속성값을 나타내며 이를 입력 파라미터로
입력하면 HTML 문서 내에서 id이름을 갖는 요소를 반환합니다. 이제 어떻게 사용할 수 있는지 예제를 통해 알아볼까요? 다음과 같이 body 요소 블록 안에 h5, img 요소가 포함된 형태로 간단하게
작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>getElementById() 예제</title>
</head>
<body id="body1">
<h5
id="h5_id">getElementById() 메서드
</h5>
<img id="img_id"
src="flower2.jpg" />
<script type=”text/javascript”>
//처리할 코드들
</script>
</body>
</html>
위와 같이 작성한 후 “getElementByIdMethod.html”로 저장하고 IE9를 통해 보면 다음과 같이 나타납니다.
위 결과에서
보는 것처럼 “getElementById() 메서드”와 “flower2.jpg” 이미지가 나타나게 되는데
getElementById() 메서드를 이용하여 body, h5, img 요소에 스타일을
적용해봅니다. 이를 위해서 위 코드에서 <script>…</script>
블록 안에 다음과 같이 코드를 작성합니다.
<script
type="text/javascript">
var retbody =
document.getElementById("body1");
var reth5 =
document.getElementById("h5_id");
var retimg =
document.getElementById("img_id");
retbody.style.backgroundColor="yellow";
reth5.style.fontFamily="century
gothic";
reth5.style.fontSize="20";
reth5.style.color="blue";
retimg.style.border="2px dotted
darkgreen";
</script>
id 속성을 이용하여 각각 body, h5, img 요소로부터 해당 요소를 반환받아 style 속성을 이용하여 배경색을 yellow, h5 요소의 폰트를
“century gothic”으로 폰트 크기는 20, 폰트
색상은 blue로 설정하고 마지막으로 img 요소의 테두리(경계)를 2 픽셀 크기의
점선, 짙은 녹색으로 나타내도록 처리합니다. 저장한 후 IE9를 통해 보면 다음과 같이 getElementById() 메서드를
이용하여 원하는 요소에 쉽게 스타일을 적용할 수 있습니다.
앞서 노드(node)의 주요 속성에서 innerHTML 속성은 노드의 Text 값을 가져오거나 변경하고자 할 때 사용한다고 설명했는데 실제로 가져오는 방법과 변경하는 법을 알아봅니다.
위 예제에서 현재 h5의 Text 값은 “getElementById() 메서드”입니다. 먼저 현재의 h5의 Text값을
가져와서 나타냅니다. 그 다음 “innerHTML 속성에
의해 값이 변경되었습니다.”로 나타나도록 다음과 같이 해당 부분을 추가합니다.
retimg.style.border="2px dotted
darkgreen";
var retText =
document.getElementById("h5_id").innerHTML;
document.write("<br />h5 요소의 Text : " +
retText + "<br />");
reth5.innerHTML="innerHTML 속성에
의해 값이 변경되었습니다.";
</script>
저장한 후 IE9를 통해서 확인하면 다음과 같이 h5 요소의 Text 값이 이미지 하단에 나타나고 이미지 상단에는 변경된 Text 값이
나타납니다.
두 번째로 getElementsByTagName() 메서드를 알아볼까요? getElementsByTagName()는 요소의 이름을 입력 파라미터를 입력하여 HTML 문서에서 요소 이름에 해당하는 모든 노드들을 반환받는 메서드로 다음과 같은 형식을 이용합니다.
var retNodes = document.getElementsByTagName(Element이름);
메모장을 열어서
다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>getElementsByTagName() 예제</title>
</head>
<body>
<ul>
<li>사과</li>
<li>딸기</li>
<li>파인애플</li>
</ul>
<script type=”text/javascript”>
</script>
</body>
</html>
위와 같이 작성한 후 “getElemenstByTagNameMethod.html”로 저장하고 IE9를 통해 확인하면 다음과 같이 과일 목록을 보여줍니다.
이제 getElemenstByTagName() 메서드와 Node의 nodeName, nodeValue 속성을 이용하여 요소의 이름과 해당 요소의
Text 값을 나타내도록 다음과 같이 <script> … </script> 코드
블록을 작성합니다.
<script
type="text/javascript">
var retliNodes = document.getElementsByTagName("li");
document.write("모두 " + retliNodes.length + "개의 li 요소가
발견됨 <br />");
for(i=0; i< retliNodes.length;
i++) {
document.write(
retliNodes[i].nodeName+" : "+
retliNodes[i].childNodes[0].nodeValue+"<br />");
}
</script>
저장한 후 IE9를 통해 보면 다음과 같이 나타나게 됩니다.
이상으로 DOM이란 무엇이고 Node의 몇 가지 주요 속성, 메서드를 이용하여 기존의 HTML 문서에 요소와 관련하여 어떻게 추가, 수정, 삭제할 수 있는지에 대해서 알아보았습니다. 이러한 기본적인 내용을 토대로 여러분들이 관련 사이트이나 문서 등을 참조하여 보다 심화된 내용으로 학습해 보기를 바라며 이만 JavaScript에 대한 부분을 마칩니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.3 색상(color)과 스타일(style) (0) | 2013.08.07 |
|---|---|
| 4장 Canvas (0) | 2013.08.06 |
| 8.2.3 removeChild() 메서드를 이용한 노드의 삭제 (0) | 2013.08.06 |
| 8.2.2 replaceChild() 메서드를 이용한 기존 노드의 교체 (0) | 2013.08.06 |
| 8. DOM(Document Object Model) (0) | 2013.08.06 |
