1. DOM (Document Object Model)
Java Script 에서는 문서 내 요소(태그)를 가져와 속성을 다루는 역할을 주로 한다.
| Method | Description |
| document.getElementById( ) | 문서 내에서 특정 ID 를 갖는 Element 를 찾는다. |
| document.getElementsByTagName( ) | 문서 내에서 특정 Tag를 갖는 Element 들을 찾는다. |
| document.getElementsByClassName( ) | 문서 내에서 특정 Class를 갖는 Element 들을 찾는다. |
| document.querySelector( ) | CSS 의 Selector 같은 역할 을 한다.(IE8 이하는 사용 못 함) |
| document.querySelectorAll( ) | CSS 의 Selector 같은 역할 을 한다.(IE8 이하는 사용 못 함) |
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
</style>
</head>
<body>
<h1>H1 TAG1</h1>
<h1>H1 TAG2</h1>
<h1>H1 TAG3</h1>
<h1>H1 TAG4</h1>
<h2 class="head2">HEAD2</h2>
<h2 class="head2">HEAD2</h2>
<h2 class="head2">HEAD2</h2>
<h2 class="head2">HEAD2</h2>
<h3 id="head3">H3 TAG1</h3>
</body>
<script>
// getElements : 갯수에 상관없이 배열에 담아오겠다는 의미
var elemTags = document.getElementsByTagName('h1');
console.log(elemTags);
var elemClass = document.getElementsByClassName('head2');
console.log(elemClass);
var elemId = document.getElementById('head3');
console.log(elemId);
console.log('-----------------------------------------------');
// 쿼리 셀렉터 : css 의 셀렉터를 차용한 방식
// 복수개의 요소가 있을 경우 가장 위에 있는 하나만 가져올 수 있다.
elemTags = document.querySelector('h1');
console.log(elemTags);
elemClass = document.querySelector('.head2');
console.log(elemClass);
// 복수개를 가져올 수 있는 쿼리 셀렉터
elemClass = document.querySelectorAll('.head2');
console.log(elemClass);
</script>
</html>
가져온 Element 에서 속성(Attribute)을 다룰 수 있다.
다룰 수 있는 속성은 사용자 속성과 기본 속성으로 나눌 수 있다.
| 종류 | Description |
| 사용자 속성 | 사용자가 Element 에 명시한 속성 |
| 기본 속성 | Element 생성 시 자동으로 부여된 속성 |
속성을 기본적으로 아래와 같이 다룰 수 있다.
| Method | Description |
| element.innerHTML = value | html 값을 변경(value 값이 없으면 가져온다.) |
| element.[attribute] = value | 특정 속성을 변경(value 값이 없으면 가져온다.) |
| element.setAttribute([attribute],value) | 특정 속성 값을 변경(사용자 속성 가능) |
| element.getAttribute(attribute) | 특정 속성 값을 가져옴(사용자 속성 가능) |
| element.style.[property]= | 특정 스타일의 속성을 변경(value 값이 없으면 가져온다.) |
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
</style>
</head>
<body>
<h1 id="p1"></h1>
<img src="../img/img01.jpg"/><br/>
<input type="text" value="아무 내용이나"/>
<a href="#" my-attr="head">링크 클릭</a>
<a href="#" my-attr="main">링크 클릭</a>
<a href="#" my-attr="footer">링크 클릭</a>
</body>
<script>
// id='p1' 인 태그 가져오기
var elem;
elem = document.getElementById('p1');
// console.log(elem);
elem.innerHTML = '새로운 텍스트 등장'; // elem 의 태그와 태그 사이에 텍스트 추가
elem.style.backgroundColor = 'yellow'; // elem 의 style 태그로 가서 backgroundColor 변경
// img 태그 가져오기
var img;
img = document.getElementsByTagName('img');
// console.log(img[0]);
// img 의 src 속성의 값을 "../img/img02.jpg" 로 변경
// img[0].src = '../img/img02.jpg'; // 기본 속성만 가능
img[0].setAttribute('src','../img/img03.jpg');
// input 태그 가져오기
var input;
input = document.getElementsByTagName('input');
// console.log(input[0]);
// input 태그의 모양을 버튼으로 바꿔보자
input[0].setAttribute('type','button');
input[0].value = '버튼';
// a 태그들 가져오기
var tags;
tags = document.getElementsByTagName('a');
console.log(tags);
for (var tag of tags) {
// console.log(tag);
// 각 태그에 my-attr 속성 값을 콘솔로 출력
var attr = tag.getAttribute('my-attr')
console.log(attr);
// tag 의 사이 값인 '링크 클릭' 을 my-attr 값으로 변경하세요.
tag.innerHTML = '<h1>' + attr.toUpperCase() + '<h1/>';
}
// 기본 속성
console.log(img);
</script>
</html>
'JS-DOM' 카테고리의 다른 글
| 04. 부모-자식 창, alert, timing, JSON (0) | 2024.03.08 |
|---|---|
| 03. Window Object (0) | 2024.03.08 |
| 02. Event (0) | 2024.03.08 |