[JS 스터디 발표] 브라우저: 문서

🌵 요소 검색하기

목표 : DOM 탐색 프로퍼티를 사용하여 DOM에 쉽게 접근하여 조작할 수 있습니다.

🍒 getElementsBy*

getElementById

// 요소 얻기
  let elem = document.getElementById('elem');

해당 elem라는 변수에 담긴 ID 형태의 요소에 접근할 수 있습니다.
❗️❗️주의 : ID 는 고유의 값이어야 합니다.

🍒 querySelectorAll

• 부모 타겟의 모든 자식 요소들을 반환해줍니다.

// html
<ul>
  <li>토끼</li>
  <li>강아지</li>
  <li>사슴</li>
  <li>곰</li>
  <li>고슴도치</li>
</ul>

<script>
let animals = document.querySelectorAll('ul > li');
</script>

더불어 가상클래스도 선택할 수 있습니다.
이처럼 마우스 포인터를 모두 담은 컬렉션이 반환됩니다.

document.querySelectorAll(':hover')
document.querySelectorAll(':active')

🍒 getElementsBy*

태그나 클래스 등을 이용해 원하는 노드에 접근할 수 있습니다.

 // 태그
 document.getElementsByTagName(태그명)
 // 클래스명
 getElementsByClassName(className)

---

💟 innerHTML로 내용 조작하기

페이지 내용물을 수정하는데 쓰이는 방법입니다.

//html 
<p>반갑다</p>

 <script>
    alert( document.body.innerHTML ); // 내용 읽기
    document.body.innerHTML = '안녕하세요 ??'; // 교체
  </script>

속성에 접근해봅시다.

elem.hasAttribute(name) – 속성 존재 여부 확인
elem.getAttribute(name) – 속성값을 가져옴
elem.setAttribute(name, value) – 속성값을 변경함
elem.removeAttribute(name) – 속성값을 지움

사용법

 let input = document.querySelector('input');

  // 속성 추가 => 프로퍼티 갱신
  input.setAttribute('value', 'text');

• 속성값 value를 text로 변환합니다.

---

❗️❗️ 위 내용을 적용하여 생동감 있는 웹 페이지를 만들 수 있습니다. 🖼

새로운 노드 생성

// 태그 이름(tag)을 사용해 새로운 요소 노드를 만듦
document.createElement(tag)

// 주어진 텍스트(text)를 사용해 새로운 텍스트 노드를 만듦
document.createTextNode(text)

메시지 생성

// 1. <div> 요소 만들기
let div = document.createElement('div');

// 2. 만든 요소의 클래스를 'alert'로 설정
div.className = "alert";

// 3. 내용 채워넣기
div.innerHTML = "<strong>안녕하세요</strong>";

삽입 메서드

node.append(노드나 문자열) – node 끝에 삽입합니다.
node.prepend(노드나 문자열) – node 맨 앞에 삽입합니다.
node.before(노드나 문자열) – node 이전에 삽입합니다.
node.after(노드나 문자열) – node 다음에 삽입합니다.
node.replaceWith(노드나 문자열) –- node를 새로운 노드나 문자열로 대체합니다.
node.remove() // 노드 삭제하기
elem.cloneNode(true) // 노드 복제하기 (깊은복사 버전 - 자식, 자손까지)
elem.cloneNode(false) // 노드 복제 (elem만 복사되도록)

---

🔮 스타일과 클래스

classList

• 제공 메서드 종류 add/remove/toggle

 // 클래스 프로퍼티 전체를 바꾸려고 할 때
 document.body.className
 
 // 개별 클래스 추가
    document.body.classList.add('article');

요소 스타일

background-color  => elem.style.backgroundColor
z-index           => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth

style 프로퍼티 재지정

• 기존 display가 block에서 none으로 바꿔주고 싶다면 아래와 같이 선정합니다.

document.body.style.display = "none";

• 단위는 px까지 꼭 붙여줘야합니다.

document.body.style.margin = '20px';

---

🔮 브라우저 창 사이즈와 스크롤

offsetWidth와 offsetHeight

• '가장 바깥 부분(outer)'이 차지하는 너비와 높이 정보를 제공합니다. 테두리를 포함한 요소 '전체’의 사이즈 정보를 제공

clientTop과 clientLeft

• clientWidth와 clientHeight 프로퍼티는 테두리 안 영역의 사이즈 정보를 제공

scrollWidth와 scrollHeight

• 스크롤바에 의해 감춰진 영역도 포함

좌표

• 요소를 움직이기 위해서 알아야 된다.

clientX/clientY

• pageY = clientY + 문서에서 세로 방향 스크롤에 의해 밀려난 부분의 높이
• pageX = clientX + 문서에서 가로 방향 스크롤에 의해 밀려난 부분의 너비

elementFromPoint(x, y)

document.elementFromPoint(x, y)을 호출하면 창 기준 좌표 (x, y)에서 가장 가까운 중첩 요소를 반환합니다.