Dom
Dom이란?
DOM은 Document Object Model의 약자로, HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model이라는 의미를 가지고 있다. 즉, 자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작할 수 있다는 의미입니다.
자주 쓰이는 Dom 메소드
아래와 같은 HTML파일이 있다고 가장하고 실습해보자
<body>
<h1>selector test</h1>
<section>
<h2> red section </h2>
<ul>
<li class="fruit">orange</li>
<li class="fruit">banana</li>
<li class="fruit">grape</li>
<li class="fruit">strawberry</li>
</ul>
</section>
</body>- createElement : 새로운 요소를 만든다.
// 새로운 li태그를 만든다.
const newLi = document.createElement('li');
// ()안에 새로 만들려는 태그를 ''로 감싼다.- querySelector & querySelectorAll :요소를 조회할 수 있다.
// ul엘리먼트를 조회한다.
const fruits = document.querySelector('ul');
// class명이 fruit인 모든 엘리먼트를 조회한다.
const fruit = document.querySelectorAll('.fruit');
// ()안에 조회 하려는 태그명 또는 class명 id명을 적어서 ''로 감싼다.
// class경우 = '.class명' , id경우 = '#id명'- append & appendChild : 한 요소를 특정 부모의 자식 리스트 중 마지막 자식으로 붙인다.
// ul태그 안에 새로운 li태그가 들어갔다.
const fruits = document.querySelector('ul');
const newLi = document.createElement('li');
fruits.append(newLi)
// append 와 appendChild 차이점
// 1. append는 한 번에 여러 개의 자식 요소를, appendChild는 한 번에 하나의 자식 요소만 추가 할수있다.
li.append(span, p, div);
ul.appendChild(li);
// 2. append 를 쓰면 string 도 추가할 수 있다.
let div = document.createElement('div');
div.append('hello');
// -> <div>hello</div>- textConent : 요소안에 글자를 넣을수 있다.
const newLi = document.createElement('li');
newLi.textContent = 'apple'
// -> <li>apple</li>- classList.add : class속성을 부여할수 있다.
const newLi = document.createElement('li');
newLi.classList.add(fruit)
// -> <li clsass="fruit"></li>- remove : 해당 요소를 삭제할수 있다.
// 새로만든 li태그가 없어진다.
const newLi = document.createElement('li');
newLi.remove()
비전공자로 시작한 개발자 지망생입니다!