D.O.M 이란
Document Object Model
트리구조를 생각했을때, html안에 있는 태그나 텍스트 클래스 아이디 src와 같은 속성들을 객체로 바라보는 것. html element들을 자바스크립트로 조작하는것.
script태그는 어디에?
onload
script가 head안에 있을때 바로 DOM으로 접근을 하면 body가 읽히기 전에 로드가 되기 때문에 제대로 작동하지 않는다. 그래서 body가 읽혀질 때 까지 기다려야하는데 그때 사용하는 것이 onload이다. 그러나 최근에는 이 방법을 잘 사용하지 않는다.
<head>
<script>
window.onload = function () {
var title = document.getElementById('ddd');
}
</script>
</head>addEventListener
addEventListener라는 메소드에 첫번째 parameter자리에는 이벤트이름이 문자열 형태로 들어가고 두번째 parameter자리에는 이 이벤트가 일어나면 실행될 함수를 통째로 넣어주면 된다.
// load
<head>
<script>
window.addEventListener('load', function () {
var title = document.getElementById('title');
});
</script>
</head>// DOMContentloaded
<head>
<script>
window.addEventListener('DOMContentloaded', function () {
var title = document.getElementById('title');
});
</script>
</head>load는 전체 body가 다 로드될때 까지 기다리고 DOMContentloaded는 DOM의 컨텐트만 로드 될때까지 기다린다. 후자가 불러오는 속도가 훨씬 빠르다.
그러나 이것도 많이 사용하지 않는다.
body태그 밑에 script태그 사용
순서상으로 스크립트가 밑에 있기때문에 body가 다 로드가 되고 script가 동작한다.
script가 동작하기 전에 html이 먼저 읽히기 때문에 사용자입장에서는 더 빠르게 느껴진다.
요즘 가장 많이 쓰이는 방법! 단 spa(single page application)과 같은 javascript로 모든 화면을 그려내는 웹 애플리케이션은 해당되는 이야기가 아니다.
<head>
</head>
<body>
</body>
<script>
</script>HTML element 객체 얻어오기 1
요즘 잘 사용하지는 않는다...
document.getElementById('아이디 이름')
html 안에 있는 id를 이용해서 element를 가져오는것
var title = document.getElementById('title');
console.log(title) document.getElementsByTagName ('태그 이름')
위와 같지만 이는 복수형태이다. 태그 이름이나 클래스이름 등은 아이디와 다르게 여러개가 존재 할 수 있다. 사용된 같은 이름의 모든 태그와 클래스등을 불러온다. 따로 접근하려면 배열의 형태로 접근하면 된다.
var titleSpan = document.getElementsByTagName('span');
console.log(titleSpan[0]) //첫번째 span태그를 불러옴HTML element 객체 얻어오기 2
많이 사용하는 방법!
document.querySelector('')
document.querySelector('tagname' '.classname' '#idname') 의 형태로 사용한다.
queryselector는 css의 html 접근 방식과 동일하게 적용할 수 있다. 문자열 형태로 작성할것!
여러개의 태그나 클래스가 있을 경우 맨 위에 있는 것만 불러온다.
var title = document.querySelector('#idname');document.querySelectorALL
여러개의 element를 불러오고 싶을때 사용한다. 특정 요소에 접근 할때는 배열의 형태로 사용한다.
var title = document.querySelectorAll('.classname');
console.log(title[1]); // 두번째 class를 불러옴.HTML element의 속성 다루기
getAttribute
attribute 속성 값을 가져오는 메소드
var link = document.queryselector('.classname a');
console.log (link.getAttribute('속성(attribute)이름')setAttribute
attribute 속성 값을 변경하는 메소드
var link = document.queryselector('.classname a');
console.log (link.getAttribute('속성(attribute)이름');
link.setAttribute ('속성(attribute)이름', '바꿀내용');
HTML element의 class 다루기
className
클래스가 없으면 클래스를 추가하고 클래스가 있으면 변경을 해준다. 이미 클래스가 지정되어 있을때 추가로 지정하는것은 할수 없다.
var link = document.querySelector('.classname a');
link.classname = 'classname2'classList
클래스를 따로 또 추가하거나 삭제하려면 classList를 사용해야한다.
add('') 메소드와 remove('') 메소드를 이용하면 된다.
여러개 추가하거나 삭제하고 싶으면 ,를 사용하면 된다.
contains('') 메소드를 사용하면 class를 가지고 있는지 없는지 판단한다. 불리언값 출력
var link = document.querySelector('classname1 a');
link.classList.add('classname2', 'classname3');
link.classList.remove('classname2', 'classname3');HTML 컨텐츠를 동적으로 생성하기
createElement('') 메소드를 사용하면 html에 없어도 추가적으로 태그나 클래스 아이디를 생성할 수 있다.
innerHTML을 사용하면 텍스트나 html요소들을 더 넣을 수 있다.
이렇게 하면 완성은 되지만 어디에 붙을지 결정이 되지 않는다. 그래서 붙일곳의 부모태그에 appendChild('')라는 메소드를 사용하면 된다.
어떤 데이터를 불러들인 다음에 나중에 추가할때와 같은 상황에 사용한다.
var listElem = document.createElement('tagname or .classname or #idname')
var listElemMom = document.queryselector('element mom')
listElem.innerHTML ='<span>blah blah</span>';//텍스트 생성 html요소 전부 사용가능
listElemMom.appendChild(listElem);