JavaScript의 개념과 이를 활용하여 간단한 DOM 조작을 알아봐요.
파편화와 표준화의 역사
HTML, XML 등과 같은 문서를 다루기 위한 독립적인 문서 모델 인터페이스
window
, document
와 같은 객체들이 존재하는데, window
는 브라우저의 최상위 객체를 의미하며 생략가능하다.문서 모델을 객체를 통해 조작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic DOM Manipulation</title>
<style>
#king {
color: red;
}
</style>
</head>
<body>
<h1 id="header">DOM Manipulation</h1>
<h2 id="langHeader">Programming Languages</h2>
<ul>
<li class="lang">Python</li>
<li class="lang">Java</li>
<li class="lang" id="specialLang">JavaScript</li>
</ul>
<h2 id="frameHeader">Frameworks</h2>
<ul>
<li class="framework" id="specialFrame">Django</li>
<li class="framework">Spring</li>
<li class="framework">Vue.js</li>
</ul>
</body>
</html>
단일노드
document.getElementById(id)
: id만 활용하여 선택할 수 있다. (querySelector에 비해 유연성이 떨어진다.)
const mainHeader = document.querySelector('h1')
const langHeader= document.querySelector('#langHeader') // 아이디로 가져오려면 #
const frameHeader= document.querySelector('.frameHeader')
document.querySelector(selector)
: id, class, tag, 복합 선택자(자손, 자식 선택자) 등을 모두 활용하여 선택할 수 있다.
const langLis = document.querySelectorAll('.lang')
여러 요소
document.getElementsByTagName(tagName)
,document.getElementsByClassName(class)
const selectSepcialLang = document.getElementById('specialLang')
const selectAllLangs = document.getElementsByClassName('framework')
const selectAllLiTags = document.getElementsByTagName('li')
document.querySelectorAll(selector)
const langLi = document.querySelectorAll('.lang')
Delete
// removeChild
ul.removeChild(li1)
ul.removeChild(li2)
//remove
ul.remove()
body.remove()
Elemnet Styling
li1.style.cursor = 'pointer'
li2.style.color = 'blue'
li3.style.background = 'red'
// setAttribute
li3.setAttribute('id','king')
// getAttribute
const getAttr = li1.getAttribute('style')
const getAttr2 = li3.getAttribute('style')