먼저 document 객체란,
웹페이지 그 자체를 의미하며 웹페이지의 HTML 요소에 접근하기 위해서는 반드시 document 객체로부터 시작해야한다.
보통 HTML은 단순 정보를 주기 위함이고, 자바스크립트를 쓰는 이유는 HTML을 제어하기 위함이다.
제어를 하기 위해서는 제어대상을 찾고 그 대상에게 작업을 한다.
웹페이지의 HTML 요소에 접근하기 위해 document 라는 객체를 사용하고 이 객체의 메소드 중 getElementByTagName을 살펴본다.
말 그대로 태그 이름을 통해 엘리먼트를 가져온다 라는 뜻이다.
예제 코드를 보면,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
var li = document.getElementsByTagName('li');
for(var i=0; li.length; i++){
li[i].style.color='blue';
}
</script>
</body>
</html>ul 태그를 만들고 그 안에 li 태그들을 만들었다.
script 안의 내용을 보면,
li 라는 태그에 대한 엘리먼트들의 리턴값을 li 로 넣는다.
li 는 유사배열로 하여 <li> 태그의 엘리먼트들의 값들이 배열형식으로 들어간다.
(유사배열이란 완전한 배열은 아니지만 배열의 형태를 띄고있는 것? 이라는 정도로 안다)
i=0 부터 li 배열의 length인 3까지로 해서 for문을 돌린다.(i=0, 1, 2)
li 태그들의 엘리먼트들의 style.color가 blue가 된다.
페이지를 열어보면 다음과 같다.
getElementsByClassName 도 위와 동일한 기능이지만 ClassName에 따라 엘리먼트들을 조회하는 것이다.
코드로 보는 것이 이해가 빠르다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>HTML</li>
<li class="sjh">CSS</li>
<li class="sjh">JavaScript</li>
</ul>
<script>
var li = document.getElementsByClassName('sjh');
for(var i=0; li.length; i++){
li[i].style.color='red';
}
</script>
</body>
</html>HTML 에서는 class 라는 이름을 부여하지만, 자바스크립트에서는 ClassName 을 쓴다.
(프로그래밍에서는 class 라는 것이 다른 의미를 갖기 때문)
위 코드에서 HTML 요소의 li 태그에 class="sjh" 이라는 클래스이름을 붙혀놓았다.
자바스크립트 부분을 보면 ClassName이 sjh 인 엘리먼트들을 조회하여 리턴된 값을 li에 넣고 위의 ElementsByTagName 과 동일하게 for문을 돌린다.
CSS와 JavaScript 라는 부분만 class="sjh" 을 갖고 있기 때문에, 다음과 같이 나타난다.
또 하나, 가장 많이쓰는 getElementById 라는 것이 있다.
가장 성능이 좋고, 쓸 수 있다면 위의 2개보다 얘를 쓰는 것이 빠르고 좋다.
위 2개와 다른 특징은 Element's' 이 's' 가 안붙는다는 것이다.
즉, 하나의 값에 대해서만 제어를 한다.
기능은 마찬가지로 ID값에 대한 엘리먼트에 대해 제어를 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li id="sjh">HTML</li>
<li>CSS</li>
<li id="sjh">JavaScript</li>
</ul>
<script>
var li = document.getElementById('sjh');
li.style.color='red';
</script>
</body>
</html>HTML과 JavaScript 부분에 id를 부여했다.
앞서 말한대로 getElementById는 하나의 Id 값에 대해서만 작동을 한다.
JavaScript 도 id="sjh" 이지만, 제일 처음 나온 HTML 부분만 style.color가 red로 적용되었다.
'Javascript' 카테고리의 다른 글
| 9. HTML Element (0) | 2021.09.10 |
|---|---|
| 8. jQuery 기본 사용법 (0) | 2021.09.09 |
| 6. window.open 활용 (0) | 2021.09.07 |
| 5. window.open (0) | 2021.09.06 |
| 4. location 객체 (0) | 2021.09.05 |