멋쟁이 사자처럼_1210

jojo·2021년 12월 10일

1기 TIL 기록 멋쟁이사자처럼 프론트엔드

멋쟁이사자처럼

목록 보기

34/39

수업

DOM

요소제어

appendChild(myLi)
마지막 자식 요소에 넣어준다.

insertBefore(span, sibling)
span을 자식(sibling) 전에 넣어줘라

문자열을 사용해 노드 생성&추가

textContent

        const myBtn = document.querySelector("button");
        const myP = document.querySelector("p");
        const myInput = document.querySelector("input");

        myBtn.addEventListener('click', function(){
            myP.textContent = myInput.value;
            //입력한 값이 p 태그의 텍스트컨텐트로 할당이 됨.
        });

여기 있는 내용을 클릭하면 p 태그에 넣어주라.

value 메서드는 input이라는 요소에서만 사용할 수 있다.
(값을 뽑아낼때!)

innerHTML
태그까지 적용되게 넣어줄 수 있다.
(텍스트만도 넣어줄 수있지만 그건 textContent를 쓰는게 더 효율적이다.)

innerHTML - mozilla 참고링크:
https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML#security_considerations

innerText
태그는 인식하지 않는다.

textContent와의 차이:
https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText#%EC%98%88%EC%A0%9C

textContent는 공백 및 줄 바꿈과 같은 서식을 인식하고 반환해주고 마크업만 제거해서 반환해준다. (브라우저 호환성도 좋고, 텍스트 콘텐츠의 raw 값을 보여줘서 파싱이 빠르다.)
innerText는 css가 랜더링 된다! textContent랑 비슷해보이는데 공백을 인식하진 못한다.
(사람이 읽을 수 있는 요소만 처리한다.)

insertAdjacentHTML

innerHTML과 차이

insertAdjacentHTML은 이미 사용중인 요소는 파싱하지 않는다.
요소의 내용을 변경하는 것이 아니고, HTML을 문서에 삽입하려면 insertAdjacentHTML을 쓰는게 innerHTML보다 빠르다.

insertAdjacentHTML - mozilla 참고링크:
https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

노드 탐색

console.log(cont.firstElementChild);  // 첫번째 자식
console.log(cont.lastElementChild);   // 마지막 자식
console.log(cont.nextElementSibling); // 다음 형제요소
console.log(cont.previousSibling);    // 이전 형제노드
console.log(cont.children);           // 모든 직계자식
console.log(cont.parentElement);      // 부모 요소

노드 : 요소, 주석, 텍스트컨텐츠, 줄바꿈 등등

이벤트 흐름*

이벤트 대상을 찾을 때 일어나는 현상 (이벤트를 발생시키는게 누구냐!)
~~클릭 스크롤 마우스 움직임 다 이벤트!~~

'캡처링 단계' : 타겟을 찾아가는 상태. 윈도우부터 돔트리를 따라 내려간다.
이 때 모든 캡처링 이벤트 리스너를 실행시킨다.
찾으면, 그 때 캡처링 상태가 끝나고 다시 돔트라 따라 올라가면서 만나는
'버블링 단계' : 모든 버블링 이벤트를 실행.

이렇게 이벤트 리스너가 차례대로 실행되는 것을 이벤트 전파라고 한다.

window.addEventListener('click', () => {
    console.log("window capture!");
}, true); // true : 캡처링 단계의 이벤트가 발생하도록 합니다.

true를 넣으면 캡처링 단계에서 이벤트가 발생하고
안 넣으면 버블링 단계에서 이벤트가 발생한다.

이벤트 `target, currentTarget`

target: 이벤트가 발생한 진원지의 정보가 담겨 있다.

이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 그 요소에 접근할 수 있다.
이벤트를 main에 달아도, 그 안에있는 버튼(이벤트의 진행지점)을 누르면, target은 그 버튼이다.

currentTarget: 이벤트리스너가 달려있는 그 곳.

이벤트 위임

리스너가 없어도 리스너가 있는 것처럼 사용할 수 있다.

이벤트의 `this`

이벤트가 연결된 노드를 참조한다.

    <article class="parent">
        <ol>
            <li><button class="btn-first" type="button">버튼1</button></li>
            <li><button type="button">버튼2</button></li>
            <li><button type="button">버튼3</button></li>
        </ol>
    </article>
   
    <script>
        const parent = document.querySelector('.parent');
        parent.addEventListener('click', function (event) {
            console.log(this);
        })
    </script>

어떤 버튼을 눌러도 article을 참조한다.

위의 currentTarget과 유사하다.

주의
화살표함수 안에서 this는 상위(부모)스코프를 참조한다.
그래서 화살표 함수 안에 넣으면, 윈도우가 나온다.(전역공간에 있어서!)

생각

아니 DOM의 개념은 나름 쉽다고 생각했는데, 실습을 하려고 하니까 너무 어려웠다. 근데 나만 어려운 것은 아니겠지! 그렇겠지..? 손코딩부터 열심히 하자! 많이 쓰고, 많이 쳐보면 손에 익겠지!

느낀점

잘한점

매일매일 어려워도 묵묵하게..수업을 듣고, 복습을 하고 있는게 정말 대단하다고 생각한다. 모든 것이 벅차지만 그래도 어떻게든 소화하려고 나름 노력하고 있는 모습을 보면 뿌듯하다. 앞으로도 열심히 하자..!

계획

주말에 잘 이해 안 되는 부분 손코딩 하기!
손코딩해보고 이해가는 부분은 다시 혼자 실습해보기!

jojo

2021.11~

이전 포스트

멋쟁이 사자처럼_1209

다음 포스트

멋쟁이 사자처럼_1210