[JS] DOM 다루기🗃

TATA·2023년 1월 8일

목록 보기

11/25

✔️ DOM Elements 제어 방법

🔍 특정 요소 찾기

querySelector

document.querySelector('css') : 해당하는 가장 첫번째의 DOM Element를 가져온다.
document.querySelectorAll('css') : 해당하는 모든 DOM Element를 가져온다.

const character = document.querySelectorAll("button");

const tataBtn = character[0];
const cookyBtn = character[1];

// ❗️참고) querySelectorAll로 가져온 HTML 요소들은
//        '유사 배열 객체'로 for문을 사용할 수 있습니다.

getElement

document.getElementById('아이디') : 주어진 문자열과 일치하는 id속성을 가진 요소를 찾아온다.
document.getElementsByClassName('class') : 주어진 클래스 이름을 가진 모든 자식 요소를 배열과 같은 객체로 반환한다.(유사배열)
document.getElementsByTagName('tag') : Element의 HTMLCollection과 주어진 태그명을 반환한다. Root node를 포함해 전체 document를 대상으로 검색된다.

🗃 요소 만들기

create, append, insert

document.createElement('tag') : DOM Elemnet 생성
Node.append(Node) : 부모노드 안에 맨 마지막 자식으로 새로운 노드 추가

append 사용 예시👇

const div = document.createElement("div");
document.body.append(div, "hello");

// result
<body>
  <div></div>
  hello
</body>

// ❗️참고) append는 노드 객체(Node object)나 DOMString(text)를
//        사용할 수 있으며 한번에 여러 개의 자식 요소를 설정할 수 있습니다.
//        return 값을 반환하지 않습니다.

Node.appendChild(Node) : 부모노드 안에 맨 마지막 자식으로 새로운 노드 추가

// ❗️참고) appendChild는 append메소드와 다르게
//        오직 하나의 노드만 추가할 수 있으며 Node 객체만 받을 수 있습니다.
//        return 값을 반환합니다.

Node.insertBefor(newNode, refNode) : 부모노드 안에서 refNode 앞에다가 newNode 추가
Node.prepend(Node) : 부모노드 안에 맨 첫번째 자식으로 새로운 노드 추가

🗃 인접 노드 접근

children, parent, Child, Sibling

Node.children : 호출된 Element의 모든 자식을 반환
Node.parentElement : 호출된 Element의 부모 요소를 반환
Node.firstElementChild : 첫번째 자식을 반환
Node.lastElementChild : 마지막 자식을 반환
Node.previousElementSibling : 이전 형제를 반환
Node.nextElementSibling : 이후 형제를 반환

🗃 속성 추가

setAttribute

element.setAttribute('attribute', 'value') : 지정된 속성을 Element에 추가하고 지정된 값을 제공한다.

attribute : 속성의 특정 이름을 설정
value : 속성에 값을 할당

setAttribute 사용 예시👇

document.getElementById('test').setAttribute('href', 'https://tata.velog.com');

🗃 classList 제어

add, remove, toggle

element.classList.add('className') : 지정한 class값을 추가
element.classList.remove('className') : 지정한 class값을 제거
element.classList.toggle('className') : class가 존재한다면 제거, 존재하지 않으면 class를 추가

🗃 Element 제거

remove, removeChild

node.remove() : node를 제거
node.removeChild(child) : 자식 노드(child)를 제거

removeChild로 모든 자식요소를 지우는 예시👇

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

자식 요소를 하나만 남기게 할 수도 있다.👇

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

🗃 DOM 변경

간단한 예시

node.innerHTML = '텍스트'
node.textContent = '텍스트'
node.style.color = 'red'
node.style.display = 'none'
node.hidden = true
input.value = '텍스트'

👉 DOM 자세하게 설명한 블로그 보러가기