간단한 요약

오늘은 DOM에 대해 알아 보았다.

---

배운 내용

1. element attribute text

• in Javascript
  Element: html의 태그들을 말한다.
  attribute: id, class, src, href, alt 등 html 태그 내에 우리가 정의해주는 것들
  text: html의 열린태그 닫힌태그 내에 들어가는 내용(text)을 말한다.

2. element에 접근하는 다양한 방법

2-1. getElementsByTagName: tag를 이용하는 방법(배열로 가져옴)
2-2. getElementById: id를 이용하는 방법(querySelector보다 조금 더 빠른 편)
2-3. getElementsByClassName: class를 이용하는 방법(배열로 가져옴)

하지만 위의 방법이 번거로운 면이 있기 때문에 아래의 방법을 상대적으로 더 사용하는 편.
2-4. querySelector: tag, class, id 모두 가져올 수 있음. 위에서부터 먼저 일치하는 element를 가지고 옴
2-5. querySelectorAll: tag, class, id에 해당하는 모든 element를 배열 형태로 가져옴(NodeList), iteration과 종종 함께 사용됨

3. innerHTML, outerHTML

innerHTML: 선택한 element의 안의(미만 개념) html 코드를 str 형태로 가져옴
outerHTML: 선택한 element를 포함하는 안(이하 개념)의 html 코드를 str 형태로 가져옴

접근한 후 내가 직접 html코드(tag포함)를 작성하여 변경할 수 있다.

4. textContent innerText

• textContent: 선택한 element 내 text에 접근하여 가져올 수 있다. css가 적용되지 않은 순수 코딩된 text를 가져옴. textContent가 innerText 보다 더 사용되는 편.
  -> 접근한 후 내가 직접 text코드(tag정보는 text로 전달됨)를 작성하여 변경할 수 있다.

• innerText: 선택한 element 내 text에 접근하여 가져온다. 하지만 css가 적용된 후(대문자 등)의 text정보를 가져옴

5. createElement()

말 그대로 html의 tag를 javascript를 통해 만들 수 있는 method

6. appendChild()

• 5번에서 만든 tag를 원하는 parents의 마지막 child로 삽입할 수 있다.
  -> 즉, 부모.appendChild(내가 생성한 tag)
• 만약 같은 라인의 sibling들에게 적용할 경우, 마지막 sibling에만 삽입 가능

7. insertAdjacentHTML()

• 원하는 위치에 지정하여 원하는 tag, 내용을 삽입할 수 있음
• 사용 방법: element.insertAdjacentHTML(position, text);
• position에 대한 사용 방법(아래)

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

8. removeChild(), remove()

• removeChild(): 지정한 parent를 기준으로 해서 삭제하는 method
  -> 사용법: parent.removeChild(지정한 tag)
• remove(): parent를 선택할 필요 없이 간편하게 삭제하기
  -> 사용법: 지정한tag.remove()

9. child 선택하기

• firstElementChild: css의 :first-child와 유사
• lastElementChild: css의 :last-child와 유사

10. css 스타일 적용하기

1. element.style.원하는css명령어 = "값"
   -> cascading으로 인해 우선순위가 상대적으로 높은 styling이 됨
2. element.style.cssText = "color: red; background-color: yellow;"
   -> 상대적으로 값 입력 부분에 오타를 만들 확률이 높기 때문에 잘 쓰이지 않는 방식
3. element.setAttribute("attribute", "attribute의 value")
   -> element.setAttribute("style", "color: red; background-color: yellow;")처럼 사용 가능
   -> styling 보단, 다른 목적으로 사용되는 경우가 더 많은 method

11. classList

기본 역할: 지정한 element의 class이름을 모두 가져온다.(배열 형태로)

11-1. element.classList.add('', '', '', ...)
.add()를 사용하여 원하는 class 이름을 원하는 대로 추가할 수 있다.

11-2. element.classList.remove('')는 반대의 역할

11-3.element.classList.toggle('abc')
abc라는 클래스가 있을 때는 remove, 없을 때는 add 해주는 on/off 스위치와 같은 역할

11-4. element.classList.contains('찾고싶은className')
찾고싶은className이 element에 있는지 없는지 확인(true/false)

12. eventListener

• 크게 addEventListener(event type, even발생시 실행될 code)와 removeEventListener(event type, even발생시 실행될 code)
• 이름 그대로 이벤트리스너를 추가/제거하는 역할
• 단, removeEventListener 사용 시, 두번째 parameter에 직접 같은 코드의 callback func을 사용하지 말고, 반드시 그 함수의 이름을(reference 형태로) 작성해야 한다.
  -> 이유는 let obj1={a:'a'}와 let obj2={a:'a'}에서 obj1과 obj2는 동일하지 않음과 같은 이유다.(각각 다른 메모리 내 주소를 참조하고 있는 이유)

---

어려웠던 내용

한번 공부했던 내용이라 어려웠던 점은 없었다.

---

나의 코드

이번 강의는 실습을 하는 내용은 아니었기에(물론 알고 있는 내용들) 다음 강의에서부터 본격적 실습이 있을 예정이다.