Window 객체란?
DOM을 설명하기 전에 먼저 Window라는 객체를 알아야 한다. Window 객체란 브라우저의 창을 대변한다고 볼 수 있다. Javascript에서 최상단에 존재하는 객체로 이 객체 안에는 수많은 프로퍼티들이 존재하는데 Javascript의 거의 모든 내장 객체, 내장 함수들이 Window 객체에 속해 있다. Window 객체는 Javascript 코드의 어느 곳에서나 항상 접근 할 수 있는 객체로 전역 객체(Global Object)라고도 부른다.
사실 우리가 자주 사용하는 console.log도 window.console.log로 사용해야 하지만 무엇을 사용하든 결국 윈도우 객체 내부의 것이기 때문에 window.을 생략해도 된다. 그리고 우리가 선언한 변수나 함수도 window 객체 안에 등록이 된다.
function a() {
console.log("hello world");
}
var aa = "hello";
그렇다면 DOM이란 무엇일까?
DOM이란?
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. DOM 소개 - MDN
DOM이란 window객체 안에 존재하는 document라는 객체를 말한다. 이 객체는 HTML 문서 전체를 객체로 표현한 것이다.
그리고 이 객체안에는 문서의 구조나 스타일, 내용 등을 변경 할 수 있는 메소드들이 존재한다. 메소드들은 브라우저마다 표준으로 제공하는 기능 이외에도 추가적인 기능을 제공하는 경우도 있다.
그렇다면 DOM은 브라우저에서만 사용할 수 있을까?
Document 객체는 Javascript의 요소가 아니라 브라우저에서 제공하는 Window 객체의 한 요소이다. 그래서 Node.js에서는 출력이 되지 않는다.
😊Tip
log 메소드는 파라미터로 전달받은 값을 위주로 출력하는 반면, dir 메소드는 객체의 속성을 좀 더 자세하게 출력해준다.
log 메소드는 여러 값을 쉼표로 구분해서 전달하면 전달받은 모든 값을 출력해준다.
dir 메소드는 여러 값을 전달하더라도 첫 번째 값만 출력해준다.
값에 좀 더 중점을 둔 log 메소드는 대상을 HTML 형태로 출력해주고, 객체의 속성에 좀 더 중점을 둔 dir 메소드는 대상을 객체 형태로 출력해준다.
그렇다면 이번에는 DOM을 조작해 보자!
DOM 조작
일단 아래와 같이 HTML 파일을 작성을 한 후 파일을 열어보자!
<body>
<h1 id="title"></h1>
<span>span2</span>
<h2 id="DOM-title">
DOM
<span class="sp">span1</span>
<span class="sp">span1</span>
<span class="sp">span1</span>
</h2>
<script src="public/js/practice.js"></script>
</body>
DOM을 조작하기 위해서는 먼저 조작하고 싶은 HTML 요소부터 선택해야 한다. 선택하는 방법은 다음과 같다.
window.document.getElementById()
이 메소드는 id 속성 이름을 인자로 받아서 해당 id 속성을 가진 요소를 가져오는 메소드이다.
인자값으로는 id 속성 이름을 string으로 전달해 주어야 한다.
Javascript 파일에 다음과 같이 작성해보자!
const domTitle = document.getElementById("DOM-title"); // DOM-title이라는 id를 가진 요소 선택
console.log(domTitle);
window.document.getElementsByTagName()
이 메소드는 HTML의 태그 이름을 인자로 받아서 해당하는 태그 전체를 선택하는 메소드이다.
인자값으로는 태그 이름을 string으로 전달해 주어야 한다.
이 메드에는 Element에 s가 붙어 있는데 태그 이름으로 요소를 찾는 경우 여러 개의 요소가 선택될 수 있기 때문에 Element에 s가 붙어 있다. 그리고 실행결과 유사배열인 HTMLCollection을 리턴한다는 점도 기억해두자! (배열인데 요소 내용들이 객체)
Javascript 파일에 다음과 같이 작성해보자!
const spanList = document.getElementsByTagName("span"); // span이라는 이름을 가진 태그 전부 선택
console.log(spanList);
window.document.getElementsByClassName()
이 메소드는 class 속성 이름을 인자로 받아 해당 class 속성을 가진 요소 전체를 선택하는 메소드이다.
인자값으로는 class 속성 이름을 string으로 전달해 주어야 한다.
이 메드에도 Element에 s가 붙어 있는데 class 속성으로 요소를 찾는 경우 여러 개의 요소가 선택될 수 있기 때문에 Element에 s가 붙어 있다. 그리고 실행결과 유사배열인 HTMLCollection을 리턴한다는 점도 기억해두자! (배열인데 요소 내용들이 객체)
Javascript 파일에 다음과 같이 작성해보자!
const spList = document.getElementsByClassName("sp"); // sp라는 class명을 가진 요소 전부 선택
console.log(spList);
HTMLCollection에 들어가는 요소들의 순서는 HTML 태그에서 봤을 때 깊이와는 상관없이 무조건 위에서부터 차례대로 들어간다!
아래와 같이 HTML 파일을 작성을 한 후 파일을 열어보자!
<body>
<h1 id="title"></h1>
<ul>
<div>
<div>
<div><li class="ls ls1">list1</li></div>
</div>
</div>
<li class="ls ls2">list2</li>
<li class="ls ls3">list3</li>
<li class="ls ls4">list4</li>
<li class="ls ls5">list5</li>
</ul>
<script src="public/js/practice.js"></script>
</body>
const lsList = document.getElementsByClassName("ls");
console.log(lsList);
유사배열(Array-Like Object)이란?
위와 같이 배열과 유사하게 생긴 객체를 말한다.
0부터 시작하는 숫자 형태의 index가 존재하고 length 속성이 존재한다.
하지만 배열의 기본 메소드는 사용할 수 없다. (for ... of 문은 사용 가능)
const lsList = document.getElementsByClassName("ls");
for (let element of lsList) {
console.log(element);
}
그런데 만약 다음과 같은 HTML에서 h2 안에 있는 span을 선택하려면 어떻게 해야 할까?
<body>
<h1 id="title"></h1>
<span>span2</span>
<h2 id="DOM-title">
DOM
<span>span1-1</span>
<span>span1-2</span>
<span>span1-3</span>
</h2>
<script src="public/js/practice.js"></script>
</body>
먼저 h2를 선택한 다음 그 값을 이용해 span을 선택하면 된다.
const domTitle = document.getElementById("DOM-title");
const spList = domTitle.getElementsByTagName("span");
for (let i = 0; i < spList.length; i++) {
console.log(spList[i]);
}
하지만 이렇게 쓰면 코드가 길어진다. 그렇다면 조금 더 편리한 방법이 없을까?
querySelector를 사용하면 된다!
querySelector는 CSS 선택자를 이용해 요소를 선택할 수 있다.
일단 다음과 같이 HTML 파일을 작성해 보자!
<body>
<h1 id="title"></h1>
<ul>
<div>
<li class="ls ls1">list1</li>
</div>
<li class="ls ls2">list2</li>
<li class="ls ls3">list3</li>
<li class="ls ls4">list4</li>
<li class="ls ls5">list5</li>
</ul>
<script src="public/js/practice.js"></script>
</body>
window.document.querySelector()
이 메소드는 선택하고 싶은 태그나 id, class 속성을 CSS 선택자를 사용하듯이 인자값으로 넣어주면 된다.
만약 ul 태그 안에 div 태그안에 li 태그를 가진 요소를 선택하고 싶으면 다음과 같이 코드를 작성해 주면 된다.
const qs = document.querySelector("ul > div > li");
console.log(qs);
만약 ul 태그 안에 class가 ls5인 요소를 선택하고 싶으면 다음과 같이 코드를 작성해 주면 된다.
const qs = document.querySelector("ul > .ls5");
console.log(qs);
그렇다면 ls라는 class 이름을 가진 요소들을 선택하려면 어떻게 해야할까?
window.document.querySelectorAll()
이 메소드는 선택하고 싶은 태그나 id, class 속성을 CSS 선택자를 사용하듯이 인자값으로 넣어주면 된다.
이 메소드에는 All이 붙어 있는데 여러 개의 요소를 선택하고 싶을때 사용하는 메소드라 그렇다. 실행결과는 유사배열인 NodeList를 리턴한다! (배열인데 요소 내용들이 객체)
ls라는 class 이름을 가진 요소들을 선택하려면 다음과 같이 코드를 작성해 주면 된다.
const lsList = document.querySelectorAll(".ls");
console.log(lsList);
만약 ls라는 class 이름을 가진 요소들의 텍스트를 수정하고 싶다면 어떻게 해야될까?
element.innerHTML
이 속성은 요소 안에 있는 HTML을 문자열로 리턴해 준다.
innerHTML에 값을 대입하면 값이 덮어씌워진다.
일단 ls라는 class 이름을 가진 요소들이 어떤 값을 가지고 있는지 확인해 보자!
const lsList = document.querySelectorAll(".ls");
for (let i = 0; i < lsList.length; i++) {
console.log(lsList[i].innerHTML);
}
이 요소들을 1-1 ~ 1-5로 한 번 바꿔 보자!
const lsList = document.querySelectorAll(".ls");
for (let i = 0; i < lsList.length; i++) {
lsList[i].innerHTML = `list1-${i + 1}`;
console.log(lsList[i].innerHTML);
}
잘 변경된걸 확인 할 수 있다.
마무리
우리가 만든 함수나 변수도 window 객체안에 등록이 되는걸 오늘 처음 알았다.
브라우저를 잘 다루려면 DOM에 대해 조금 더 자세히 알아봐야 겠다.
참고
'Javascript' 카테고리의 다른 글
| [Javascript] Event (Add, Remove) (0) | 2022.11.09 |
|---|---|
| [Javascript] 로또 번호 생성기 (0) | 2022.11.08 |
| [Javascript] 객체 (0) | 2022.11.04 |
| [Javascript] 피보나치 수열 - 알고리즘 (0) | 2022.11.03 |
| [Javascript] 형 변환 (0) | 2022.11.03 |