Front/JavaScript

DOM - javascript 기본

oodada 2024. 7. 6. 22:26

DOM(Document Object Model)

JS HTML DOM : https://www.w3schools.com/js/js_htmldom.asp

The HTML DOM Tree of Objects

1. DOM이란?

  • DOM은 HTML 문서를 객체로 표현한 것으로,
  • 자바스크립트를 이용해 HTML 문서를 제어할 수 있게 해준다.
const h1El = document.querySelector('h1');
console.log(h1El.textContent);

2. Node vs Element(요소)

  • Node(노드) : HTML 요소, 텍스트, 주석 등 모든 것을 의미한다.
  • Element(요소) : HTML 요소를 의미한다.
  • Node는 Element의 상위 개념이다.
<div class="container">
    <!-- 주석 -->
    <div class="item">1</div>
    text1
    <div
        id="item1"
        class="item"
    >
        2
    </div>
    text2
</div>
const container = document.querySelector('.container');

// container의 자식 노드들을 출력한다.
console.log(container.childNodes); // NodeList(5) [text, div.item, text, div.item, text]

// container의 자식 요소들을 출력한다.
console.log(container.children); // HTMLCollection(2) [div.item, div.item]

console.dir(container); // container의 속성들을 출력한다.

3. 검색과 탐색

- document.getElementById()

  • id 속성을 이용해 요소를 찾는다.
  • id는 문서 내에서 유일해야 한다.
  • id가 없으면 null을 반환한다.
const item = document.getElementById('item1');
console.log(item); // <div id="item1" class="item">2</div>

- document.querySelector()

  • CSS 선택자를 이용해 요소를 찾는다.
  • 첫 번째로 일치하는 요소를 반환한다.
  • 일치하는 요소가 없으면 null을 반환한다.
const item = document.querySelector('.item:nth-child(2)');
console.log(item); // <div id="item1" class="item">2</div>

- document.querySelectorAll()

  • CSS 선택자를 이용해 요소를 찾는다.
  • 일치하는 모든 요소를 반환한다.
  • 일치하는 요소가 없으면 빈 NodeList를 반환한다.
  • NodeList 객체는 forEach() 메소드를 사용할 수 있다.
const items = document.querySelectorAll('.item');
console.log(items); // NodeList(2) [div.item, div.item]

items.forEach(item => {
    console.log(item); // 각 item 요소를 출력한다.
});

- Node.parentElement

  • 부모 요소를 반환한다.
  • 부모 요소가 없으면 null을 반환한다.
const item = document.querySelector('.item');
console.log(item.parentElement); // <div class="container">...</div>

- Element.closest()

  • 가장 가까운 조상 요소를 반환한다.
  • 일치하는 요소가 없으면 null을 반환한다.
const item = document.querySelector('.item');
console.log(item.closest('div')); // <div class="item">...</div> : item 요소 자신
console.log(item.closest('body')); // <body>...</body> : item 요소의 부모 요소
console.log(item.closest(.header)); // null : item 요소의 조상 요소 중 header 클래스를 가진 요소가 없다.

- Node.previousSibling, Node.nextSibling

  • 노드의 이전 형제 요소, 다음 형제 요소를 반환한다.
  • 형제 요소가 없으면 null을 반환한다.
const item = document.querySelector('.item');
console.log(item.previousSibling); // #text : 이전 형제 요소
console.log(item.nextSibling); // #text : 다음 형제 요소
// node에서 text는 줄바꿈, 공백 등을 의미한다.

console.log(item.previousSibling.parentElement); // <div class="container">...</div> : 이전 형제 요소의 부모 요소

- Element.previousElementSibling, Element.nextElementSibling

  • 요소의 이전 형제 요소, 다음 형제 요소를 반환한다.
  • 형제 요소가 없으면 null을 반환한다.
const item = document.querySelector('.item');
console.log(item.previousElementSibling); // null : 이전 형제 요소
console.log(item.nextElementSibling); // <div class="item">2</div> : 다음 형제 요소

- Element.children

  • 요소의 자식 요소들을 반환한다.
  • 자식 요소가 없으면 빈 HTMLCollection을 반환한다.
const container = document.querySelector('.container');
console.log(container.children); // HTMLCollection(2) [div.item, div.item]

- Element.firstElementChild, Element.lastElementChild

  • 요소의 첫 번째 자식 요소, 마지막 자식 요소를 반환한다.
  • 자식 요소가 없으면 null을 반환한다.
const container = document.querySelector('.container');
console.log(container.firstElementChild); // <div class="item">1</div> : 첫 번째 자식 요소
console.log(container.lastElementChild); // <div id="item1" class="item">2</div> : 마지막 자식 요소

DOM

4. 생성, 조회, 수정, 삭제

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
</div>

- document.createElement()

  • 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환한다.
const newItem = document.createElement('div');
newItem.textContent = '3';
console.log(newItem); // <div>3</div>

