โœจ
Saltberry
GithubLinkedIn
  • ๊ฐœ์š” Overview
  • ๐Ÿ“HTML/CSS
    • ๊ตฌ์กฐ HTML
    • ์Šคํƒ€์ผ CSS
      • z-index
  • ๐Ÿ“ฆ๊ฐœ๋ฐœ Development
    • ๊ฐœ๋ฐœ Implementation
    • ๋‹จ์–ด Glosarry
    • ๊นƒ Git
    • ํ•ด์‹œ Hash
    • ๋…ธ๋“œ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ € Node Package Manager
    • ๋ธŒ๋ผ์šฐ์ € ๋žœ๋”๋ง Browser Rendering Process
    • ๊ต์ฐจ ์ถœ์ฒ˜ ๋ฆฌ์†Œ์Šค ๊ณต์œ  CORS
    • ์ธํ„ฐํ”„๋ฆฌํ„ฐ Interpreter
    • Object-oriented programming(OOP) ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ
  • ๐Ÿ’กCS 50
    • Computational Thinking
  • โœจ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Javascript
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€ What is JavaScript
    • ํ‘œํ˜„์‹๊ณผ ๋ฌธ Expression Statement
    • ๋ณ€์ˆ˜ Variable
    • ํ•จ์ˆ˜ Function
    • ์ฐธ๊ณผ ๊ฑฐ์ง“ ๊ฐ’ Truth Falsy
    • ๋ฐฐ์—ด Array
    • Import Export
    • ์Šคํƒ๊ณผ ํ Stack Queue
    • ๋ฌธ์„œ๊ฐ์ฒด๋ชจ๋ธ Document Object Model
      • ๊ฐœ์š” Overview
      • ๋„ํ๋จผํŠธ Document
      • HTMLCollection
      • getMethod
      • NodeList
      • childNodes, children
      • Event
      • live, static
      • Element
      • DOM Token
      • ์†์„ฑ attribute
      • implementation
      • ๋…ธ๋“œ Node
      • HTMLElement
    • ๋ธŒ๋ผ์šฐ์ € ์ €์žฅ์†Œ Cookie Web Storage
  • ๐ŸŽ๋ฆฌ์•กํŠธ React
    • ๋ฆฌ์•กํŠธ ํ†ง์•„๋ณด๊ธฐ Overview
    • Intro
      • ์ƒํƒœ์˜ ๋ถˆ๋ณ€์„ฑ State Immutability
      • Props and State
      • Hooks
    • Concepts
  • ๐Ÿšฆํƒ€์ž…์Šคํฌ๋ฆฝํŠธ Typescript
    • Page 1
  • ๐Ÿ—ƒ๏ธ๋ฆฌ๋•์Šค Redux
    • ์™œ ๋ฆฌ๋•์Šค๋ฅผ ์‚ฌ์šฉํ• ๊นŒ Why Redux
    • ํ”Œ๋Ÿญ์Šค Flux
  • ๐Ÿ“ฌ๋„ฅ์ŠคํŠธ Nextjs
    • Pages
  • โœ…๋ฉด์ ‘ Interview
    • Index
    • Implement experiences
    • Best practice for query parameter and fetch
  • ๐Ÿš€TECH
    • Lists
    • Zustand
  • ๐ŸงฌAlgorithm
    • Types of algorithms
    • ์ด์ง„์ˆ˜ ๋ณ€ํ™˜ Binary Number
    • ํ›„์œ„ ์—ฐ์‚ฐ์ž Postfix expression
    • ์„ ํƒ ์ •๋ ฌ Selection Sort
    • Find longest substring without repeating characters
    • ์˜ฌ๋ฐ”๋ฅธ ๊ด„ํ˜ธ Valid Parentheses
  • ๐Ÿ“”Mathematics
    • ๋‹คํ•ญ์‹ Polynomial
  • ๐Ÿ—‚๏ธDatabase
    • ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค Database
  • ๐Ÿ“Class
    • ์ž๋ฃŒ๊ตฌ์กฐ Data Structure
      • ๋ฐฐ์—ด Array
    • C++ ํ”„๋กœ๊ทธ๋ž˜๋ฐ
      • C++ ๊ธฐ์ดˆ
    • ์†Œํ”„ํŠธ์›จ์–ด ๊ณตํ•™ Software engineering
      • ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ์š” Software overview
      • ์†Œํ”„ํŠธ์›จ์–ด ํ”„๋กœ์„ธ์Šค Software process
    • ์ž๋ฐ” Java
      • ์ž๋ฐ”์™€ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ Java and OOP(Object-oriented programming)
  • Java
    • ์ž๋ฐ”๊ฐ€ ๋ญ์ง€?
  • CA EI
    • CA EI
Powered by GitBook
On this page
  1. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Javascript
  2. ๋ฌธ์„œ๊ฐ์ฒด๋ชจ๋ธ Document Object Model

live, static

live -> document์— element๋ฅผ ์ถ”๊ฐ€/์‚ญ์ œ ํ–ˆ์„ ๋•Œ ๋ฐ”๋กœ ๋ฐ˜์˜๋จ

static -> ๋ฐ”๋กœ ๋ฐ˜์˜๋˜์ง€ ์•Š์Œ

const buttons = document.getElementById("buttons");
const sports = document.querySelectorAll("sports");


const onClickHandler = () => {
    const el = document.createElement("li"); //param์€ ํƒœ๊ทธ์ด๋ฆ„์œผ๋กœ ์—˜๋ฆฌ๋จผํŠธ ์ƒ์„ฑ, ๋‹คํ๋จผํŠธ์— ํ‘œํ˜„๋˜๋ ค๋ฉด ๋…ธ๋“œ์— ๋จผ์ € ๋ฐ˜์˜๋˜์–ด์•ผํ•จ
    el.textContext = "๋ฒ„ํŠผ";
    buttons.appendChild(el);
    sports.appendChild(el); //nodeList๋Š” ๋ฐ”๋กœ ๋ฐ˜์˜๋˜์ง€ ์•Š์Œ
}

buttons.onClick = onClickHandler; //buttons๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋งˆ์ง€๋ง‰ child์— ์ƒ๊น€

//๋…ธ๋“œ ํŠธ๋ฆฌ์— ๋…ธ๋“œ(์—˜๋ฆฌ๋จผํŠธ)๋ฅผ ์ถ”๊ฐ€/์‚ญ์ œํ•˜๋ฉด HTMLCollection์— ์ถ”๊ฐ€๋˜๊ณ  ๋ฐ”๋กœ ๋ฐ˜์˜๋จ

const el = document.createElementNS(namespace, "div");

<div xmlns:a="https://www.w3.org/TR/html5/" /> //namespace ์—˜๋ฆฌ๋จผํŠธ๊ฐ„์˜ ์ถฉ๋Œ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด URI๋กœ ํ‘œํ˜„

Last updated 2 years ago

โœจ