웹 페이지에 존재하는 HTML 태그를 가져오는 방법은 여러가지가 있는데, HTML 태그에서 개발자가 지정한 id 선택자를 이용해 그 아이디를 선택해 가져오는 방법이 있다.
| 메서드 이름 | 설명 |
| getElementById(id) | 태그의 id 속성이 매개변수와 일치하는 객체를 선택 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
// getElementById() 메서드로 각각 id가 'header-1'
// 그리고 'header-2'인 html 태그를 선택한다.
let header1=document.getElementById('header-1');
let header1=document.getElementById('header-2');
// innerHTML을 이용해 내부의 텍스트를 변경한다.
header1.innerHTML='This is Header-1';
header2.innerHTML='This is Header-2';
}
</script>
</head>
<body>
<!-- innerHTML로 인해 'This is Header-1'로 변경됨 -->
<h1 id="header-1">Header-1</h1>
<!-- innerHTML로 인해 'This is Header-2'로 변경됨 -->
<h1 id="header-2">Header-2</h1>
</body>
</html>
|
cs |
getElementById로 가져온 HTML 태그는 innerHTML을 이용해 내부의 텍스트 노드나 속성을 변경 및 조작을 할 수 있다.
HTML 태그에 id 선택자는 여러개의 HTML 태그를 하나의 id로 지정할 수 없다. 따라서 getElementById로 여러개의 HTML 태그를 가져오려고 하면 번거롭게 일일히 써줘야 하는 불편함이 있다. 그래서 단순히 HTML 태그를 선택해 가져오는 메서드가 존재한다.
| 메서드 이름 | 설명 |
| getElementsByName(name) | 태그의 name 속성이 매개변수와 일치하는 객체를 선택 |
| getElementsByTagName(tagName) | tagName 매개변수와 일치하는 문서 객체를 배열로 선택 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
let headers=document.getElementsByTagName('h1');
headers[0].innerHTML('getElementsByTagName()으로 선택된 Header1');
headers[1].innerHTML('getElementsByTagName()으로 선택된 Header2');
}
</script>
</head>
<body>
<h1>Header1</h1>
<h1>Header2</h1>
</body>
</html>
|
cs |
getElementByName(name)는 내부 매개변수로 name을 가져오는데 <h1>태그를 예로 들면 <h1 name='selected'>텍스트 노드</h1>같은 방식으로 내부에 name 속성을 지정해 두는 것을 말한다. getElementByName(name)과 getElementByTagName(tagName)은 모두 선택된 HTML 태그를 배열로서 정리하게 되는데, 위의 코드처럼 h1태그가 2개가 선택이 되었다면 위에 있는 <h1> 태그가 인덱스로 0번째고, 아래의 <h1> 태그가 인덱스로 1번째이다. 따라서 innerHMTL을 사용할때는 위에있는 <h1> 태그를 선택할 때는 인덱스의 0번째인 [0]을 명시해 주어야 한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
let headers=document.getElementsByTagName('h1');
for(let i=0; i<headers.length; i++){
headers[i].innerHTML='반복문으로도 사용가능하다.'
}
}
</script>
</head>
<body>
<h1>Header1</h1>
<h1>Header2</h1>
</body>
</html>
|
cs |
기본적으로 getElementByName()과 getElementByTagName()은 HTML 태그를 가져오게되면 배열로 정리가 되기 때문에 for 반복문을 통한 일괄 조작이 가능하다. 단 배열이라고 해서 for in 반복문은 사용해서는 안된다. for 반복문과는 다르게 for in 반복문을 사용하면 문서 객체 이외의 속성에도 접근이 되서 바뀔 수 있기 때문에 for in 반복문이 아닌 for 반복문을 사용해야한다.
| 메서드 이름 | 설명 |
| querySelector(선택자) | 선택자로 가장 처음 선택되는 문서 객체를 가져온다. |
| querySelectorAll(선택자) | 선택자를 통해 선택되는 문서 객체를 배열로 가져온다. |
querySelector(선택자)와 querySelectorAll(선택자)는 이전에 getElementById(id)와는 다르게 CSS3에서 사용하는 선택자로 문서 객체를 선택할 수 있게 만들어 준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script>
window.onload=function(){
let header1=document.querySelector('.class1');
let header2=document.querySelectorAll('.class2');
header1.innerHTML='querySelector(class1)';
header2[0].innerHTML='querySelectorAll(class2)';
header2[1].innerHTML='querySelectorAll(class2)';
}
</script>
</head>
<body>
<h1 class="class1">Header-1</h1>
<h1 class="class1">Header-1-1</h1>
<h1 class="class2">Header-2</h1>
<h1 class="class2">Header-2-1</h1>
</body>
</html>
|
cs |
'프로그래밍 공부 > JavaScript' 카테고리의 다른 글
| JavaScript - 이벤트 개요 (0) | 2019.12.18 |
|---|---|
| JavaScript - 문서 객체 스타일 조작 / 문서 객체 제거 (0) | 2019.12.17 |
| JavaScript - 문서 객체 생성 (0) | 2019.12.16 |
| JavaScript - 문서 객체 모델 개요 (0) | 2019.12.15 |
| JavaScript - 브라우저 객체 모델 / onload 이벤트 속성 / Audio 객체 (0) | 2019.12.15 |
