[4기] 14일차 Java Script 배우기4(DOM)

오늘의 학습 ! DOM,Ajax!!

 

음,,, this 부터 이해가 안되기 시작하더니 오늘의 내용은 뭐,.,,

 

솔직하게 이해하지 못했다,..,하하,,, 

 

 

주말에 this 부터 한번 훑어보면서 배워보려 하였으나,,

 

 

집을 들어오니 이미 11시였다는 슬픈현실,,,,,,,,,(생일이니깐,,,생일이니깐,,, 핑계 속닥속닥)

 

 

오늘 this 부터 다시 복습해볼려고 한다 ㅠ 일단 최대한 오늘 배운 내용 

 

 

다시 읽으면서 블로그 작성해보는걸로,,,,,,,,,ㅠ,,,,,,,,ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

 

+ 이해 못한체로 적고 싶진 않았지만 

적으면서 알아가야하니,,, 적어본다,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

 

 

제가 빡대가리는 아니겠죠? ㅋㅋㅋㅋㅋㅋㅋㅋ큐 

 

1. DOM

 

- DOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할 

 

출처 : 위니브

 

이렇게, html문서를 트리형태구조로 각각의 객체들로 쪼개는 것을 의미한다.

쪼갠 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 노드(node)라고 한다.

 

DOM 트리에 접근하기

 

우선 dom 트리에 접근하기 위해서 

document 객체를 통해 html 문서에 접근이 가능한데 

 

다양한 접근 방식이 있지만 

 

queryselector 와 queryselectorALL 을 공부했다!

 

query 는 css 선택자를 의미하는데 css작성시 .name{} 의

name을 의미한다.

 

queryselector은 1개 + ALL을 붙일경우 여러개 요소를 의미한다!

 

DOM 제어 명령어

 

1. 이벤트 삽입

target.addEventListener( type, listener ) 의 문법 형태를 가진다.

 

이벤트 삽입이라는건 버튼을 클릭하였을 때 함수를 실행하라는 의미와 동일하다.

<button>HELLO!</button>

const myBtn = document.querySelector("button");

