<자바스크립트 기초> 10. DOM 스크립트 (1)

 * DOM 스크립트란

 - DOM 스크립트는 Document Object Model 스크립트의 약자로써 HTML문서의 태그나 클래스, 텍스트, 속성 등을 모두 객체로 취급한다는 의미이다.

 - DOM 스크립트는 위의 객체들을 조정하기 위해 만들어졌다.

 

* 스크립트의 위치

 - DOM스크립트에 들어가기전에 스크립트의 위치에 대해 짚고 넘어갈 필요가 있다. 스크립트 태그는 헤드에 넣어야할 것 같지만 단순히 그렇게만하면 DOM스크립트와 같이 body를 읽어야 변수를 받아들이는 스크립트는 수행이 불가능하다. 그러면 어떻게 해야할까.

 

 이를 알아보기위해 id가 main-title인 h1태그를 title이라는 변수에 넣는 돔스크립트를 작성한다고 치자. 

var title = document.getElementById('main-title');
console.log(title);

 위를 헤드에 넣고 실행하면 body태그를 불러오기 전이므로 에러가 난다.  정상적으로 h1 태그를 불러오기 위해 다음의 4가지 방법을 보자.

 

 -  onload 속성

 window.onload = function() {
     var title = document.getElementById('main-title');
     console.log(title);
};

  : 헤드 태그에 window.onload 속성과 함께 함수를 넣으면 모든 내용을 로드하고 함수를 실행시킨다. 

 

 - addEventListener 메소드

window.addEventListener('load', function () {
     var title = document.getElementById('main-title');
     console.log(title);
 });

  : 위와 같은 결과를 출력시킨다. 이는 메소드라는 점에서 차이는 있지만 모든 내용이 로드 되었을 때 실행한다는 점은 같다.

 

 - addEventListener 메소드 2

window.addEventListener('DOMContentLoaded', function () {
    var title = document.getElementById('main-title');
    console.log(title);
 });

  : 'load' 대신 DOMContentLoaded 를 사용하면 모든 내용이 로드되는 것을 기다릴 필요없이 돔에서 인식하는 개체만 확인되면 실행하게 된다. 예를 들어 이미지 태그만 인식하고 이미지파일의 로드를 기다릴 필요는 없다는 것이다.

 

 - body에 삽입

 : 사실 이 방법이 가장 심플하다. body의 가장 아래에 스크립트를 작성하는 것이다. 헤드에 스크립트 코드가 많아지면 이 코드들을 모두 로드하고 내용을 보여주므로 사용자입장에서는 답답할 수 밖에 없다. HTML의 단순한 형태더라도 보이기 시작하면 좀 더 빠르다고 느낄 수 있다.

 

 따라서 body태그 가장 아래에 삽입함으로써 내용을 모두 로드하고 마지막에 스크립트를 실행시키도록 하는 것이다.

 

* HTML 객체 불러오기

 - Id로 불러오기

  : 위에서도 나왔듯이 document.getElementByID('id이름') 을 이용하여 HTML문서내의 특정 id를 가진 태그를 얻어올 수 있다.

 

 - 태그로 불러오기

  : 태그로 불러오는 방법은 다음과 같다.

var titleSpan = title.getElementsByTagName('span');

  이 때 위와는 달리 Elements라는 복수형태를 썼음을 알 수 있다. 이는 id와는 달리 태그는 여러개가 있을 수 있기 때문이다. 위는 span태그를 가진 객체들이 배열과 같은 형태로 저장된다.

console.log(titleSpan[0]);

 따라서 위와 같은 방법으로 span태그를 가진 첫번째 요소를 출력할 수 있다.

 

 - 쿼리셀렉터

  : 최근에는 이 방법이 제일 선호된다.

var List = document.querySelectorAll('.list');
for (var i =0; i <List.length; i++) {
    List[i].style.border = '1px solid red';
}

 document.querySelector을 사용하면 CSS에서 사용했던 것과 같은 문법으로 불러올 수 있다. 이 때 불러오는 것은 그 요소의 첫번째 값만 불러오므로, All을 붙여 배열과 같은 형태로 불러오는 것이 좋다.

 

 그렇게 하면 for구문을 사용하여 모든 그 클래스에 특정 스타일을 입히는 것도 가능해진다.

 

 

 

 

---

 

 

참고

 

 

이 글은 1분코딩의 자바스크립트 기본 강의를 유튜브에서 수강하고 개인적으로 정리하며 작성한 글입니다.

 

 

 

 

1분코딩

1분코딩