JS(Section 16. 웹페이지에 활용하기)

짜스의 하루 ·2024년 4월 30일
JavaScript

DOM

DOM은 Document Object Model(문서 객체 모델)의 약자로, 웹 페이지의 구조화된 표현을 나타내는 프로그래밍 인터페이스이다.

자바스크립트에서 DOM은 웹 페이지에 동적으로 접근하고 조작할 수 있는 메커니즘을 제공한다. 자바스크립트를 사용하여 DOM에 접근하면 웹 페이지의 요소들을 선택하고 변경할 수 있다. 예를 들어, 특정 HTML 요소의 내용을 변경하거나 스타일을 조정하거나 이벤트를 처리하는 등의 작업을 할 수 있다.

DOM은 트리 구조로 이루어져 있으며, 각 요소는 노드(Node)라고 불린다. 노드는 텍스트, 요소, 속성 등 다양한 유형이 있으며, 상위 요소에서 하위 요소로 내려가는 구조를 가지고 있다.

예제의 웹페이지 DOM 트리구조를 살펴보자

document 요소 확인해 볼 것
웹 브라우저 콘솔에 document를 출력해보니, 웹페이지 전체를 나타내는 것을 확인할 수 있다.

document 객체는 DOM(Document Object Model)의 시작점이며, HTML 요소들을 나타내는 다양한 속성과 메서드를 제공한다. 이를 통해 자바스크립트를 사용하여 HTML 요소를 선택하고 내용을 변경하거나 스타일을 조작하는 등의 작업을 수행할 수 있다.

  • HTMLDocument()는 HTML 문서를 나타내는 자바스크립트 생성자(constructor) 함수이다. 이 생성자 함수를 사용하여 새로운 HTML 문서 객체를 만들거나 기존에 있는 HTML 문서 객체를 가져올 수 있다.

HTML 이하 노드들 재귀적으로 출력

  • children 프로퍼티는 DOM 요소의 자식 요소들을 나타내는 유사 배열(HTMLCollection)이다. 이 프로퍼티는 해당 요소의 직계 자식 요소들만을 반환한다.

  • html.children을 호출하면 <html> 요소의 직계 자식 요소들을 나타내는 HTMLCollection이 반환됩된다. HTMLCollection은 DOM 요소들의 컬렉션을 나타내며, 배열과 유사하지만 배열 메서드를 가지고 있지 않는다.

  • 해당 HTML 코드에서는 <html> 요소의 직계 자식 요소로 <head>와 <body> 요소만이 존재한다.

위의 코드에서 DOM구조를 살펴보자