myBtn.addEventListener('click', function(){
    console.log("hello world");

 

1. html 문서에서 버튼요소를 찾는다.

2. 찾은 버튼요소를 mybtn에 할당한다.

3. 버튼에 이벤트 리스너를 추가한다 ( 이벤트리스너 의 한 종류인 클릭 )

function (){} 은 이벤트가 발생했을 때, 실행되는 함수를 의미하겠지요? 

그러면 콘솔에 hello world 라고 표시 됩니다!

 

실행하면?

 

 

이렇게 클릭할때마다 숫자가 올라가는걸 볼수 있어요 ㅎㅎ

 

2. 클래스 제어 

 

- classlist 객체를 통해 요소의 class 속성 제어

 

const myBtn = document.querySelector("button");

myBtn.addEventListener('click', function(){
    
    myBtn.classList.add("blue");

 

이렇게 버튼에 이벤트 리스너를 추가하고,

.blue {
    color: blue;
}

이렇게 블루라는 클래스를 추가하면 해당 클래스가 적용되서 클릭하였을때, 색깔이 파란색이 된다!

 

innerHTML 

- HTML 요소의 내부 HTML 콘텐츠를 나타내는 속성 

 

해당 요소의 내부에 있는 HTML 코드를 읽거나 변경가능하다. 

 

<div id="myDiv">안녕하세요!</div>

const myDiv = document.getElementById('myDiv');
console.log(myDiv.innerHTML);

myDiv.innerHTML = '<p>안녕하세요, <strong>JavaScript</strong>!</p>';

 

mydiv를 할당하고 id가 mydiv 인것을 찾습니다

콘솔에는 안녕하세요! 라고 표기

my div 를 안녕하세요,JavaScript 로 콘텐츠를 변경한다 

 

이것을 실행하면?

 

이렇게 콘텐츠를 변경하게 된다!

 

innerHTML 은 텍스트 뿐만 아니라 HTML 코드를 다룰 수 있기 때문에 내부의 HTML 구조를 변경하거나

새로운 HTML 코드를 추가하는데 용의하다!

 

사용자가 입력한 내용이나 외부에서 받은 내용을 innerHTML에 직접 삽입하는 경우, 보안상의 이슈가 발생할 수 있습니다. 이러한 경우에는 적절한 방어적인 조치를 취해야 합니다.

 

innerHTML 부분이 이해가 되지 않아 

GPT에게 물었더니 이해완료!

 

이벤트 객체

 

이벤트에서 호출되는 핸들러에는 이벤트와 관련된 모든 정보를 가지고 있는 매개변수가 전송되는 것을 이벤트 객체라고 한다.

 

이게 무슨말인교? 

<script>
    const btnFirst = document.querySelector('.btn-first');
    btnFirst.addEventListener('click', (event) => {
        console.log(event);});
</script>

 

일단 HTML 에서 btn-first 인 첫번째 요소를 찾습니다

btn-first 에 이벤트리스너를 등록합니다 ( 버튼을 클릭하는 이벤트!)

 

(event) 부분은 클릭 이벤트가 발생했을 시 실행될 함수 ! 

 

그럼 클릭 시 이벤트객체인 event 가 실행되지요! 

( 클릭과 관련 된 다양한 정보 포함!)

 

이걸 실행하면?

버튼 1을 누르고 콘솔을 보면 다양한 정보를 포함하는 pointerevent를 볼 수 있다!

 

이벤트 흐름 

 

이렇게 이벤트를 실행하게 되면 이벤트의 흐름은?

 

출처 : 위니브

 

브라우저는 이벤트 대상을 찾을 때 가장 상위에 있는 window부터 DOM트리를 따라 쭈욱 내려가는데요!

이것을 캡처링 단계라고 합니다.

 

찾아가는 과정에서 중간에 만나는 모든 캡처링 이벤트 리스너를 실행 시킵니다!

 

음? 모든 캡처링 이벤트 리스너? 음?

 

아! 발생한 이벤트의 대상이 되는 요소 + 부모요소 조상요소 들의 캡처링 이벤트 리스너도 모두 실행되는거군! 

 

내 친구 GPT 최고👍

 

이렇게 캡처링 단계가 끝나면 다시 DOM트리를 따라 올라가는데,

이때 만나는 모든 버블링 이벤트 리스너를 실행합니다 이것이 버블링 단계!

 

이렇게 이벤트리스너가 차레로 실행되는걸 이벤트 전파라고 한다.

 

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

document.addEventListener('click', () => {
    console.log("document capture!");
}, true);

parent.addEventListener('click', () => {
    console.log("parent capture!");
}, true);

btnFirst.addEventListener('click', (event) => {
    console.log("btn bubble!");
})

parent.addEventListener('click', () => {
    console.log("parent bubble!");
});

document.addEventListener('click', () => {
    console.log("document bubble!");
});

window.addEventListener('click', () => {
    console.log("window bubble!");

 

이벤트흐름대로 실행되면?

이런결과가 나옵니당 ㅎㅎㅎ

 

이벤트 target, currentTarget

 

target 속성에는 이벤트가 발생한 진원지의 정보가 담겨 있습니다. target 속성을 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근 할 수 있습니다.

currentTarget 속성에는 이벤트 리스너가 연결된 요소가 참조되어 있습니다.

 

흠,,, 

 

이벤트 리스너가 없는 요소라도 이벤트는 다양한 상황에서 발생할 수 있군 

 

내가 원치않는 이벤트가 발생했을 때 해동 요소에 접근할 수 있는 것이 타겟이라는 뜻이겠죠? ㅎㅎㅋㅋㅋ

 

<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(event.target);
        console.log(event.currentTarget);
    })
</script>

이렇게 타겟은 이벤트가 발생한 요소를 가리키고, CurrentTarget은 연결된 요소가 참조 되어있는걸 볼 수 있다!

 

이벤트 리스너가 없는 요소의 이벤트가 발생했을 때 그 해당 요소에 접근할 수 있으므로,

이것을 이용하여 리스너가 있는것처럼 사용할 수 있는데 이것을 이벤트 위임이라고한다.

 

preventDefault()

 

<body>
<a href="https://www.naver.com" class="link">네이버 링크입니다만..</a>
<script>
        const link = document.querySelector('.link');
        link.addEventListener('click', (event) => {
        console.log('clicked');
        event.preventDefault();
        })
</script>
</body>

 

 

 

이렇게 preventDefault를 사용하면 앵커의 기본동작 즉 링크를 클릭했을 때 url로 이동하는 것을 중지시키고 

콘솔에는 clicked를 출력하게 됩니다.

 

preventDefault 실습

이벤트 타입 contextmenu를 이용해 브라우저 오른쪽 버튼 이벤트 막고 '해당 페이지에서는 오른쪽 클릭을 제한합니다.’ 경고 띄우기

 

 

 

preventDefault를 이용하여 오른쪽 버튼을 눌렀을 때 경고창을 뜨게 하려면?

 

 

document.addEventListener('contextmenu', (event) => {
    event.preventDefault();
    alert('해당 페이지에서는 오른쪽 클릭을 제한합니다.');});

 

alert를 통해 경고창을 띄우게 하여 실행하면?

 

 

이렇게 브라우저의 기본동작을 중지하고 자바스크립트를 통해 기능을 처리하고자 할 때 사용!

 

preventDefault을 통해 기본동작은 취소하였지만 이벤트 전파(이벤트흐름)을 막지는 못한다.

 

그리하여, event.stopPropagation 코드를 추가한다.

 

stopPropagation()

 

- 이벤트 흐름 스탑!

function showAlert(event) {
    alert(event.currentTarget.textContent);
}
function deleteItem(event) {
    event.stopPropagation();
    const isConfirmed = confirm('삭제하시겠습니까?');
    if (isConfirmed) {
        const paragraph = event.currentTarget.parentElement;
        paragraph.parentNode.removeChild(paragraph);
    }
}
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(paragraph => {
    paragraph.addEventListener('click', showAlert);
});

 

 

showalert 함수를 사용하여 p태그의 내용을 alert창으로 출력하고

deleteitem함수를 이용하여 삭제버튼을 클릭하였을 때 확인창을 띄우며,

stopPropagation() 를 이용하여 이벤트 전파를 중지하므로 p태그 클릭 시, 삭제버튼의 이벤트가 전달되지 않는다.

 

이처럼 이벤트흐름을 막는 것이 stopPropagation()이다.

 

이렇게 오늘 DOM에 대해 배웠답니다 !!! ㅎㅎㅎ 

 

전 이상하게 왜 수업때는 이해못한내용을 

 

이렇게 다시 읽고 복습할 땐 이해가 잘 될까요? ㅋㅋㅋㅋㅋ

 

독학 스타일인가? ㅋㅋㅋㅋ 뭔가

 

이해안되면 몇번씩 몇번씩 돌아가서 읽어서 그런가? ㅎㅎㅋㅋㅋ

 

 

이게 수업하면 후루루룩 지나가다보니 이해안갈때가 종종 있더라구요 ㅠ

젤 문제는 용어가 아직 안익숙하다는거지만 ㅎㅎ 

 

이렇게 하나씩 이해하다보면 나중엔 바로바로 알아들을 수 있겠죠! ㅎ👌

 

 

원래 오늘 Ajax 까지 나갔지만, Ajax 복습은 내일 프로젝트 끝난 후에 적어볼까 합니다! 

 

너무 한번에 많은 내용을 넣었다가 도로 다 기억 안날 거같아서요 ㅎㅎ 

 

오늘 복습한거 다시 한번 전체적으로 읽고 자면 베스트! >_<

 

이렇게 오늘도 파이팅 했구 ! 

 

내일도 공부 파이팅!!!!!!!!