* 참조 방법
1) id 속성 값으로 검색하는 방법
- document.getElementById() 함수(메서드)를 사용하면 요소의 id 속성을 바탕으로 요소의 오브젝트를 참조할 수 있음.
- getElementById()는 document 오브젝트가 갖고 있는 메서드임.
|
document.getElementById("ID명") |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<!DOCTYPE html>
<html>
<head> ... </head>
<body>
<ul>
<li id="apple">사과</li> // innerHTML 프로퍼티로 참조할 수 있는 문자열
<li id="orange">오렌지</li>
<li id="grape">포도</li>
</ul>
<script type="text/javascript">
var a = document.getElementById("apple");
document.write(a.innerHTML + "는" + a.id);
</script>
</body>
</html> |
cs |
- '.'(피리어드)를 붙여 작성함으로써 오브젝트의 메서드나 프로퍼티라는 것을 나타냄.
- innerHTML 프로퍼티 : 요소의 태그에 들어 있는 내용 부분을 나타냄.
- 문자열이나 숫자를 +로 이어서 연결할 수 있음.
- 속성은 요소 오브젝트의 프로퍼티로 참조할 수 있음.
2) 이름이나 태그명으로 검색하는 방법
- name 속성으로 요소를 검색하여 참조하려면 아래 메서드를 사용해야 함.
|
document.getElementsByName("이름") |
- 태그명으로 검색한 요소를 참조하려면 아래 메서드를 사용해야 함.
document.getElementsByTagName("태그명")
- id 속성의 경우와는 달리, 지정된 name 속성이나 태그 속성을 갖고 있는 요소는 여러개 존재할 가능성이 있음.
- 그렇기 때문에 요소를 참조하렴녀 해당 요소가 몇 번째에 있는지를 지정해야 함.
|
var a = document.getElementsByName("yumina"); document.write(a[0].id); // yumina라는 이름을 가진 첫 요소의 id |
3) 상대 위치로 검색하는 방법
- 어떤 요소를 기준으로 그 자식 요소나 부모 요소를 참조하는 프로퍼티도 있음.
|
프로퍼티 |
참조 대상 |
|
childNodes |
자식 요소의 배열 |
|
firstChild |
자식 요소 중 첫 번째 것 |
|
lastChild |
자식 요소 중 마지막 것 |
|
parentNode |
부모 요소 |
|
previousSibling |
형제 요소 중 앞의 것 |
|
nextSibling |
형재 요소 중 다음 것 |
- 예를 들어 위의 JavaScript 코드를 아래와 같이 변경하면 부모 요소의 태그명을 구할 수 있음.
|
var a = document.getElementById("apple"); document.write(a.parentNode.tagName); |
- tagName 프로퍼티 : 요소의 태그명을 나타냄.
내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
'Programming > JavaScript' 카테고리의 다른 글
| 브라우저 객체 모델(BOM) (0) | 2017.05.20 |
|---|---|
| 객체 / 내장객체 (0) | 2017.05.20 |
| 자바스크립트 기초 문법 (0) | 2017.05.20 |
| 쿠키(Cookie) (0) | 2017.05.18 |
| JavaScript의 메서드 (0) | 2017.05.18 |
| JavaScript 이벤트 (0) | 2017.05.18 |
| DOM이란? (0) | 2017.05.17 |
| JavaScript란? (0) | 2017.05.17 |
