DOM (Document Object Model)
Java Script 에서는 문서 내 요소(태그=Element)를 가져와 속성을 다루는 역할을 주로 한다.
DOM (Document Object Model)은 웹 문서의 구조화된 표현이다.
이것은 프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작하며, 주로 자바스크립트에서 웹 페이지의 요소를 선택, 수정, 추가 또는 제거할 때 사용된다.
DOM 가져오기
✨ 요소 가져오는 방법
태그(Element)의 속성(Attribute)을 다루기 위해서는 우선 태그를 가져와야 한다.
Java script 에서 원하는 태그를 가져오는 방법은 크게 4가지 이다.
-
document.getElementBYID(): 문서 내에서특정ID 를 갖는Element 를찾는다. 1개만 가능 -
document.getElementsByTagName(): 문서 내에서특정Tag를갖는Element 들을 찾는다. (배열 형태로 사용해줘야 한다.) -
document.getElementsByClassName(): 문서 내에서특정Class를갖는 Element 들을 찾는다. (배열 형태로 사용해줘야 한다.) -
document.querySelector(): CSS 의Selector 같은역할을한다.(IE8 이하는사용 못함) -
document.querySelectorAll(): CSS 의Selector 같은역할을 한다.(IE8 이하는사용 못함)
❗ s 가 붙어있는 건 여러개가 들어올 수 있다는 것으로 이는 즉, 배열로 담아오겠다는 의미이다. (Java Script 에서 여러개를 담을 수 있는건 배열과 Object 뿐이다.)
<body>
<h1>H1 tag 1</h1>
<h1>H1 tag 2</h1>
<h1>H1 tag 3</h1>
<h1>H1 tag 4</h1>
<h2 class="head2">head2 class</h2>
<h2 class="head2">head2 class</h2>
<h2 class="head2">head2 class</h2>
<h2 class="head2">head2 class</h2>
<h3 id="head3">head3 id</h3>
</body>위처럼 선언된 html 문서에 태그에 해당하는 속성을 바꾸기 위해 먼저 태그를 가져오는 코드를 살펴보자
🔽 태그, class, id로 가져오는 방법
<script>
// 태그로 가져오기 (배열 형태로 가져온다)
var elemTag = document.getElementsByTagName('h1');
console.log(elemTag);
// class 로 가져오기 (배열 형태로 가져온다)
var elemClass = document.getElementsByClassName('head2');
console.log(elemClass);
// id 로 가져오기 (하나만 가져올 수 있다.)
var elemID = document.getElementById('head3');
console.log(elemID);
// css의 selector 활용 (1개만 가져올 수 있다.)
elemClass = document.querySelector('.head2');
console.log(elemClass);
// css의 selector 활용 (복수개를 가져올 수 있다.)
elemClass = document.querySelectorAll('.head2');
console.log(elemClass);
</script>
Element 내의 속성 활용하기
✨ 가져온 요소 수정하기
가져온 요소에 해당하는 속성을 변경할 수 있는데, 이때 다룰 수 있는 속성에는 기본 속성과 사용자 속성이 있다.
- 기본속성 : Element 생성 시 자동으로 부여된 속성
- 사용자 속성 : 사용자가 Element 에 명시한 속성
속성의 사용 방법은 아래와 같다.
-
element.innerHTML = value: html 값을변경(value 값이없으면 가져온다.) <> 사이에 있는 값을 추가한다. -
element.[attribute] = value]: 특정 속성을변경(value 값이없으면가져온다.) -
element.setAttribute([attribute],value): 특정 속성값을변경(사용자속성가능) -
element.getAttribute(attribute): 특정 속성값을가져옴(사용자 속성가능) -
element.style.[property]=:특정 스타일의속성을변경(value 값이없으면가져온다.)
속성을 변경하는 코드 예시를 위해 먼저 html 코드를 작성해준다.
<body>
<h1 id="p1"></h1>
<button onclick="test()">click</button> <br/>
<img src="../img/img01.jpg" id="image" onclick="changeImg"/> <br/>
<input type="text" value="아무 내용이나.."/>
<!--my-attr : 사용자 정의 함수-->
<a href="#" my-attr="header">링크 클릭</a>
<a href="#" my-attr="main">링크 클릭</a>
<a href="#" my-attr="footer">링크 클릭</a>
</body> ① 원하는 태그를 가져온다
var elem = document.getElementByID('p1'); : 변수 elem에 아이디가 p1인 태그를 가져온다.
→ 변수 elem 에 p1 이라는 아이디를 가진 태그가 들어간다.
② 변경하고 싶은 속성을 가져와 해당 속성을 변경한다.
elem.innerHTML = '새로운 텍스트 등장';
elem.style.backgroundColor = 'yellow';→ elem에 담긴 태그의 html과 css 스타일을 변경한다.
※ 사용자 함수가 아닌 기본 속성만 사용 가능한 방법
위 코드를 작성해주면 h1 요소에 값이 '새로운 텍스트 등장' 으로 수정되고, 배경색이 노란색으로 수정되어 설정된다.
새로운 텍스트 등장 ← 이러한 형태로 웹 페이지에 보여진다.
❗ 활용하기
만약 버튼을 클릭할 때마다 이미지를 변경하고 싶을 경우 아래와 같은 방법으로 실행 가능하다.
html 태그를 담을 변수 선언 → 여러개의 이미지를 배열에 담기 → 속성 변경해주기 → 클릭 이벤트 발생 시마다 1씩 증가해서 다음 이미지 노출 → 배열의 끝에 도달하면 다시 0으로 초기화
var i = 0;
function changImg(){
var img = document.getElementById('image');
console.log(img);
var imgArr = ['img01.jpg', 'img02.jpg', 'img03.jpg', 'img04.jpg'];
// 기본 속성만 제어할 수 있다.
img.src = '../img/' + imgArr[i];
i++;
if(i == imgArr.length){
i = 0;
}
}변경할 수 있는 방법 또 한가지가 있는데 setAttribute 를 사용해주는 것이다.
// 사용하기가 불편하지만 모든 속성이 가능하다는 장점이 있다.
img.setAttribute('src', '../img/' + imgArr[i]);. 으로 사용하는 것은 사용 법은 간편하지만 기본속성만 사용 가능하다.
하지만 setAttribute() 는 사용하기는 조금 더 복잡하지만 모든 속성이 가능 하다는 장점이 있다.
❓ 만약 함수를 선언하지 않고 속성을 바꾸고 싶을 경우에는 어떻게 할까?
html 선언부에 사용된 input 태그의 타입을 text → button 으로 변경해보자!
// 변수에 input 태그를 담아준다.
var but = document.getElementsByTagName('input');
but[0].type = 'button'; // type 변경
but[0].value = 'click'; // input 타입의 value 변경위 상황을 인덱스로 처리해주는 이유는 해당 태그는 배열로 담겨 오기 때문에 사용 시에도 배열을 사용하듯이 처리해줘야 한다.
❕ 그럼 이번에는 a 태그에 정의한 사용자 함수의 내용을 h1으로 태그로 출력해보자
var aTags = document.getElementsByTagName('a);
for(var a of aTags){
var val = a.getAttribute('my-attr'); // a 태그의 사용자 속성을 변수 val에 넣어준다.
a.innerHTML = '<h1>' + val.toUpperCase() + '</h1>'
a.style.textDecoration = 'none'; // 밑줄 없애기
a.style.color = 'black'; // 색상 변경하기
}이렇게 작성해주면 a 태그 속 사용자 속성에 정의된 header, main, footer이 h1 + 대문자로 출력된다.
