DOM

yeon·2022년 9월 13일
TIL
0

FE

목록 보기
3/15

💡 과제를 진행하면서 느꼈던 점

이전에 크롬 앱 Momentum을 클론코딩하면서 다뤄봤던 개념들이었지만, 체계적인 개념 정리 없이 클론코딩만 하기 급급하다 보니 내가 했던 것이 DOM이라는 것도 모르고 사용했다는 것을 깨닫게 되었다. 이번 기회에 CRUD를 위주로 DOM을 학습하면서, 큰 뼈대를 잡고 내가 하는 것이 무엇인지 파악한 채 코드를 작성하게 되었고 좀 더 머릿속이 정리가 되는 느낌이 들었다.

🚩 새롭게 알게 된 것

HTML에 Javascript 적용

  • 웹 브라우저가 작성된 코드를 해석하는 과정에서 <script>요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈추고(일시정지), <script>요소를 먼저 실행함
  • 즉, <script>요소는 등장과 함께 실행됨
  • 따라서 <head>요소에 <script>요소를 추가한다면, <body>의 요소가 <script>에 있는 경우 오류를 일으킬 수 있음
  • 그러므로 HTML 요소를 이용하려면 <body>에 <script>를 추가하는 것이 바람직함
  • 부모가 가진 하나 또는 여러 개의 자식 요소를 조회하는 코드를 작성한다면, 여러 번 반복해서 실행하는 코드가 필요

DOM (Document Object Model)

  • HTML 요소를 Object(Javascript Object)처럼 조작(Manipulation)할 수 있는 Model
  • HTML을 분석하여 HTML의 아주 작은 부분까지 접근할 수 있게 만들어진 구조
    • DOM은 document객체에 구현되어 있음
    • DOM 구조를 조회할 때는 console.dir → DOM을 객체의 모습으로 출력

CREATE

document.createElement('')

APPEND

document.body.append()

부모노드.insertBefore(삽입 할 노드, 기준 점 노드);
  • appendChild() 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임 (prependChild라는 건 없음)
  • after(), insertAfter() 지정한 요소(참조된 노드) 뒤에 새로운 요소를 삽입
    • A.after(B) A 뒤에 B를 추가
    • A.insertAfter(B) B 앞에 A를 추가
  • before(), insertBefore() 지정한 요소(참조된 노드)의 시작 부분에 내용(특정 부모 노드의 자식 노드)을 삽입
    • A.before(B) A 앞에 B 추가
    • A.insertBefore(B) B 앞에 A 추가

READ

