SAPUI5 자바스크립트를 통해 브라우저 객체를 다루기 위해서는 DOM(Document Object Model)을 먼저 이해해야 합니다.
문서 객체 모델(Document Oject Model)이란, 간단하게 설명해서 자바스크립트를 활용을 하여 html 요소를 조작할 수 있도록 방법을 모아둔 개체들의 집합을 말합니다.
이러한 DOM 객체는, 문서 안에 모든 요소를 정의하여, 페이지 구조 및 스타일 등등 각각의 요소에 접근하여 읽고 변경하고 삭제할 수 있는 API를 제공합니다.
또, DOM 객체는 Tree 형태의 구조를 가지게 되는데, 대략적으로 다음과 같이 구성이 됩니다.
- <HTML>
- <HEAD>
- <BODY>
- <P>
- <A>
- …
이처럼 DOM은 트리형태로 구조화가 되기 때문에, 각 요소별로 부모/자식 노드 및 형재 노드를 갖게 되며 이 관계를 탐색할 수 있는 API 를 제공하고 있습니다.
<< 출처 : 위키백과>>
html 웹 페이지의 실행순서 – SAPUI5 자바스크립트 기초
일반적으로 html 파일의 내용은 코드에 기술한 대로 위에서 아래로 차례대로 실행이 됩니다. 따라서 스크립트 태그를 어떠한 위치에 놓는냐에 따라 태그의 실행 순서가 달라지게 됩니다.
<!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>
<script>console.log('타이틀 부분 - 첫번째 실행');</script>
</head>
<body>
<script>console.log('첫번째 제목 앞에. - 두번째 실행')</script>
<h1>첫번째 제목</h1>
<script>console.log('첫번째 제목 뒤에 - 세번쨰 실행')</script>
</body>
</html>
만약 HTML 문서상에 자바스크립트 코드를 다음과 같이 삽입하면
<!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>
<script>document.body.innerHTML += '<H1>첫번째실행</H1>'</script>
</head>
<body>
<script>document.body.innerHTML += '<H1>두번째실행</H1>'</script>
</body>
</html>
결과는 둘 중에 하나의 스크립트만 실행된 아래와 같이 보이게 됩니다.
결과적으로 첫번째 실행 코드는 에러가 나며 결과는 하나의 script만 실행되게 됩니다.
순서상으로는 첫번째 실행이 되어야 하지만, 해당 위치에서는 body 태그가 사용된 적이 없어 이 시점에는 바디 태그가 만들어지지 않았기 때문에 이 바디 태그를 조작 할 수 없다는 의미가 됩니다.
하지만 [두번째 실행] 스크립트의 경우에는 이미 body 태그를 읽어 이미 body를 만들었기 때문에 document.body에 어떠한 조작이 가능합니다.
자바스크립트로 html 문서 변경하기
자바스크립트 코드 내에서 document라는 객체를 활용을 하면, html 문서 내부에 있는 특정 태그에 접근하여 객체를 조작할 수 있습니다.
예를 들어서 document.head를 입력 하면 head 테그를 접근할 수 있으며, body 테그를 입력하면 body 객체에 태그에 접근할 수 있습니다.
body 내에 다른 태그를 읽어 들일 때는 document.querySelector() 라는 메서드를 활용하게 되며, 파라메터값으로 태그, 아이디, 클래스, 속성 선택자 등의 태그 선택자가 사용되게 됩니다.
h1 객체를 querySelector를 통해 가져와서 파란색으로 바꾸는 코드는 다음과 같습니다.
<!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>
<script>
document.addEventListener( 'DOMContentLoaded', () => {
const h1_selector = document.querySelector( 'h1' )
h1_selector.style.color = "blue"
})
</script>
</head>
<body>
<h1>H1 글자</h1>
</body>
</html>
결과는 다음과 같이 나오게 됩니다.
예컨대 id 태그 선택자를 활용하면 다음과 같이 코드를 적용할 수 있습니다. h1테그에 id를 부여하고, script에서는 해당 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>
<script>
document.addEventListener( 'DOMContentLoaded', () => {
const h1_selector = document.querySelector( '#h1_first' )
h1_selector.style.color = "blue"
})
</script>
</head>
<body>
<h1 id="h1_first">H1 글자</h1>
</body>
</html>
클래스 속성자는 # 대신 . 을 사용하면 되고, 샘플 코드는 다음과 같습니다.
<!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>
<script>
document.addEventListener( 'DOMContentLoaded', () => {
const h1_selector = document.querySelector( '.head-selector' )
h1_selector.style.color = "blue"
})
</script>
</head>
<body>
<h1 class = "head-selector" >H1 글자</h1>
</body>
</html>
만약 조건에 맞는 태그가 여러 개가 있어도 querySector의 경우에는 처음 조건에 맞는 단 하나만을 가져오게 됩니다. 조건에 맞는 모든 쿼리 셀렉터를 사용하면 모두 처리할 수 있습니다.
<!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>
<script>
document.addEventListener( 'DOMContentLoaded', () => {
results = document.querySelectorAll( '.head-group' )
for ( const item of results ){
item.style.backgroundColor = "blue"
}
})
</script>
</head>
<body>
<h1 class = "head-selector head-group" >첫번째 H1</h1>
<h1 class = "head-group" >두번째 H1</h1>
</body>
</html>
DOM으로부터 객체를 가져와서 글자 조작하기
id 혹은 클래스 등으로 객체를 가져오게 되면 해당 객체의 텍스트를 조작할 수 있습니다. 두가지 메소드를 사용할 수 있으며, textContent는 텍스트를, innnerHTML은 HTML 태그 형태를 조작할 수 있습니다.
textCont1.textContent : text만을 추출 혹은 조작할 수 있음. 입력되는 값은 텍스트로 인식됨
textCont2.innerHTML = html 형태로 추출 혹은 조작할 수 있음. 입력되는 값은 html 태그로 인식됨.
아래의 코드에서 textContent의 경우에는 태그 <br>이 글자처럼 나오게 되고, innerHTML 에 사용된 태그 <br>은 태그로 인식되게 됩니다.
<!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>
<script>
document.addEventListener( "DOMContentLoaded", () => {
const textCont1 = document.querySelector( '#textCont1' );
const textCont2 = document.querySelector( '#textCont2' );
textCont1.textContent = "테스트<br>컨텐트 "
textCont1.style.color = "red"
textCont2.innerHTML = "inner<br>HTML"
})
</script>
</head>
<body>
<H1 id="textCont1">
</H1>
<H1 id="textCont2">
</H1>
</body>
</html>
따라서 innerHTML 의 경우 한줄이 내려간 상태로 보이게 됩니다.
이상으로 SAPUI5를 위한 기초 자바스크립트 개념인 DOM에 대해서 알아보았습니다. 자바스크립트를 이해함에 있어 함수의 개념도 중요한데요, 함수에 관련한 내용은 아래의 컨텐츠를 확인해 보시기 바랍니다.
자바스크립트 함수(function)의 이해 for SAPUI5 입문