티스토리 뷰
오늘부터는 웹 페이지의 뼈대가 되는 HTML, CSS와 함께 Javascript를 사용하는 법을 배운다. 기초는 배웠으나 이제부터 응용이므로 점점 더 어려워질 예정일 것 같다.
자바스크립트 소스코드의 위치
자바스크립트의 소스코드는 HTML의 어느 위치에나 올 수 있다. 대체로 많이 사용하는 위치는 <head>태그가 끝나기 전과 <body>태그가 끝나기 전이다.
만약 <head>태그 안에 자바스크립트 소스코드가 위치하는 경우, HTML 파일을 실행하는 과정에서 웹 브라우저는 자바스크립트를 인식하고 해석한다. 이때, 만약 <script src=""> 형태로 외부 스크립트 파일을 참조하는 처리가 있다면 해당 파일을 다운로드 받기 전까지는 해석이 완료되지 않는다.
그 후 HTML 코드를 해석하고, 해석이 끝난 뒤 웹 브라우저 화면에 결과를 표시한다. 그리고 나서 자바스크립트 코드를 실행하기 위해 다시 자바스크립트 코드가 정의된 블록으로 이동한다.
<body>태그 안에 자바스크립트 소스코드가 위치하는 경우, 웹 브라우저는 <body> 안에 있는 HTML 태그를 바로 해석하기 시작한다. 그리고 결과가 웹 브라우저 화면에 표시된다. 자바스크립트 소스코드를 해석하기 전에 먼저 UI를 제시할 수 있기 때문에 체감 실행 속도가 빨라진다.
이렇게 HTML 코드의 해석을 먼저 끝낸 후에 자바스크립트 소스코드의 해석이 진행되고 실행된다. 자바스크립트 코드를 위해 다시 되돌아갈 필요가 없기 때문에 전체적으로 실행 속도가 단축된다.
이렇듯 <body> 태그가 끝나기 전에 자바스크립트 코드를 배치하는 것이 페이지 로딩 속도가 더 빠르다. 그렇기 때문에 검색엔진이 페이지를 식별하는 데에도 더 수월하다. 그러나 JSP(자바서버페이지)나 PHP 등과 연계할 경우 코드 구성이 복잡해질 수 있기 때문에 <head> 태그가 끝나기 전에 자바스크립트 코드를 넣는 경우도 많다.
BOM, DOM
자바스크립트를 이용하면 브라우저의 정보에 접근하거나, 여러 기능들을 제어할 수 있다. 이때 사용할 수 있는 객체 모델이 바로 BOM(Browser Object Model), 브라우저 객체 모델이다. 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다. 모든 객체는 window 객체의 하위 객체로써 존재한다.
DOM(Document Object Model), 문서 객체 모델은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. BOM의 하위 개념이다.
HTML 태그를 객체로 변환
HTML의 특정 태그를 자바스크립트의 객체로 가지고 올 수 있다. 가지고 올 수 있는 방법은 여러 가지가 존재한다.
// HTML 태그 이름으로 가져오기
const 객체 = document.getElementsBytagName("태그이름");
// 태그에 부여된 ID 값으로 가져오기
const 객체 = document.getElementById("ID이름");
// 클래스 이름으로 가져오기
const 객체 = document.getElementByClassName("class이름");
// CSS 선택자로 가져오기
const 객체 = document.querySelector("CSS선택자"); // 단일 객체
const 객체 = document.querySelecorAll("CSS선택자"); // 복수 객체첫 번째는 HTML 태그 이름으로 가져오는 방법이다. 태그 이름을 가져오면 해당되는 모든 태그가 객체가 된다. 이 객체는 엄밀히 말하면 배열은 아니지만 배열과 비슷한 형태인 컬렉션으로 반환된다. div 태그 이름을 가져왔을 경우, HTML 파일에 있는 모든 div 태그가 이 컬렉션에 들어가 객체가 된다.
두 번째는 태그에 부여된 ID 값으로 가져오는 방법이다. ID 값은 고유한 요소이므로 항상 단일 객체로 반환된다.
세 번째는 태그에 부여된 Class 이름으로 가져오는 방법이다. 특정 클래스가 적용된 모두를 가져오기 때문에, 반환되는 객체는 배열(컬렉션)이다.
네 번째는 CSS 선택자로 가져오는 것이다. CSS 선택자란, 만약 HTML에서 ID 값으로 hello를 가진다면 #hello로, 클래스 이름으로 world를 갖는다면 .world로 호출하는 것을 말한다. 단일 객체를 받는 것과 복수의 객체를 받는 것이 있다.
단일 객체를 받는 querySelector는 무조건 단일 객체를 반환한다. 동일한 요소가 두 개 이상일 경우 첫 번째 요소만 반환한다.
복수 객체를 받는 querySelectorAll은 선택자에 맞는 모든 요소를 배열(컬렉션)으로 반환한다.
자바스크립트와 CSS 둘 다 선택자를 사용하기 때문에, 작성 규칙을 정해두지 않으면 혼란스러울 수가 있다. CSS는 클래스와 가상클래스 기반으로만 구성하고 자바스크립트에서는 ID값을 주로 사용하는 등, 규칙을 정해두는 것이 좋다.
innerHTML
자바스크립트로 가져온 HTML 객체는 innerHTML이라는 속성값을 갖는다. 이것에 할당한 내용은 실제 HTML의 시작태그와 끝 태그 사이에 적용된다. 예시를 보자.
<html>
<head></head>
<body>
<div id="hello"></div>
<script>
const a = document.querySelector("#hello");
a.innerHTML = "Hello World";
</script>
</body>
</html>이렇게 할 경우, a라는 변수는 ID값이 hello인 div 태그 객체가 된다. 이 객체에 innerHTML을 사용하여 태그 사이에 "Hello World"를 넣는다. 그럼 이것을 웹 브라우저에 출력했을 때, <div id="hello">Hello World</div>를 한 것과 같은 결과가 나온다. 웹 브라우저는 이렇게 인식한다.
위의 항목들을 모두 사용한 예시를 들어보자.
<html>
<head></head>
<body>
<h1 id="myid"></h1>
<h2 class="mycls"></h2>
<h2 class="mycls"></h2>
<p></p>
<p></p>
<div class="a">
<div class="b">
<div id="c"></div>
</div>
</div>
<h3 class="myh3"></h3>
<h3 class="myh3"></h3>
<h3 class="myh3"></h3>
<script>
const e11 = document.getElementsByTagName("p");
for(let i=0; i<e11.length; i++){
e11[i].innerHTML = "P태그 영역(" + i + ")";
}
const e12 = document.getElementsByClassName("mycls");
let count = 0;
for (let e of e12){
e.innerHTML = ".mycls 영역 (" + count + ")";
count++;
}
const e13 = document.getElementById("myid");
e13.innerHTML = "#myid영역";
const e14 = document.querySelector(".a>.b>#c");
e14.innerHTML = ".a>.b>#c 영역";
const e15 = document.querySelectorAll(".myh3");
e15.forEach((v, i) => {
v.innerHTML = ".myh3 영역 (" + i + ")";
});
</script>
</body>
</html>e11 객체는 태그 이름이 "p"인 것을 모두 받아서 객체로 만든다. 컬렉션은 배열처럼 쓸 수 있으므로 반복문을 돌리는 것이 가능하다. p 태그 안에는 "P태그 영역(0)", "P태그 영역(1)"이 각각 들어갈 것이다.
e12 객체는 클래스 이름이 mycls인 것을 모두 받아서 객체로 만든다. 역시 배열처럼 쓸 수 있으므로 반복문을 돌릴 수 있다. for-of 문을 써서 반복을 돌렸다. 클래스가 mycls인 h2 태그 안에는 ".mycls 영역(0)", ".mycls 영역(1)"이 각각 들어갈 것이다.
e13 객체는 ID가 myid인 것을 하나 받아서 객체로 만든다. 딱 하나 있으므로 반복문이 필요하지 않다. ID가 myid인 h1 태그 안에는 "#myid 영역"이 들어갈 것이다.
e14 객체는 CSS 선택자로, 클래스가 a인 것 안에, 클래스가 b인 것 안에 있는 ID가 c인 것을 가리키고 있다. 따라서 가장 안 쪽에 있는 div 태그 안에 ".a>.b>#c 영역"이 들어갈 것이다.
e15 객체도 CSS 선택자로, 클래스가 myh3인 것을 모두 받아서 객체로 만든다. 배열처럼 쓸 수 있으므로 forEach를 써서 반복문을 돌렸다. 클래스가 myh3인 h3 태그 안에는 각각 ".myh3 영역(0)", ".myh3 영역(1)", ".myh3 영역(2)"이 들어가게 된다.
단, 이렇게 만들어진 컬렉션은 배열과 비슷하지만 엄밀히 말하면 배열은 아니다. 컬렉션은 forEach이외에 탐색을 위한 메서드는 포함하고 있지 않다. 다른 메서드를 쓴다면 배열로 바꾸는 과정을 거쳐야만 한다.
HTML, CSS와 엮이니 조금 더 어려워진 기분이다. 하지만 좀 더 열심히 해야 한다...
'javascript' 카테고리의 다른 글
| 13. HTML 요소 제어하기 (0) | 2022.09.08 |
|---|---|
| 12. 이벤트 (0) | 2022.09.08 |
| 10. 비동기처리 (0) | 2022.09.06 |
| 9. 예외처리 (0) | 2022.09.05 |
| 8. 내장기능 (0) | 2022.09.01 |