- Element.prepend(), Element.append()

  • 요소의 첫 번째 자식 요소, 마지막 자식 요소로 추가한다.
const container = document.querySelector('.container');
container.prepend(new Comment('prepend comment')); // 주석을 추가한다.
container.append(newItem); // newItem을 마지막 자식 요소로 추가한다.
container.append('text'); // text를 마지막 자식 요소로 추가한다.

- Element.remove()

  • 요소를 삭제한다.
const item = document.querySelector('.item');
item.remove();

- Element.insertAdjacentElement()

  • 지정한 위치에 새로운 요소를 추가한다.
  • 대상요소.insertAdjacentElement('위치', 추가할요소)
<!-- 'beforebegin' -->
<div class="target">
    <!-- 'afterbegin' -->
    <div class="item">1</div>
    <div class="item">2</div>
    <!-- 'beforeend' -->
</div>
<!-- 'afterend' -->
const target = document.querySelector('.item');
const newItem = document.createElement('span');
newItem.textContent = '새로운 아이템';

target.insertAdjacentElement('beforebegin', newItem);
target.insertAdjacentElement('afterbegin', '새로운 고양이');

- Node.insertBefore()

  • '부모 노드'의 '자식 노드'로 '기준 노드' 앞에 '추가할 노드'를 추가한다.
  • 부모노드.insertBefore(추가할노드, 기준노드)
const container = document.querySelector('.container');
container.insertBefore(newItem, container.firstElementChild);

- Node.contains()

  • '해당 노드'가 다른 노드의 자식인지 확인한다.
  • 부모노드.contains(자식노드)
const container = document.querySelector('.container');

console.log(document.body.contains(container)); // true
console.log(container.contains(newItem)); // true
console.log(container.contains(document.body)); // false

- Node.textContent

  • 노드의 텍스트 내용을 반환한다.
  • 노드의 텍스트 내용을 수정할 수 있다.
const item = document.querySelector('.item');
console.log(item.textContent); // 2

item.textContent = '3';
console.log(item.textContent); // 3

- Element.innerHTML

  • 요소의 HTML 내용을 반환한다.
  • 요소의 HTML 내용을 수정할 수 있다.
const container = document.querySelector('.container');
console.log(container.innerHTML); // <div class="item">1</div><div class="item">2</div>

// comment tagged templates 확장 프로그램을 사용하면 html,css의 색상이 달라진다.
container.innerHTML = /* html */ `
    <div class="item">3</div>
`;
console.log(container.innerHTML); // <div class="item">3</div>

container.innerHTML += /* html */ `
    <div class="item" style="border: 1px solid;">4</div>
`;
console.log(container.innerHTML); // <div class="item">3</div><div class="item">4</div>

- E.dataset

  • 요소의 data-* 속성을 가져오거나 수정할 수 있다.

- Element.tagName

  • 요소의 태그 이름을 반환한다.
const item = document.querySelector('.item');
console.log(item.tagName); // DIV

- Element.Id

  • 요소의 id 속성 값을 얻거나 반환할 수 있다.
const item = document.querySelector('.item');
console.log(item.id); // item1

item.id = 'new-item';
console.log(item.id); // new-item

- Element.className

  • 요소의 class 속성 값을 얻거나 반환할 수 있다.
  • 하지만 문자열로 반환되기 때문에 classList를 사용하는 것이 좋다.
const item = document.querySelector('.item');
console.log(item.className); // item

item.className += 'new-item active';
console.log(item.className); // new-item

- Element.classList

  • 요소의 클래스 속성을 다루는 객체이다.
  • add() : 클래스 추가
  • remove() : 클래스 삭제
  • toggle() : 클래스 토글
  • contains() : 클래스 포함 여부 확인
<ul class="list">
    <li>1</li>
    <li>2</li>
</ul>
const listEl = document.querySelector('.list li');

listEl.classList.add('active');
listEl.classList.remove('active');
listEl.addEventListener('click', () => {
    listEl.classList.toggle('active');
});

모든 li 요소에 대해 클래스를 추가하거나 제거하려면, querySelectorAll 메서드를 사용하여 모든 li 요소를 선택하고, 이를 반복하여 각 요소에 대해 이벤트 리스너를 추가해야 합니다.

// 모든 li 요소를 선택
const listItems = document.querySelectorAll('.list li');

// 모든 li 요소에 대해 반복
listItems.forEach(listEl => {
    // 'active' 클래스를 추가했다가 제거
    listEl.classList.add('active');
    listEl.classList.remove('active');

    // 클릭 이벤트 리스너 추가
    listEl.addEventListener('click', () => {
        listEl.classList.toggle('active');
    });
});

- Element.style

  • 요소의 style 속성(인라인 스타일)을 css 속성 값을 가져오거나 수정할 수 있다.
const item = document.querySelector('.item');