- Document (문서)
  - html
    - head
      - title
        - "DOM 예제"
    - body
      - h1 (#title)
        - "장 봐올 것"
      - ul
        - li
          - "당근"
        - li
          - "오이"
        - li
          - "양파"
      - button
        - "알~겠나요?"

이것은 HTML 문서를 트리 구조로 표현한 것으로, 각 요소는 노드(Node)로 나타내며 서로 부모-자식 관계를 형성한다. 이 구조는 문서 객체 모델(DOM) 으로서 자바스크립트 등의 프로그래밍 언어를 사용하여 웹 페이지의 요소를 선택하고 조작할 수 있도록 한다.

  • node.children: 주어진 노드의 자식 요소들을 나타내는 HTMLCollection을 출력한다. 이는 해당 노드의 직계 자식 노드들에 대한 컬렉션이다.
  • Object.getPrototypeOf(node): 주어진 노드의 프로토타입을 출력한다. 이를 통해 DOM에서 노드 객체의 상속 구조를 확인할 수 있다.


node.name:

  • 노드의 name 속성은 해당 노드의 이름을 나타낸다.
  • HTML 요소의 경우, 요소의 태그 이름을 나타낸다. 예를 들어, <h1> 요소의 경우 name 속성은 "H1"이 된다.
  • 텍스트 노드의 경우, 노드 타입을 나타내는 문자열이된다. 예를 들어, 텍스트 노드의 경우 name 속성은 "#text"가 된다.

node.children:

  • 노드의 children 속성은 해당 노드의 직계 자식 노드들을 포함하는 HTMLCollection을 반환한다.
  • 이 HTMLCollection은 노드의 자식 요소들을 나타낸다.
  • 자식 요소가 없는 경우, 빈 HTMLCollection이 반환한다.
  • HTMLCollection은 유사 배열이므로 배열과 유사한 방식으로 접근할 수 있지만, 배열 메서드를 직접 사용할 수는 없다.

💡 각 요소들의 족보 확인

document 객체의 모든 조상이 출력된다. 즉, HTML 문서의 최상위 요소인 <html> 요소에서부터 document 객체까지의 모든 객체가 출력된다. 이는 DOM(Document Object Model)의 상속 구조를 확인하는 데 유용한 방법 중 하나이다.


첫번째 출력값과 두번째 출력값이 다른 이유는?

첫 번째 출력값:

  • HTMLDocument: HTML 문서를 나타내는 DOM 객체
  • Document: 모든 DOM 문서에서 사용되는 기본 문서 객체
  • 이 목록은 문서 전체의 조상들을 나타내며, document 객체의 조상들을 출력한 것이다.

두 번째 출력값:

  • HTMLHtmlElement: HTML 문서의 최상위 요소인 <html> 요소를 나타내는 DOM 객체이다.
  • HTMLElement: HTML 문서의 모든 요소(Element)의 기본 클래스이다.
  • 이 목록은 <html> 요소의 조상들을 나타내며, document.documentElement 객체의 조상들을 출력한 것이다.

EventTarget 인터페이스는 이벤트를 처리하기 위한 기본적인 기능을 정의한다.
모든 DOM 노드는 이벤트를 처리할 수 있어야 하므로, EventTarget 인터페이스를 구현한다.

Node는 DOM 트리의 모든 노드 타입의 추상적인 기본 클래스이다.
Node는 HTML 문서의 구성 요소를 의미하며, <html>, <head>, <title>,<body> 등을 나타낸다.
Node 클래스는 DOM의 구조를 정의하는 핵심 요소로서, 트리 구조에서 노드들 간의 관계를 나타낸다.

Document는 DOM 문서 전체를 나타내며, Element는 HTML 요소를 나타낸다.
Document와 Element는 모두 Node 클래스의 하위 클래스이다. 즉, Document와 Element 객체는 모두 Node의 기능을 상속받는다.
Document는 HTML 문서의 전체 구조를 포함하고 있으며, Element는 HTML 문서의 각 요소를 나타낸다.

요소 선택하기

I. 요소 선택
🔗 Document 또는 🔗 Element의 인스턴스 메서드들. 자식 클래스들로 상속됨

Document는 HTML 문서 자체를 나타내고 전체적인 구조와 정보를 포함하며, Element는 HTML 문서 내의 개별 요소를 나타내고 해당 요소의 속성 및 내용과 같은 세부 정보를 포함

1 . getElementsByTagName - 태그명으로 선택

  • getElementsByTagName('section')은 HTML 문서 내에서 <section> 요소들을 선택한다.
  • $sections 변수에는 HTMLCollection이 할당된다. 이 HTMLCollection에는 선택된 모든 <section> 요소가 포함됩니다.
  • li도 똑같이 작동한다.

getElementsByTagName 메서드는 선택된 요소들을 태그 이름을 기준으로 가져오기 때문에, 선택된 요소들은 해당 태그를 직접 포함하고 있는 모든 요소이다. 이를 통해 해당 요소들을 컬렉션 형태로 얻을 수 있다.

  • 💡 반환값: 🔗 HTMLCollection - 유사 배열 객체 & 이터러블

⭐ 요소 노드에 사용시 그 하위에서 선택

  • Element로부터 물려받은 메서드
  • 이후의 메서드들에도 동일하게 적용됨

    HTML 문서에서 <ul> 요소를 선택하고자 할 때, 해당 요소의 자식으로 있는 <li> 요소들을 선택하는 것을 생각해볼 수 있다. 이때 "요소 노드에 사용시 그 하위에서 선택"이라는 표현은 <ul> 요소를 기준으로 하위에 있는 모든 <li> 요소를 선택한다는 것을 의미한다,

sections에서 인덱스가 0번인 요소들 중에 TagName이 li인 요소를 선택해서 출력해라 를 의미한다.

2 . getElementsByClassName - 클래스명으로 선택
class 이름이 'plant'인 요소들을 모아서 $plants 에 저장한 후, $plants에서 인덱스가 0인 요소중에, className이 'soldout'을 출력한 것을 의미한다.

3 . getElementById - 아이디로 선택

  • ⭐ Document만의 메서드 - 문서 내 유일한 요소이므로

4 . querySelector, querySelectorAll

  • DOM(Document Object Model)에서 사용되는 메서드로, CSS 선택자를 사용하여 HTML 문서 내에서 요소를 선택하는 데 사용된다. 둘 다 CSS 선택자를 사용하여 요소를 선택하고 반환
  • querySelector 메서드는 HTML 문서 내에서 지정된 CSS 선택자와 일치하는 첫 번째 요소
  • querySelectorAll 메서드는 HTML 문서 내에서 지정된 CSS 선택자와 일치하는 모든 요소를 NodeList로 반환
    위의 두가지 예제를 살펴보면, querySelectorAll의 경우, NodeList를 통해서 모든 요소를 배열로 반환하는 것을 확인할 수 있다.

II. 노드 기준 탐색
1. 자식 노드 탐색


css 선택자가 'section' 인 요소들 중, 첫번째 요소의 children 요소를 출력한다.
이는 HTMLCollection의 배열의 형태로 출력된다.
똑같은 위치를 이번에는 childNodes 로 출력해 보았더니 이전과 다른 출력값을 나타나는 것을 확인할 수 있다.

  • children 프로퍼티: 해당 요소의 자식 요소 중에서 Element 노드만을 반환하며, 텍스트 노드나 주석 노드는 반환하지 않는다.
  • childNodes 프로퍼티: 해당 요소의 모든 자식 노드를 포함하며, Element 노드 외에도 텍스트 노드나 주석 노드도 포함한다. 즉, 채소에서 당근으로 넘어갈 때 공백을 택스트 처리해서 text 요소를 포함시켜 추가하는 것이다.

  • document.querySelector('section'): HTML 문서에서 첫 번째로 발견되는 <section> 요소를 선택한다.
  • .querySelector('li') : 이전에 선택된 <section> 요소 내에서 첫 번째로 발견되는 <li> 요소를 선택한다.
  • .children : 선택된 <li>요소의 자식 요소들을 나타내는 HTMLCollection을 반환한다.

Node의 메서드들

$firstUl.firstChild는 선택된 첫 번째 <ul> 요소의 첫 번째 자식 노드를 나타낸다. 이는 해당 <ul> 요소의 첫 번째 자식 요소를 반환한다.
$firstUl.lastChild는 선택된 첫 번째 <ul> 요소의 마지막 자식 노드를 나타낸다. 이는 해당 <ul> 요소의 마지막 자식 요소를 반환한다.

  • 그러나 주의할 점은 firstChild와 lastChild 프로퍼티는 텍스트 노드와 같은 모든 자식 노드를 반환한다.

Element의 메서드들

선택된 첫 번째 <ul> 요소의 첫 번째 자식 요소를 나타낸다. 이것은 HTML 문서 내에서 해당 <ul> 요소의 첫 번째 자식 요소 중에서 요소 노드인 것을 반환한다.

ul에 첫번째 요소의 첫번째 자식은 text인 '당근'을 나타낸다.

  • $firstUl.firstElementChild : li요소
  • $firstUl.firstElementChild.firstChild : li 요소 안에 있는 text

2. 형제, 부모 노드 탐색
Node의 메서드들

$secondLi.previousSibling은 선택된 $secondLi 요소의 이전 형제 노드를 나타내고, $secondLi.nextSibiling 그 반대로, 다음 형제 노드를 나타낸다.

Element의 메서드들

요소 조작


요 요소들을 가지고 실습을 진행해보자

I. 요소의 내용 확인 및 수정

const $carrot = document
.querySelector('section > ul > li');

css 선택자 section에 속한 ul에 속한 li 중, 첫번째 요소를 의미한다.

1. textContent - Node의 기능

  • 텍스트에 관한 접근자 프로퍼티

2. nodeValue - Node의 기능

  • 텍스트 노드 전용 접근자 프로퍼티 - 다른 노드에서는 null 반환

  • $carrot.firstChild.nodeValue는 선택된 $carrot 요소의 첫 번째 자식 노드의 텍스트 값을 반환

3. className - Element의 기능

  • 클래스에 관한 접근자 프로퍼티 - 문자열로 다룸

  • document.querySelector('section ul'): HTML 문서 내에서 첫 번째 <section> 요소를 선택한 후 그 하위의 첫 번째 <ul> 요소를 선택한다. lastElementChild : 이전에 선택된 <ul> 요소의 마지막 자식 요소를 선택한다.
  • 현재 양파 요소는 class = "hidden"이고 속성이 display : none; 으로 화면에 보이지 않는다.

* $onion.className 속성으로 class 이름을 확인하고, ' '로 변경해주었다.

화면에 정상적으로 양파가 출력되는 것을 확인할 수 있다.

  • $onion.className = 'soldout organic';와 같이, 클래스 이름을 두개 지정해 줄 경우, 띄어쓰기를 하면서 적용해주면 된다.

4 . classList - Element의 기능

  • 클래스에 관한 읽기 전용 프로퍼티

출력해보니, $onion 의 클래스를 배열형태로 출력되는 것을 확인할 수 있다.

배열 형태고, 이터러블이기 때문에, 스프레드 형식으로 출력할 수 있다.

remove(제거), add(추가), toggle(특정 클래스의 존재 여부를 확인하고, 해당 클래스가 있으면 제거하고, 없으면 추가하는 메서드)등의 다양한 기능을 사용할 수 있다.

5. style - HTMLElement의 기능

6. getComputedStyle - 💡 window의 기능

  • 인자로 전달받은 요소의 계산된 CSS 속성 정보 반환

엄청 길고 다양한 css와 관련된 속성들을 출력할 수 있다.
출력된 속성들 중, 필요한 속성들만 뽑아서 출력할 수도 있다.

style 프로퍼티는 인라인 스타일을 변경하는 데 사용되고, getComputedStyle() 함수는 요소의 최종 스타일 정보를 가져오는 데 사용된다.

7. getAttribute, setAttribute - Element의 기능

  • $hyperLink.setAttribute('href', 'https://velog.io/@leeeee/posts') : $hyperLink 요소의 href 속성 값을 "https://velog.io/@leeeee/posts"로 변경한다.

8. value, checked - 인풋 요소들의 기능

  • document.querySelector('input[name=message]'): HTML 문서에서 name 속성 값이 "message"인 첫 번째 <input> 요소를 선택하여 $message 변수에 할당한다.
  • document.querySelector('input[name=toggle]'): HTML 문서에서 name 속성 값이 "toggle"인 첫 번째 <input>요소를 선택하여 $toggle 변수에 할당한다.
  • $message.value 의 값을 '안녕, 자기소개 부탁해~' 로 변경하자, text 칸의 내용이 변경된 것을 확인할 수 있다.
  • $toggle.checked check의 여부를 판단하면서, 체크가 되어있지 않아 false로 출력된 것을 확인할 수 있다.

II. 요소 제거
removeChild - Node의 기능

  • document.querySelector('section > ul') : HTML 문서에서 첫 번째 <section> 요소의 자식 중에서 첫 번째 <ul> 요소를 선택하여 $ul 변수에 할당한다.
  • $ul.removeChild($onion): $ul 변수에서 $onion 변수가 참조하는 요소를 제거한다.
  • $ul.removeChild($ul.lastElementChild) : $ul 변수에서 마지막 자식 요소를 제거한다.

⭐ 자식 요소 모두 지우기

while ($ul.firstChild) {
  $ul.removeChild($ul.firstChild)
};
  • $ul.removeChild($ul.firstChild): 각 반복마다 ul요소의첫번째자식요소를제거한다.ul 요소의 첫 번째 자식 요소를 제거한다.ul에 firstChild의 요소가 있을 동안, 계속 삭제가 이루어지므로 자식 요소가 모두 삭제된다.

III. 요소 생성 및 추가
createElement - Document의 기능

  • 인자로 주어진 태그명의 Element 요소 생성하여 반환

  • <li> 요소를 생성하고, 그 결과로 새로운 <li> 요소를 나타내는 $tomato 변수에 할당
  • $tomato의 textContent 새로 생성된 <li> 요소에 텍스트 내용을 설정 --> '토마토'로 설정

하지만, 이렇게 생성만 한다면, 화면에 나타나지는 않는다.

appendChild - Node의 기능

  • 인자로 주어진 요소를 자식요소 중 마지막 위치로 이어붙임

$ul의 맨 뒤에 $tomato를 붙이겠다. 를 의미한다.


  • ['상추', '가지', '브로콜리'].forEach(item => { ... }) : 배열 ['상추', '가지', '브로콜리']의 각 요소에 대해 순회한다. 순회하는 동안 각 요소를 item 매개변수로 전달하여 실행한다.
  • $el = document.createElement('li'); : 각 요소마다 새로운 <li> 요소를 생성한다. 이 때, 새로 생성된 요소를 참조할 변수 $el을 선언하고 할당한다.
  • $el.textContent = item; : 각 el요소의텍스트내용을‘item‘에있는값으로설정한다.즉,순회중인배열의각요소를각각의‘el 요소의 텍스트 내용을 `item`에 있는 값으로 설정한다. 즉, 순회 중인 배열의 각 요소를 각각의 `el` 요소에 텍스트로 설정한다.
  • $ul.appendChild($el); : 각 $el 요소를 $ul 요소의 자식으로 추가한다. 이 과정에서 배열의 각 요소에 대한 리스트 아이템이 생성되고, 이를 $ul 요소에 추가하여 리스트를 만든다.

새로운 섹션을 만들어서 새로운 리스트를 추가해보자

  • document.createElement('section') : 새로운 <section> 요소를 생성하고, 이를 $newSec 변수에 할당한다.
  • document.createElement('ul'): 새로운 <ul> 요소를 생성하고, 이를 $newUl 변수에 할당한다.
  • $newSec.appendChild($newUl): $newSec 요소에 $newUl 요소를 자식으로 추가한다. 이로써 $newSec 요소 내부에는 새로운 리스트가 생성된다.
  • 배열 [{ name: '소고기', classes: []}, ...]를 순회하면서 각 객체의 정보를 기반으로 리스트 아이템을 생성합한다.
  • $el = document.createElement('li') : 각 객체에 대해 새로운 리스트 아이템 <li> 요소를 생성하고, 이를 $el 변수에 할당한다.
  • $el.textContent = itm.name; : $el 요소의 텍스트 내용을 현재 순회 중인 객체의 name 속성 값으로 설정한다.
  • $el.classList.add(...itm.classes) : 현재 순회 중인 객체의 classes 속성에 포함된 클래스들을 $el 요소의 클래스 목록에 추가한다.
  • $newUl.appendChild($el) : 생성된 리스트 아이템 $el을 $newUl 요소에 자식으로 추가한다.
  • document.querySelector('body').append($newSec) : 생성된 $newSec 요소를 body 요소에 마지막 자식으로 추가한다.

이벤트

⭐ addEventListener - EventTarget의 기능

  • 첫 번째 인자로 주어진 이름의 이벤트 발생시 두 번째 인자로 주어진 콜백함수 실행
  • 특정 요소나 객체에 이벤트를 설정하고, 이벤트가 발생했을 때 실행할 함수를 등록할 수 있다.

click 이벤트

  • 요소가 클릭되었을 때, alert 창을 띄워보자
$button1.addEventListener('click', ()=>{
    alert('안녕하세요!');
});

이벤트 객체
이벤트 객체는 일반적으로 이벤트 핸들러 함수의 첫 번째 매개변수로 전달된다. 이를 통해 이벤트 핸들러 함수 내에서 해당 이벤트 객체에 접근하여 필요한 정보를 추출하고 처리할 수 있다.

mouseenter, mouseleave 이벤트
--> 마우스 커서가 들어올/나갈 때

  • $button2 요소에 마우스가 진입했을 때(mouseenter 이벤트) 실행된다.

  • 이벤트가 발생했을 때 실행되는 콜백 함수는 다음과 같은 작업을 수행한다. :

  • if(timeout) clearTimeout(timeout); : 이전에 설정된 타임아웃이 있다면 클리어한다. 이것은 마우스가 빠르게 움직이는 경우를 대비한 것으로, 새로운 타임아웃을 설정하기 전에 이전 타임아웃을 제거한다(중복 제거)

  • $button2.firstElementChild.textContent = '5초 후에 터집니다. 🧨': $button2 요소의 첫 번째 자식 요소(텍스트 노드가 아닌 요소)의 텍스트 내용을 '5초 후에 터집니다. 🧨'로 변경한다.

  • timeout = setTimeout(() => { ... }, 5000); : 5초 후에 실행되는 타임아웃을 설정한다.
    이때 타임아웃 콜백 함수는 다음과 같은 작업을 수행한다:

  • $button2.firstElementChild.textContent = '🧨🧨🧨🧨🧨🧨🧨🧨'; : $button2 요소의 첫 번째 자식 요소(텍스트 노드가 아닌 요소)의 텍스트 내용을 '🧨🧨🧨🧨🧨🧨🧨🧨'로 변경한다.

  • 따라서 마우스가 $button2 요소에 진입하면 '5초 후에 터집니다. 🧨'로 텍스트가 변경되고, 5초 후에 '🧨🧨🧨🧨🧨🧨🧨🧨'로 텍스트가 변경된다.

이렇게 하면, 마우스를 올렸다가 땠을 때에 계속 실행기 되기 때문에 mouseleave이벤트도 등록해주자

  • $button2 요소에서 마우스가 벗어날 때(mouseleave 이벤트) 실행된다.
  • 이벤트가 발생했을 때 실행되는 콜백 함수는 다음과 같은 작업을 수행한다. :
  • if(timeout) clearTimeout(timeout); : 이전에 설정된 타임아웃이 있다면 클리어한다. 이것은 마우스가 빠르게 움직이는 경우를 대비한 것으로, 새로운 타임아웃을 설정하기 전에 이전 타임아웃을 제거한다.
  • $button2.firstElementChild.textContent = '올리지 마세요. 경고입니다.'; : $button2 요소의 첫 번째 자식 요소(텍스트 노드가 아닌 요소)의 텍스트 내용을 '올리지 마세요. 경고입니다.'로 변경합니다.

이제 오른쪽에 보이는 숫자를 카운트다운을 해보자
💡 같은 이벤트에 대해 여러 핸들러 등록 가능

  • $button2 요소에 마우스가 진입했을 때(mouseenter 이벤트) 실행된다.
  • 이벤트가 발생했을 때 실행되는 콜백 함수는 다음과 같은 작업을 수행한다:
  • if (interval) clearInterval(interval); : 이전에 설정된 인터벌이 있다면 클리어한다. 이것은 마우스가 빠르게 움직이는 경우를 대비한 것으로, 새로운 인터벌을 설정하기 전에 이전 인터벌을 제거한다.
  • countdown = 5; : countdown 변수를 5로 초기화한다. 이 변수는 카운트다운 값으로 사용된다.
  • $button2.lastElementChild.textContent = countdown; : $button2 요소의 마지막 자식 요소(텍스트 노드가 아닌 요소)의 텍스트 내용을 countdown 값으로 설정한다.
  • interval = setInterval(() => { ... }, 1000); : 1초마다 실행되는 인터벌을 설정한다. 이때 인터벌 콜백 함수는 다음과 같은 작업을 수행한다.
  • $button2.lastElementChild.textContent = --countdown; : $button2 요소의 마지막 자식 요소(텍스트 노드가 아닌 요소)의 텍스트 내용을 countdown 값을 1씩 감소시킨 값으로 설정한다.
  • if (!countdown) clearInterval(interval); : 만약 countdown 값이 0이 되면, 인터벌을 종료한다.

따라서 마우스가 $button2 요소에 진입하면 5부터 시작하여 1초마다 숫자가 감소하는 카운트다운이 시작되고, 0이 되면 카운트다운이 종료된다.

이렇게 하게 되면, 마우스를 내려도 숫자 감소는 계속 진행된다.
--> 이제 마우스를 내렸을 때, 0으로 다시 돌아갈 수 있도록 이벤트를 지정해주자

  • $button2 요소에서 마우스가 벗어날 때(mouseleave 이벤트) 실행된다.
  • 이벤트가 발생했을 때 실행되는 콜백 함수는 다음과 같은 작업을 수행한다 :
    if(interval) clearInterval(interval); : 이전에 설정된 인터벌이 있다면 클리어한다. 이것은 이전 인터벌을 제거하여 중복으로 카운트다운이 발생하는 것을 방지한다.
  • countdown = 0; : countdown 변수를 0으로 설정하여 카운트다운을 중지한다.
  • $button2.lastElementChild.textContent = countdown;: $button2 요소의 마지막 자식 요소(텍스트 노드가 아닌 요소)의 텍스트 내용을 countdown 값으로 설정하여 카운트다운이 0으로 표시되게 된다.

focus, blur 이벤트
요소가 포커스(입력을 위해 선택)되었을 때 / 해제되었을 때

$input1 요소의 placeholder 속성을 변경하여 입력 힌트를 제공한다.

  • $input1.setAttribute('placeHolder', '입력해주세요'); : $input1 요소의 placeholder 속성을 '입력해주세요'로 설정한다. 이렇게 함으로써 사용자가 해당 입력란에 포커스를 받을 때 '입력해주세요'라는 힌트가 나타나게 된다.

  • $input1 요소의 placeholder 속성을 변경하여 입력 힌트를 변경한다.
  • $input1.setAttribute('placeHolder', '다음번엔 꼭 입력해주세요'); : $input1 요소의 placeholder 속성을 '다음번엔 꼭 입력해주세요'로 설정한다. 이렇게 함으로써 사용자가 해당 입력란에서 포커스를 잃을 때 '다음번엔 꼭 입력해주세요'라는 힌트가 표시된다.

keyup 이벤트
키보드 키가 눌린 후 올라올 때

  • if (e.key !== 'Enter') return; : 이벤트 객체 e의 key 속성을 확인하여 키가 'Enter' 키가 아니라면 함수를 종료한다.
  • $newLi = document.createElement('li');: 새로운 <li> 요소를 생성한다.
  • $newLi.textContent = e.target.value;: 생성한 <li> 요소의 텍스트 내용을 입력한 값으로 설정한다. 입력한 값은 이벤트 객체 e의 target 속성을 통해 접근할 수 있다.
  • $ul.appendChild($newLi); : 생성한 <li> 요소를 $ul 요소에 추가한다.
  • e.target.value = ''; : 이벤트 객체 e의 target 속성을 통해 접근한 입력란의 값을 빈 문자열로 설정한다. 이렇게 함으로써 사용자가 입력한 값이 입력란에서 지워진다.


입력하고 엔터 칸에 '안녕'을 입력하고 엔터를 누르면 아래 li요소에 추가되는 것을 확인할 수 있다.

profile
짜스의 하루
2024. 01. 02 ~ 백앤드 공부 시작, 2024. 04.01 ~ 프론트 공부 시작
이전 포스트

JS(Section 15. 코드 파일 다루기)

다음 포스트

[미니 프로젝트] To-do-List 만들기

0개의 댓글