문서 객체 모델
스타일 조작하기
문서 객체의 스타일을 조작할 때는 style 속성을 사용합니다. style 속성은 객체이며, 내부에는 속성으로 CSS를 사용하여 지정할 수 있는 스타일들이 있습니다. 이러한 속성에는 CSS로 입력할 때 사용하는 값과 같은 값을 입력합니다.
속성들의 이름이 CSS에서 사용할 때와 약간 다릅니다. 자바스크립트에서는 -를 사용할 수 없으므로 두 단어 이상의 속성은 캐멀 케이스로 나타냅니다.
h1.style.backgroundColor
h1.style['backgroundColor']
h1.style['background-color']이러한 3가지 방법으로 스타일을 조정할 수 있습니다. 일반적으로는 첫 번째 방법을 가장 많이 사용합니다.
div의 스타일을 조정하여 그레이디언트를 만드는 코드를 작성해보겠읍니다.
<script>
document.addEventListener('DOMContentLoaded', () =>{
const divs = document.querySelectorAll('body > div')
divs.forEach((div, index) => {
const val = index * 10
div.style.height = `10px`
div.style.backgroundColor = `rgba(${val}, ${val}, ${val})`
})
})
</script>
<body>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</body>문서 객체 생성하기
body 태그 내부에 있는 특정 객체를 읽어들이는 것이 아닌, 문서 객체를 생성하고 싶을 때에는 document.createElement() 메소드를 사용합니다.
문서 객체를 만들었다 하여 문서 객체가 배치 되는것은 아니라, 문서를 어떤 문서 아래에 추가 할지를 지정해줘야 합니다. 문서 객체가 있을 때
위에 있는 것을 부모라고 부르고, 아래에 있는 것을 자식이라고 부릅니다.
const section = document.createElement("section");
section.classList.add("home-feed");
section.innerHTML = `
<section class="home-feed">
<article class="post-art">
<div class="post-user">
<div class="post-con-info">
<img class="img-mini-profile" src=" ${authorImage}"/>
<div>
<h2 class="post-title"> ${authorName}</h2>
<p class="post-user-id"> @${authorAccount}</p>
</div>
</div>
</div>
<div class="post-main">
<div class="post-con-main">
<p class="content">${content}</p>
<ul id="img-wrap${i}" class="img-container">
<img src=" ${image}" onerror="this.src='img/1.png'" />
</ul>
</div>
<div class="reaction-con">
<ul class="reaction-list">
<li class="likes">
<svg width="18" height="18" viewBox="0 0 18 18" fill="#fff" stroke="#767676" xmlns="http://www.w3.org/2000/svg">
<path d="M15.9201 3.0132C15.5202 2.60553 15.0455 2.28213 14.523 2.06149C14.0005 1.84085 13.4405 1.72728 12.8749 1.72728C12.3093 1.72728 11.7492 1.84085 11.2267 2.06149C10.7042 2.28213 10.2295 2.60553 9.82965 3.0132L8.99985 3.85888L8.17004 3.0132C7.3624 2.19011 6.267 1.72771 5.12483 1.72771C3.98265 1.72771 2.88725 2.19011 2.07961 3.0132C1.27197 3.83629 0.818237 4.95264 0.818237 6.11667C0.818237 7.28069 1.27197 8.39704 2.07961 9.22013L2.90941 10.0658L8.99985 16.2727L15.0903 10.0658L15.9201 9.22013C16.3201 8.81265 16.6374 8.32884 16.8539 7.79633C17.0704 7.26383 17.1819 6.69307 17.1819 6.11667C17.1819 5.54026 17.0704 4.96951 16.8539 4.437C16.6374 3.9045 16.3201 3.42069 15.9201 3.0132Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<span class="heartnumber">${heartCount}</span>
</li>
<li class="comments">
<img src="img/2/footer-icon/chat.svg">
<span class="number">${commentCount}</span>
</li>
<ul>
<p class="post-date">${update}</p>
</div>
</div>
</article>
</section>
`;
document.querySelector(".home-feed-container").appendChild(section);이 코드는 제가 팀원들과 했던 코드의 일부분입니다. 허접하지만 이와 같이 createElement로 만든 요소에 classList.add를 하여 클래스를 만들어주고, innerHTML로 만든 부분을 전체를 감싸고 있는 home-feed-container의 자식으로 넣기 위하여 appendChild를 해준 모습입니다.
문서 객체 이동하기
appendChild() 메소드는 문서 객체를 이동할 때도 사용할 수 있습니다. 문서 객체의 부모는 언제나 하나여야 합니다. 다음의 코드는 1초마다
div#first와 div#second로 움직이게 합니다.
<script>
document.addEventListener('DOMContentLoaded', () => {
const divA = document.querySelector('#first')
const divB = document.querySelector('#second')
const h1 = document.querySelector('h1')
h1.textContent ='이동하는 h1 태그'
const toFirst = () => {
divA.appendChild(h1)
setTimeout(toSecond, 1000)
}
const toSecond = () => {
divB.appendChild(h1)
setTimeout(toFirst, 1000)
}
toFirst()
})
</script>
<body>
<div id="first">
<h1>첫 번째 div 태그</h1>
</div>
<hr>
<div id="second">
<h1>두 번째 div 태그</h1>
</div>
</body>문서 객체 제거하기
문서 객체를 제거할 때는 removeChild() 메소드를 사용합니다.
appendChild() 메소드 등으로 부모 객체와 이미 연결이 완료된 문서 객체의 경우 parentNode 속성으로 부모 객체에 접근할 수 있으므로 다음과
같은 형태의 코드를 사용합니다.
<script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const h1 = document.querySelector('h1')
h1.parentNode.removeChild(h1)
}, 3000)
})
</script>
<body>
<hr>
<h1>제거 객체</h1>
<hr>
</body>이벤트 설정하기
지금까지 document.addEventListener('DOMContentLoaded' () => {}) 형태의 코드를 사용하는데, 이 코드는 DOMContentLoaded 이벤트가
발생했을 때 콜백함수를 실행해라 라는 의미입니다. DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다.
<script>
document.addEventListener('DOMContentLoaded', () => {
let counter = 0;
const h1 = document.querySelector('h1')
h1.addEventListener('click', (event) => {
counter++
h1.textContent = `클릭 횟수: ${counter}`
})
})
</script>
<style>
h1 {
user-select: none;
}
</style>
<body>
<h1>클릭 횟수: 0</h1>
</body>이벤트를 제거할 때는 removeEventListener() 메소드를 사용합니다.
<script>
document.addEventListener('DOMContentLoaded', () => {
let counter = 0;
let isConnect = false;
const h1 = document.querySelector('h1')
const p = document.querySelector('p')
const connectButton = document.querySelector('#connect')
const disconnectButton = document.querySelector('#disconnect')
const listener = (event) => {
h1.textContent = `클릭 횟수: ${counter++}`
}
connectButton.addEventListener('click', () => {
if(isConnect === false) {
h1.addEventListener('click', listener)
p.textContent = '이벤트 연결 상태: 연결'
isConnect = true
}
})
disconnectButton.addEventListener('click', () => {
if(isConnect === true) {
h1.removeEventListener('click', listener)
p.textContent = '이벤트 연결 상태: 해제'
isConnect = false
}
})
})
</script>
<style>
h1 {
user-select: none;
}
</style>
<body>
<h1>클릭 횟수: 0</h1>
<button id="connect">이벤트 연결</button>
<button id="disconnect">이벤트 제거</button>
<p>이벤트 연결 상태: 해제</p>
</body>