DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있다.
먼저, 조작하고자 하는 DOM 객체에 접근해야 한다.
DOM에 수행하는 모든 연산은 document 객체에서 시작한다. document 객체는 DOM에 접근하기 위한 진입점이다.
원리를 배우기 전에 일단은 사용해보고 감을 익혀보도록 해보자.
🎇 DOM 탐색
▪ document.getElementBy-(-)
요소에 붙어있는 속성들을 사용하여
document.getElement-(-) 메서드를 이용하여 접근할 수 있다.
속성은 많이 쓰이는 것으로 Id, className, Name, TagName 이 있다.
<div id = "logo">
<div class = "logo-jpg">Element</div>
<div class = "logo-jpg">Element</div>
<h1>Home</h1>
<h2 name="page">calender</h2>
<h2 name="page">note</h2>
<h2 name="page">members</h2>
<h2 name="page">event</h2>
</div>
<script>
let logo = document.getElementById("logo");
// id 값으로 요소 노드 한 개 선택 (복수일 시 첫 번째 요소)
let pages = document.getElementByName("page");
let secondH2 = document.getElementByTagName("h2")[1];
// 태그 명으로 접근하여 배열 형태로 저장
let logoJpg = document.getElementByClassName("logo-jpg");
// 클래스 값으로 객체를 가져오며, 배열로 저장 된다.
</script>💥 요소 속성을 변수명으로 사용할 수 없을 떄
대괄호[...]를 사용하여 접근하자!
▪ document.querySelector()
선택자와 일치하는 문서 내 첫 번째 element를 반환한다.
<div class="hi">hi</div>
<div class="hi">hi</div>
<div class="hi">hi</div>
<div class="hi">hi</div>
<script>
let Hi = document.querySelector('.hi');
</script> ▪ document.querySelectorAll()
선택자에 해당되는 모든 element를 가져온다.
<div class="hi">hi</div>
<div class="hi">hi</div>
<div class="hi">hi</div>
<div class="hi">hi</div>
<script>
let Hi = document.querySelectorAll('.hi');
</script> 🎇 DOM 생성, 제어
JS를 조작하여 HTML Element를 추가하거나 삭제, 변경할 수 있다.
▪ document.createElement
createElement()로 요소를 추가할 수 있다.
let div = document.createElement('div');그리고 이 요소 안에 글자를 넣는 함수가 밑에 함수이다.
▪ document.createTextNode
div.createTextNode('이것은 div');이렇게 요소를 만들었다. 하지만 요소를 만든 것으로만 해서는 사용할 수 없다.
그래서 사용해야 하는 함수가 appendChile()이고, 다른 요소에 집어넣을 수 있는 함수이다. 뜻 그대로 자식을 추가한다는 뜻이다.
▪ element.appendChild
그래서 총 코드는 아래와 같다.
let divJs = document.createElement('div');
divJs.createTextNode('이것은 div');
document.body.appendChild(divJs); 이렇게 하면 body 태그 안에 divJs의 div 요소가 생성된다.
🎇 DOM element 제어
▪ element.setAttribute(name, value)
JS를 이용하여 선택한 요소(element)의 속성(attribute) 값을 지정할 수 있는 함수이다.
element.setAttribute('attribute_name', 'attribute_value');element를 선택하여 setAttribute함수를 실행할 때, 속성 이름과 속성 값을 넣어주어야 한다.
<body>
<a id = "hi" target = "_blank">google</a>
<script>
let go = document.getElementById('hi').setAttribute('href', 'https://www.google.co.kr/');
</script>
</body>
▪ element.getAttribute
선택한 요소의 특정 속상 값을 가져오는 함수이다.
element.getAttribute('attribute_name');<body>
<a id = "hi" href = "https://www.google.co.kr/">google</a>
<script>
let go = document.getElementById('go').getAttribute('href');
// 변수 go에 https://www.google.co.kr/가 대입됨
</script>
</body>▪ element.innerHTML
💫 innerText vs innerHTML
innerText : 태그 안의 텍스트를 가져오거나 바꾸는 기능
<tag>text</tag> 안의 텍스트
innerHTML : 태그 자체를 가져오거나 바꾸는 기능
<tag>text</tag> 전체 