JavaScript로 HTML 요소를 찾고 변경하기
2019. 9. 22. 21:31
자바스크립트로 특정한 요소를 조작하려면 먼저 DOM에서 원하는 요소를 찾아야 합니다.
요소를 찾기 위해 크게 두가지 방법을 사용합니다.
- id로 찾기
- 태그 이름으로 찾기
1. id로 찾기
지정된 id를 이용해 요소를 찾습니다. getElementById()라는 메서드를 사용합니다.
아래와 같은 문장은 id="header"를 지닌 요소를 찾습니다.
만약 요소를 발견했다면 해당 요소를 객체 형태로 반환합니다. 발견되지 않았다면 null을 반환합니다.
var element = document.getElementById("header");아래의 코드를 실행하면 header라는 id를 가지고 있는 태그를 찾아 콘텐츠를 변경합니다.
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1 id="header"></h1>
<script>
// header라는 id를 가지고 있는 <h1> 태그를 찾아 변수에 저장합니다.
var element = document.getElementById("header");
// 요소의 콘텐츠를 변경합니다.
element.innerText = "Hello World!";
// 요소의 콘텐츠를 출력합니다.
document.write(element.innerText);
</script>
</body>
</html>버튼을 클릭하면 showText() 메서드를 실행합니다.
showText()는 텍스트 필드의 값을 읽어서 alert로 띄웁니다.
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<input type="text" name="text" id="target" />
<input type="button" value="제출" onclick="showText()">
<script>
function showText() {
alert(document.getElementById("target").value);
}
</script>
</body>
</html>
2. 태그 이름으로 찾기
지정된 id를 이용해 요소를 찾습니다. getElementByTagName()이라는 메서드를 사용합니다.
지정된 태그를 사용하는 모든 요소를 배열에 넣어서 반환합니다.
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<p>첫번째 p 태그</p>
<p>두번째 p 태그</p>
<p>세번째 p 태그</p>
<p>네번째 p 태그</p>
<p>다섯번째 p 태그</p>
<script>
var elements = document.getElementsByTagName("p");
document.write("0번째 : " + elements[0].innerText);
</script>
</body>
</html>document,getElementByTagName("p")를 호출하면 body 태그 안의 p 태그들을 하나의 배열로 반환합니다.
0번째 요소를 출력하면 '첫번째 p 태그'가 화면에 출력됩니다.
참고 링크
'if (study) > JavaScript' 카테고리의 다른 글
| JavaScript로 이벤트 처리 하기 (0) | 2019.09.23 |
|---|---|
| HTML 문서가 표현되는 방법, DOM의 개념 (0) | 2019.09.22 |
| HTML에서 JavaScript를 실행하기 (0) | 2019.09.22 |
