JavaScript_01. 기본개념_HTML_DOM 2

※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.

https://www.yes24.com/Product/Goods/105608999

바닐라 자바스크립트 - 예스24

 

 

01.03 HTML 내용 변경

 

 앞에서는 DOM 요소에 접근하여 속성 정보에 대한 값을 다루었다면 여기서는 html 요소에 대해 다룬다.

 

 

● innerHTML

→ HTML의 특정 위치에 새로운 HTML을 삽입할 때 사용한다.

 

●  innerText

→ innerHTML과 유사하지만 텍스트 내용만 삽입이 가능하다.

 

●  insertAdjacentHTML()

→ DOM 요소를 기준으로 새로운 HTML을 삽입한다.

 

2개의 파라미터 사용

 

1. DOM 요소를 삽입할 위치

ㆍafterbegin : 접근한 DOM 요소의 자식 노드의 제일 첫 번째 노드로 삽입

ㆍafterend : 접근한 DOM 요소 바로 다음 노드로 삽입

ㆍbeforebegin : 접근한 DOM 요소 바로 직전 노드로 삽입

ㆍbeforeend : 접근한 DOM 요소의 자식 노드의 제일 마지막 노드로 삽입

2. 삽입할 DOM 요소에 대한 문자열

 

●  insertAdjacentText()

→ insertAdjacentHTML과 유사하지만 텍스트 내용만 삽입이 가능하다.

 

●  remove()

→ HTML 요소를 삭제할 때 사용

 

설명으로는 와닿지 않으니 예제 코드를 보면서 이해해보자.

 

 

See the Pen JS_01_ Basic concept_change by dk k (@dk-k) on CodePen.

 

 

01.04 DOM 이벤트

 

 웹 페이지를 이용하면 웹 화면과 사용자 사이에서 수많은 상호작용(interraction)이 나타난다. 예를 들어 버튼을 클릭한다든지, 마우스를 스크롤 한다든지, 검색을 위해 검색 키워드를 입력하는 행동 등이 이에 해당된다.

이렇게 사용자가 웹 페이지를 이용하면서 행하는 액션을 이벤트라고 한다.

 

● click 이벤트(onclick)

 

● change 이벤트(onchange)

 

● focus 이벤트(onfocus)

 

● blur 이벤트(onblur)

→ DOM 요소에 마우스가 포커스 되었다가 다른 DOM 요소로 이동할 때 발생하는 이벤트

 

● key 이벤트(onkeydown, onkeypress, onkeyup)

→ 사용자가 입력창에서 키보드를 입력할 때 발생하는 이벤트

 

● scroll 이벤트(onscorll)

 

● touch 이벤트

→ 스마트폰, 태블릿 같은 모바일이나 터치가 가능한 PC에서 화면을 터치하면 발생하는 이벤트

 

● load 이벤트(onload)

→ 웹 페이지의 모든 HTML DOM 요소가 로딩되면 발생하는 이벤트

 

● unload 이벤트(onunload)

→ 웹 페이지에서 다른 페이지로 이동하거나 브라우저 창을 닫을 때 발생하는 이벤트

 

예제 코드를 보고 응용해보다가 발생했던 에러

 

addEventListener 위치가 태그보다 위에 있었을 경우 에러 발생

 

 

See the Pen Untitled by dk k (@dk-k) on CodePen.

 

 

01.05 DOM Style

 태그의 style 속성을 가져오거나 새로운 스타일 속성을 추가할 수 있습니다.

 

스타일의 경우 따로 설명은 없고 예제 코드를 보면서 이해해보자.

 

 

See the Pen S_01_ Basic concept_style by dk k (@dk-k) on CodePen.

 

 이것으로 기본이 되는 문법 정리는 끝났다. 워드에 정리할 때는 브라우저의 렌더링 과정도 넣었는데 이것은 따로 작성하려고 한다. 자바스크립트를 공부하면서 jQuery를 안쓰니 이제는 제이쿼리가 더 어색해지긴 했는데.. 무슨 코드인지 못 읽은 정도는 아니니 상관없을듯함