myP.textContent ="글만이면!"

myP.innerHTML = "I'm Strong!!"
innerHTML은 요소 내포함된 html마크업 가져오기!

innertext br태그인식 다른 요소 무시
사람이 읽을 수 있는 요소만 처리한다!.

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

innerHTML은 요소 내에 포함 된 html마크업을 가져오거나 설정.

사이트의 공격경로가 되어 보안 위험할 수 있음.

<script>alert(I am John in an annoying alert!')</script>

script 태그 사용없이 js 실행하면, innerHTML을 사용하여 제어할 수 없는 문자열을 설정할 때마다 여전히 보안위험이 있다.
일반 텍스트 합입은 innerHTML을 사용하지 않는게 좋다.

beforebegin / afterbegin
beforeend / afterend

노드 탐색하기

줄바꿈을 표시
이스케이프 문자에 속함
element가 있다면 요소 찾기
없으면 노드찾기 => 노드로 찾는다.

previousSibling() => Element는 물론 #text와 주석까지 node로 카운트하여 반환

previousElementSibling() => Element만 카운트하여 반환

이벤트 흐름(단골문제)

브라우저의 자연스러운 기능 (당연히 일어남)
브라우저 화면에서 이벤트가 발생하면 브라우저는 가장 먼저 이벤트 대상을 찾기 시작합니다.
캡처링 이벤트가 있다면 실행!
가장 상위의 window객체부터 document, body순으로 DOM트리를 따라 내려감 = 캡처링 단계라 한다. 이때 이벤트 대상을 찾아가는 과정에서 브라우전느 중간에 만나는 모든 캡처링 이벤트 리스너를 실행, 그리고 이벤트 대상을 찾고 캡처링이 끝나면 다시 DOM트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행한다.(위로 올라감)
이러한 과정에서 이벤트 리스너가 차례로 실행되는 것을 이벤트 전파 (event propagation) 이라 한다.

이벤트가 발생할 때, 이벤트리스너가 달려있을때만 이 현상이 일어나는건 아니다.
클릭도 이벤트!

true를 넣으면 캡처링 이벤트
안넣으면? 버블링 이벤트

이벤트

이러한 이벤트의 특징 덕분에 이벤트 객체에는 target, currentTarget 이라는 속성이 존재합니다.
target 속성에는 이벤트가 발생한 진원지의 정보가 담겨 있습니다.
target 속성을 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근 할 수 있습니다.
클릭했을때, 진원지의 정보가 target이란 곳에 담겨져있다.
이벤트리스너가 안달려도 target이 있으면 가져올 수 있다.

이벤트요소는 article에 있다.
currenttarget은 이벤트 요소 갊다
이벤트 요소 없을때도, target통해서 해당 요소에 접근 하라 수 있다.
이를 이용해 이벤트리스너가 없어도 있는 것처럼 \

타겟을 그러면 부모 요소 이벤트리스너에 달아주면 된다.

자식요소 전체 이벤트 달고 싶을때, 자식의 부모에 addevent달아줘서, 어떤 조건 만족할때 함수 실행되도록 바꿀 수 있다. <이벤틑위임>