DOM이란?
DOM(Document Object Model) 문서 객체 모델은 웹 페이지에 대한 인터페이스다
HTML을 파싱해서 노드 트리 구조로 만든 것을 DOM이라고 한다
자바스크립트는 이 DOM을 이용해서 작동한다
조작 방법
말했듯 우리는 자바스크립트를 이용해 DOM을 조작해서 시각적 효과나, 우리가 원하는 동작들을 구현할 수 있다
언제나 그렇듯 기본 CSS는 생략
<body>
<h1>JS DOM</h1>
<div class="container">
<div class="test a">A</div>
<div class="test b">B</div>
<div class="test c">C</div>
</div>
<div class="test d">D</div>
</body>엘리먼트 가져오기
자바스크립트로 B상자의 색을 바꾸고 싶다면 어떻게 해야할까?
우선 html의 test b클래스인 div를 자바스크립트 속으로 가져와야한다
html 조작하기 위한 여러 메소드를 제공해주는 document객체를 사용해야한다
const b = document.querySelector('.b');
console.log(b);가져온 엘리먼트는 자바스크립트에서 조작하기위해 변수에 담아두고 사용한다
querySelector는 css선택자를 인자로 넘겨 받아 html에서 첫번째 엘리멘트를 가져오는 메소드이다
말 그대로다 우리가 css에서 b박스를 꾸밀 때 .b나 .container.b로 가져와서 꾸며주듯
그 선택자로 우리가 원하는 엘리멘트를 들고올 수 있다
css로 첫번째 엘리멘트를 가져온다고 했다
그렇다면 4박스 모두 공통적으로 가지고 있는 test를 선택자로 사용한다면?
const test = document.querySelector('.test');
console.log(test);
말 한대로 첫번째 엘리먼트인 A만을 가져왔다
test 클래스를 모두 가져오려면
const test = document.querySelectorAll('.test');
console.log(test);뒤에 All을 붙여주면된다
그럼 노드 리스트 형태로 4가지를 다 가져오게되며 배열과 비슷하게 test[index]를 이용해서 각각 요소에 접근할 수 있다
data-
html에도 따로 커스텀 데이터 값을 저장할 수 있다
내가 저장할 데이터의 이름 앞에 data-만 붙여주면되는데 data-age, data-value등으로 넣어주면 된다
이렇게 넣은 커스텀 데이터들은 자바스크립트으로도 조작이 가능하다
const cont = document.querySelector('.container');우선 아까와 같이 쿼리셀렉터로 엘리먼트를 가져온 뒤
cont.setAttribute('data-name','boxes');data-name이라는 데이터 이름으로 boxes를 넣었다
넣은 데이터 값을 확인할 수도 있다
console.log(cont.getAtrribute('data-name'));
dataset명령어를 통해서도 조회가 가능하다
<div class="test a" data-name="A" data-value="11">A</div>이렇게 데이터를 가졌다고 한다면
const test = document.querySelector('.a');
console.log(test.dataset);
조회가 가능하다
엘리먼트 추가/제거
추가
엘리먼트를 추가하고 제거할 수도 있다
가져온 엘리먼트를 변수에 넣어 사용했듯이
추가할 엘리먼트 또한 변수에 넣어야한다
const creElem = document.createElement('div');
creElem.innerHTML = 'test create<p>element</p>';createElement에는 내가 만들 엘리먼트의 태그 값을 넣는다 p, div, span등등
그렇게 만든 변수에 innerHTML로 내용을 넣을 수 있는데
여긴 html 작성하듯이 쓸 수 있다
이렇게 만든 엘리먼트를 c박스 밑에 추가하려고 하는데 어떻게 해야할까?
c박스는 container박스 안에 있는 요소다 그렇다면 container안에 넣어야하는데
거기에 접근하기 위해서는 역시나 container를 가져와서 추가해줘야한다
const appendElem = document.querySelector('.container');
appendElem.appendChild(creElem);
제거
const cont = document.querySelector('.container');
cont.removeChild(document.querySelector('.b'));appendChild와 같이 제거하려는 엘리먼트의 부모를 찾아서 삭제해 주면 된다
class,id 변경/추가/제거
class와 id는 별 다를게 없어서 class로만 설명
.apply {
width: 30vw;
padding: 10px;
margin: 10px;
border: red solid 10px;
}css에 apply클래스를 꾸미는 코드를 추가했다
하지만 현재 html에는 apply클래스를 가진 엘리먼트가 없다
변경
const cont = document.querySelector('.container');
cont.className = 'apply';container를 가져와서 클래스 이름을 apply로 변경
기존에 적용되어있던 .container가 해제되고 apply의 속성만 적용된 것을 볼 수 있다
추가
하지만 위와 같이 변경을 쓰기보다 추가하는 경우가 많다
const cont = document.querySelector('.container');
cont.classList.add('apply');
제거
추가와 삭제는 매우 유사하다
const cont = document.querySelector('.container');
cont.classList.remove('container');
toggle
추가 변경 제거 말고 toggle이라는 게 있는데
말 그대로 on/off하는 것
cont.classList.toggle('apply');
cont.classList.toggle('apply');
cont.classList.toggle('apply');
없으면 추가하고 있으면 삭제한다
'JavaScript' 카테고리의 다른 글
| 공 움직이기 (0) | 2020.10.13 |
|---|---|
| scroll event (0) | 2020.10.12 |
| 이벤트 위임 (0) | 2020.10.12 |
| 전역 변수 줄이기 (0) | 2020.10.11 |
| 이벤트 (0) | 2020.10.10 |
