[카카오테크캠퍼스 7주차] JavaScript 마스터: DOM

⏳ 2023. 5. 22. - 2023. 5. 28.

 

1. DOM

Document Object Model

HTML 문서를 객체로 표현하여, JS에서 HTML을 제어할 수 있게 한다.

---

2. Node vs Element

      

      

      

    
    

      <javascript />
    
// 노드(Node) : HTML 요소, 텍스트, 주석 등 모든 것을 의미
// 요소(Element) : HTML 요소를 의미

const parentEl = document.querySelector(".parent");

// 자식 노드 확인
console.log(parentEl.childNodes);

// 자식 요소 확인
console.log(parentEl.children);

---

3. 검색과 탐색

      

      

      

    
    

      <javascript />
    
const parent = document.querySelector(".parent");
const child1 = document.querySelector(".child1");

// N.parentElement
// 노드의 부모 요소를 반환
console.log(child1.parentElement);

// E.closest(선택자)
// 자신을 포함한 조상 요소 중 선택자와 일치하는 가장 가까운 요소를 반환
// 찾지 못하면 null 반환
console.log(child1.closest("div"));
console.log(child1.closest("body"));

// N.previousSibling
// N.nextSibling
// 노드의 이전/다음 형제 노드를 반환
console.log(child1.previousSibling);
console.log(child1.nextSibling);

// N.previousElementSibling
// N.nextElementSibling
// 노드의 이전/다음 형제 요소를 반환
console.log(child1.previousElementSibling);
console.log(child1.nextElementSibling);

---

4. 생성, 조회, 수정

4.1. insertAdjacentElement

      

      

      

    
    

      <javascript />
    
// E.insertAdjacentElement(위치, 요소)
// 대상 요소의 지정한 위치에 새로운 요소를 삽입한다.

/* html */ `
<!-- 'beforebegin' -->
<div class="target">
<!-- 'afterbegin' -->
  Content!
<!-- 'beforeend' -->
</div>
<!-- 'afterend' -->
`;

const childEl = document.querySelector(".child");
const newEl = document.createElement("span");
newEl.textContent = "Hello~";

childEl.insertAdjacentElement("beforebegin", newEl);

4.2. insertBefore

      

      

      

    
    

      <javascript />
    
// N.insertBefore(노드, 참조노드)
// 부모 노드의 자식(참조 노드)의 이전 형제로 노드를 삽입

const parentEl = document.querySelector(".parent");
const childEl = document.querySelector(".child");
const newEl = document.createElement("span");
newEl.textContent = "Hello~";

parentEl.insertBefore(newEl, childEl);

4.3. dataset

      

      

      

    
    

      <javascript />
    
// E.dataset
// 요소의 각 "data-" 속성 값을 얻거나 지정

const el = document.querySelector(".child");
const str = "Hello World";
const obj = { a: 1, b: 2 };

el.dataset.helloworld = str;
el.dataset.object = JSON.stringify(obj);

console.log(el.dataset);

4.4. style

      

      

      

    
    

      <javascript />
    
// E.style
// 요소의 인라인 스타일 값을 얻거나 지정

const el = document.querySelector(".child");

// 개별 지정
el.style.width = "100px";
el.style.height = "100px";
el.style.backgroundColor = "orange";

// 한번에 지정
Object.assign(el.style, {
  width: "300px",
  height: "300px",
  backgroundColor: "blue",
});

console.log(el.style);

4.5. getComputedStyle

      

      

      

    
    

      <javascript />
    
// window.getComputedStyle(요소)
// 요소에 적용된 스타일 객체를 반환

const el = document.querySelector(".child");
const styles = window.getComputedStyle(el);

console.log(styles);

---

5. 크기와 좌표

      

      

      

    
    

      <javascript />
    
// window.scrollTo(x좌표, y좌표)
// 지정된 좌표로 화면을 스크롤

setTimeout(() => {
  // window.scrollTo(0, 500);
  window.scrollTo({
    left: 0,
    top: 1000,
    behavior: "smooth",
  });
}, 2000);


const parentEl = document.querySelector(".parent");

// E.clientWidth
// E.clientHeight
// 테두리 선을 제외한 요소의 크기
console.log(parentEl.clientWidth, parentEl.clientHeight);

// E.offsetWidth
// E.offsetHeight
// 테두리 선을 포함한 요소의 크기
console.log(parentEl.offsetWidth, parentEl.offsetHeight);

// E.scrollLeft
// E.scrollTop
// 스크롤 요소의 수평/수직 스크롤 위치
console.log(parentEl.scrollLeft, parentEl.scrollTop);

// E.offsetLeft
// E.offsetTop
// 요소의 위치
console.log(parentEl.offsetLeft, parentEl.offsetTop);

// E.getBoundingClientRect()
// 테두리 선을 포함한 요소의 크기와 화면에서의 상대 위치 정보
console.log(parentEl.getBoundingClientRect());

솔직히 이건 잘 쓰일지 모르겠다..