// 개별 지정
item.style.width = '100px';
item.style.color = 'red';
item.style.backgroundColor = 'yellow';
item.style.fontSize = '20px';

// cssText
item.style.cssText = 'width: 100px; color: red; background-color: yellow; font-size: 20px;';

// 한 번에 지정
Object.assign(item.style, {
    width: '100px',
    color: 'red',
    backgroundColor: 'yellow',
    fontSize: '20px',
});

// getPropertyValue
console.log(item.style);
console.log(item.style.width); // 100px
console.log(item.style.fontSize); // 20px

- window.getComputedStyle()

  • 요소의 모든 CSS 속성 값을 가져온다.
.item {
    width: 100px;
    font-size: 20px;
}
const item = document.querySelector('.item');
const style = window.getComputedStyle(item);

console.log(style.width); // 100px
console.log(style.fontSize); // 20px

- Element.getAttribute(), Element.setAttribute()

  • 요소의 속성을 가져오거나 수정할 수 있다.
const item = document.querySelector('.item');

item.setAttribute('title', 'Hello, world!'); // title 속성을 추가한다.
console.log(item.getAttribute('title')); // Hello, world!

- Element.hasAttr(), Element.removeAttr()

  • 요소가 속성을 가지고 있는지 확인하거나 삭제할 수 있다.
const item = document.querySelector('.item');

console.log(item.hasAttribute('title')); // true

item.removeAttribute('title');
console.log(item.hasAttribute('title')); // false

5. 크기와 위치

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
</div>

<style>
    body {
        height: 1000px;
        padding: 500px 0;
    }
    .container {
        overflow: auto;
        width: 300px;
        height: 300px;
        padding: 20px;
        border: 10px solid;
    }

    .item {
        height: 100px;
        margin-top: 100px;
        border: 1px solid red;
    }
</style>

- window.innerWidth, window.innerHeight

  • 브라우저의 너비, 높이를 반환한다.
console.log(window.innerWidth);
console.log(window.innerHeight);

- window.scrollX, window.scrollY

  • 페이지의 최상단 기준으로 스크롤한 양을 반환한다.
console.log(window.scrollX);
console.log(window.scrollY);

- window.scrollTo(), window.scrollBy()

  • 스크롤을 지정한 양만큼 이동시킨다.
  • window.scrollBy(x, y) : 현재 스크롤 위치에서 지정한 양만큼 이동한다.
  • window.scrollTo(x, y) : 페이지의 최상단을 기준으로 지정한 위치로 이동한다.
// 페이지의 최상단을 기준으로 100px 아래로 이동한다.
window.scrollTo({
    top: 100,
    behavior: 'smooth',
});

// 현재 스크롤 위치에서 100px 아래로 이동한다.
window.scrollBy(0, 100);

- Element.clientWidth, Element.clientHeight

  • 테두리(border)와 스크롤바를 제외한 요소의 너비, 높이를 반환한다.
const container = document.querySelector('.container');
const item = document.querySelector('.item');

console.log(container.clientWidth, container.clientHeight);
console.log(item.clientWidth, item.clientHeight);

- Element.offsetWidth, Element.offsetHeight

  • 테두리(border)와 스크롤바를 포함한 요소의 너비, 높이를 반환한다.
const container = document.querySelector('.container');
const item = document.querySelector('.item');

console.log(container.offsetWidth, container.offsetHeight);
console.log(item.offsetWidth, item.offsetHeight);

- Element.scrollWidth, Element.scrollHeight

  • 요소의 콘텐츠가 너비, 높이를 반환한다.
const container = document.querySelector('.container');
const item = document.querySelector('.item');

console.log(container.scrollWidth, container.scrollHeight);
console.log(item.scrollWidth, item.scrollHeight);

- Element.offsetTop, Element.offsetLeft

  • 부모 요소를 기준으로 요소의 상단, 왼쪽 위치를 반환한다.
const container = document.querySelector('.container');
const item = document.querySelector('.item');

console.log(container.offsetTop, container.offsetLeft);
console.log(item.offsetTop, item.offsetLeft);

- Element.getBoundingClientRect()

  • 테두리(border)를 포함한 요소의 크기와
  • 브라우저의 뷰포트를 기준으로 요소의 상대 위치 정보를 반환한다.
const container = document.querySelector('.container');
const item = document.querySelector('.item');

console.log(container.getBoundingClientRect());
console.log(item.getBoundingClientRect());
저작자표시 비영리 동일조건

'Front > JavaScript' 카테고리의 다른 글

javascript 커리큘럼  (0) 2024.07.07
이벤트(Events) - javascript 기본  (0) 2024.07.06
비동기(Async) - javascript 기본  (0) 2024.07.06
변수(Variable) - javascript 기본  (0) 2024.06.23
javascript 핵심 요약  (1) 2024.05.30

'Front/JavaScript'의 다른글

  • 현재글DOM - javascript 기본

관련글

티스토리 친구하기

티스토리툴바