const oneTweet = document.querySelector('.tweet')
  • querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 HTML element의 정보를 조회
    • 셀렉터로는 HTML 요소(div), id(#tweetList), class(.tweet) 세 가지가 가장 많이 사용됨
    • 셀렉터가 되는 HTML element 중 첫 번째 element를 조회

  • 여러 개의 element를 한 번에 가져오기 위해서는 querySelectorAll 사용
    • 이렇게 조회한 HTML element들은 배열처럼 for문 사용 가능
    • HTML element들은 배열이 아닌 배열임. 유사 배열, 배열형 객체 등 다양한 이름으로 부름
    • 정식 명칭은 Array-like Object

  • get으로 시작하는 DOM 조회 메서드(getElementById(’’)) → querySelector 와 비슷한 역할을 하는 오래된 방식이라고만 이해하면 됨. 실제 동작은 동일
    • getElementsByTagName() 태그 name 파라미터에 일치하는 모든 자손 element의 집합을 생성
    • getElementsByClassName() 주어진 클래스 이름을 가진 모든 자식 element의 실시간 HTMLCollection을 반환

  • element에 대한 입력값은 element를 querySelector 등을 이용해 가져온 후 value라는 속성으로 접근 가능

UPDATE

// const oneDiv = document.createElement('div'); // <div></div>
oneDiv.textContent = 'dev'; // 내용 추가 <div>dev</div>
oneDiv.classList.add('tweet'); // class 추가 <div class="tweet">dev</div>
  • id는 Element.id로 부여
  • setAttributeclass와 id 말고 다른 attribute 추가
// element.setAttribute( 'attributename', 'attributevalue' )
let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
  aElement.textContent = 'JS' // <a id='javascript'>JS</a>
  • value 속성을 통해 element 입력값 설정

DELETE

container.append(tweetDiv)
tweetDiv.remove()

  • 여러 개의 자식 요소 지우기

    • innerHTML 로 가능하지만, 보안에서 몇 가지 문제를 가지고 있음
      (XSS Attack 적용될 위험성)
    • 따라서, 이를 대신할 메서드는 removeChild → 자식 요소를 지정해서 삭제하는 메서드
    • removeChild와 반복문(while, for, etc.)을 활용하여 모든 자식 요소를 삭제

  • remove와 removeChild 비교

    • removeChild 메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하는 것임. 최종적으로는 관계를 끊은 해당 노드의 참조를 반환
    • 반환값을 변수에 저장하지 않으면 삭제하는 노드의 참조가 더이상 없기 때문에, 자바스크립트 엔진의 GC(Garbage Collection)에 의해 잠시 후 메모리에서 삭제됨
const deleteId = document.querySelector('#delete');
  
// deleteId의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거
while (deleteId.firstChild) {
 deleteId.removeChild(deleteId.firstChild) 
}
  
// deleteId의 자식 요소가 1개만 남을 때까지 마지막 자식 요소를 제거
while (deleteId.children.length > 1) {
  deleteId.removeChild(deleteId.lastChild);
}
  
// 클래스 이름이 tweet인 요소만 찾아서 제거
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

유효성 검사 (Form validation)

  • 원하는 조건에 맞는 형식을 설정하게 해주는 기능
  • 핵심 기능에 대해, 작동이 가능한 MVP(Minimum Viable Product)를 만들어 내는 것이 목표

  • 유효성 검사 협업 과제를 진행하면서 알게 된 것
    • display: none 브라우저에서 아예 영역조차 사라짐
    • visibility: hidden 엘리먼트가 차지하는 영역을 그대로 남겨놓음
    • .test(str) 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환함 /^hello/.test(str);

이벤트 객체

  • DOM에서 이벤트는 click, onkeyup, onresize, onscroll 등 사용자 액션에 의해 발생
  • 이벤트 핸들러 이벤트가 발생할 때 실행되는 함수 → 사용자가 element에 특정 이벤트를 발생시켰을 때 이벤트 핸들러가 동작
  • 이벤트와 관련된 속성은 on이라는 접두어가 붙음
  • 이벤트 객체 사용자 입력을 트리거로 발생한 이벤트 정보를 담은 객체
  • event.target
  • .onclick 직접 객체에 지정 / .addEventListener() 메서드 사용해서 할당
btn.onclick = function(){
  console.log();
}
  
  
btn.addEventListener('click', function(){
	console.log();
});
  
  
function handler(){
	console.log();
}
btn.onclick = handler;

🔥 추가 학습이 필요한 것

  • .getElementsByTagName은 HTMLCollection으로 리턴을 하는데, .querySelectorAll은 NodeList로 리턴을 한다. HTMLCollection과 NodeList의 차이가 뭔지 궁금하다.
  • createDocumentFragment
  • template tag
  • offsetTop
  • offsetWidth
  • 협업 과제에서 다루었던 정규 표현식 - 구글링하면 숫자와 영어 조합, 유효한 신용카드 번호 등 여러 정규 표현식이 템플릿? 비슷하게 뜨는 것은 많은데, 구조나 원리를 쉽게 설명해주는 것을 찾지 못했다. [A-Za-z]가 알파벳인 것은 알겠는데, 배열 안에 저런 식으로 작성하면 어떻게 해서 대문자와 소문자 알파벳 A부터 Z까지로 인식되는지 궁금하다. 정규 표현식에 자주 등장하는 ?=.*가 뭘 뜻하는지도 궁금하다.
  • querySelector의 부모는 꼭 document 객체여야만 할까?
    → Element.querySelector 도 가능하다
profile
yeon
이전 포스트

Javascript Koans

다음 포스트

Solo project

0개의 댓글