DOM
DOM이란?
Document Object Model의 약자로, HTML 요소를
Object(javascript object)처럼 조작할 수 있는 모델이다.
DOM을 이용해서 자바스크립트를 실행해 HTML을 조작한다.
<script src="script.js"></script>
-> HTML 문서에서 JavaScript를 불러온다
body태그가 끝나기 직전에
위와 같은 태그를 삽입한다. (확장자 js파일의 이름은 예시이다)
body태그가 끝나기 직전에 삽입하는 이유는,
script 태그는 등장과 동시에 실행되기 때문에,
scirpt 태그 아래의 요소들은 실행되지 않는다.
그래서 body 태그가 끝나기 직전에 삽입해,
모든 요소들이 실행될 수 있도록 한다.
document.body.children[0]
-> body 태그의 [0]번째 children element를 찾는다.
<html>
<body>
<div id="a">body의 [0]번째 children element
<div class="child"> #a 의 [0]번째 children element</div>
</div>
<div id="b">body의 [1]번째 children element</div>
</body>
</html>위 코드에서 body태그의 [0]번째 children element는
id값으로 'a'를 가진 div태그이다.
이 때, #a의 [0]번째 children element를 찾기 위해서는
a.children[0];<- 이와 같이 입력하면 된다.
// #a의 0번째 children element는 .child인 div태그
document.body.children[0].parentElement;
-> body태그의 [0]번째 children의 parent element를 찾는다.
// body 태그
위 코드에서 body 태그의 [0]번째 children은 #a이고,
이 #a의 parent element는 body가 된다.
이 때, #a의 [0]번째 children element의 parent eleme를 찾기 위해서는
a.children[0].parentElement;<- 이와 같이 입력하면 된다.
// #a의 [0]번째 children element의 parentr element는 #a인 div태그
Element를 추가하는 법
->document.createElement('div');
이 상태에선 'div' 태그가 생성되기만 한 상태라서,
html에 적용되어 있지 않다. 때문에 append를 시켜줘야 한다.
const createDiv = document.createElement('div');Element를 적용하는 법
->document.body.apeend(createDiv);
새로 생성한 Element에 Class를 붙이는 법
->createDiv.classList.add('newElement');
Element를 특정 id 밑에 추가하는 법
->
const createDiv = document.createElement('div');
const container = document.querySelector('#container');
container.append(createDiv);div를 생성해주는 createDiv와,
id값이 container인 태그를 참조하는 container 변수가 있다.
여기서 container.append(createDiv)를 입력하면
#container에 div 태그를 추가할 수 있다.
태그에 내용을 추가하는 법
->createDiv.textContent = 'Hello';
(Hello라는 내용이 추가된다)
Selector를 조회(불러오기)하는 법
->document.querySelector('body');
(body를 조회한다)
document.querySelectorAll('.newElement');
('new'라는 class '전체'를 조회한다)
이렇게 조회한 녀석들은 '배열 처럼' 사용할 수 있다.
하지만 배열은 아니다!
유사배여르 혹은 배열형 객체등으로 불린다.
영어로는 Array - like object이다.
Element를 삭제하는 법
->createDiv.remove();
여러개의 Element를 삭제하는 법
->
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}#container를 참조하는 명령어를 container로 선언해주고,
while 반복문으로 container의 첫번째 child element가
존재하는 동안 container의 frist child element를 삭제한다.
-> 전체 Element가 삭제된다.
맨 위의 child element만 남기고 나머지는 삭제하는 법
->
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}#container를 참조하는 명령어를 container로 선언해주고,
while 반복문으로 container의 children element가 1개만
남을 때까지 container의 last child element를 삭제한다.
-> 첫번째 Element만 남고 삭제된다.
원하는 Class의 Element만 삭제하는 법
->
const newElements = document.querySelectorAll('.newElement');
newElements.forEach(function(newElement) {
newElement.remove();
})
// or
for (let newElement of newElements) {
newElement.remove();
}