{"id":346,"date":"2026-05-17T06:45:51","date_gmt":"2026-05-16T22:45:51","guid":{"rendered":"https:\/\/junai.ai\/blog\/js-dom-14\/"},"modified":"2026-05-17T07:11:44","modified_gmt":"2026-05-16T23:11:44","slug":"js-dom-14","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/js-dom-14\/","title":{"rendered":"DOM \uc870\uc791 \u2014 querySelector\u00b7\uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108 (\uc911\uae09 14\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 540 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n\/* js-textbook \u2014 PostgreSQL \uad50\uc7ac \ub3d9\uc77c \ud314\ub808\ud2b8 *\/\n:root {\n  --color-primary: #336791;\n  --color-accent: #60a5fa;\n  --color-bg: #fafafa;\n  --color-bg-card: #ffffff;\n  --color-text: #1e293b;\n  --color-text-muted: #64748b;\n  --hero-start: #0f172a;\n  --hero-end: #336791;\n  --font-body: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;\n  --size-body: 17px;\n  --line-height: 1.75;\n}\n* { box-sizing: border-box; }\n.container { max-width: 760px; margin: 0 auto; padding: 0 22px 80px; }\n.hero { background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%); color: #fff; padding: 72px 22px 56px; text-align: center; }\n.hero .badge { display: inline-block; background: rgba(96,165,250,0.18); color: var(--color-accent); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 18px; }\n.hero h1 { margin: 0 0 18px; font-size: 36px; line-height: 1.3; letter-spacing: -0.3px; }\n.hero p.sub { margin: 0 auto; max-width: 580px; font-size: 17px; color: #bfdbfe; }\n.hero img { width: 100%; max-width: 720px; height: auto; margin: 36px auto 0; display: block; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }\n.meta { display: flex; gap: 14px; justify-content: center; margin-top: 20px; font-size: 13px; color: #93c5fd; flex-wrap: wrap; }\n.meta span::before { content: \"\u00b7\"; margin-right: 14px; color: #1e3a8a; }\n.meta span:first-child::before { content: \"\"; margin: 0; }\narticle { background: var(--color-bg-card); margin-top: -36px; padding: 44px 28px; border-radius: 14px; box-shadow: 0 2px 18px rgba(0,0,0,0.06); }\narticle p { margin: 0 0 18px; }\nh2 { font-size: 28px; line-height: 1.35; letter-spacing: -0.3px; margin: 48px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--color-primary); }\nh2:first-of-type { margin-top: 8px; }\nh3 { font-size: 21px; line-height: 1.4; margin: 30px 0 12px; color: var(--color-primary); }\ncode { background: #f1f5f9; color: #0f172a; padding: 2px 6px; border-radius: 4px; font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.92em; }\npre { background: #0f172a; color: #e2e8f0; padding: 18px 20px; border-radius: 10px; overflow-x: auto; font-size: 14.5px; line-height: 1.65; margin: 18px 0; }\npre code { background: transparent; color: inherit; padding: 0; }\nul, ol { margin: 0 0 18px; padding-left: 24px; }\nli { margin-bottom: 8px; }\nstrong { color: #0f172a; }\n.databox { background: #eff6ff; border-left: 4px solid var(--color-primary); padding: 18px 20px; border-radius: 6px; margin: 22px 0; }\n.databox p { margin: 0 0 8px; }\n.databox p:last-child { margin: 0; }\n.databox strong { color: var(--color-primary); }\n.warnbox { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 4px solid #d97706; padding: 18px 20px; border-radius: 6px; margin: 22px 0; }\n.warnbox strong { color: #92400e; }\n.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; }\ntable { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--color-bg-card); }\nth, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; vertical-align: top; }\nth { background: #f1f5f9; font-weight: 700; color: #0f172a; }\ntd:first-child, th:first-child { font-weight: 700; }\n.cta { background: linear-gradient(135deg, #336791 0%, #60a5fa 100%); color: #fff; padding: 30px 24px; border-radius: 12px; margin-top: 44px; text-align: center; }\n.cta h3 { color: #fff; margin: 0 0 10px; }\n.cta p { margin: 0; color: #dbeafe; }\n.series-nav { background: #eff6ff; padding: 18px 22px; border-radius: 10px; margin-top: 24px; font-size: 14.5px; color: var(--color-text-muted); }\n.series-nav strong { color: var(--color-primary); }\n@media (max-width: 480px) {\n  .hero { padding: 52px 18px 44px; }\n  .hero h1 { font-size: 26px; }\n  .hero p.sub { font-size: 15px; }\n  article { padding: 28px 18px; border-radius: 10px; }\n  h2 { font-size: 22px; }\n  h3 { font-size: 18px; }\npre { font-size: 13px; padding: 14px 16px; }\n}\n@media (max-width: 560px) {\n  .tablewrap table, .tablewrap thead, .tablewrap tbody, .tablewrap tr, .tablewrap th, .tablewrap td { display: block; width: auto; }\n  .tablewrap thead { display: none; }\n  .tablewrap tr { margin: 0 0 14px; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }\n  .tablewrap td { border: none; border-bottom: 1px solid #f1f5f9; padding: 9px 14px; }\n  .tablewrap td:first-child { background: #eff6ff; font-weight: 800; font-size: 15.5px; }\n  .tablewrap td:last-child { border-bottom: none; }\n  .tablewrap td[data-label]::before { content: attr(data-label) \" \u2014 \"; font-weight: 700; color: var(--color-primary); }\n}\n<\/style>\n<header class=\"hero\">\n  <span class=\"badge\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac \u00b7 14\ud3b8 \/ 26\ud3b8<\/span>\n  <h1>DOM \uc870\uc791 \u2014 querySelector\u00b7\uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108<\/h1>\n  <p class=\"sub\">JS \uac00 \uc6f9\ud398\uc774\uc9c0\ub97c \ub9cc\uc9c0\ub294 \uccab \ub2e8\uacc4. \uc911\uae09 \ud30c\ud2b8\uc758 \uc2dc\uc791.<\/p>\n  <div class=\"meta\"><span>\uc911\uae09<\/span><span>\uc77d\ub294 \uc2dc\uac04 7\ubd84<\/span><span>2026-05-17<\/span><\/div>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-185.jpg\" alt=\"JS \uac00 HTML \uc694\uc18c\ub97c selector \ub85c \uc7a1\uace0 \uc774\ubca4\ud2b8\ub85c \ubc18\uc751\ud558\ub294 \ub3c4\uc2dd\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\uc774\uc81c JS \uac00 \uc9c4\uc9dc \ube5b\ub098\ub294 \uc601\uc5ed\uc785\ub2c8\ub2e4 \u2014 <strong>HTML \ud398\uc774\uc9c0\ub97c \ub3d9\uc801\uc73c\ub85c \ubc14\uafb8\uae30<\/strong>. \ubc84\ud2bc \ub204\ub974\uba74 \uc0c9 \ubc14\ub00c\uace0, \uc785\ub825\ud558\uba74 \ubbf8\ub9ac\ubcf4\uae30\uac00 \ubcf4\uc774\uace0, \uc2a4\ud06c\ub864\ud558\uba74 \ucd94\uac00 \ub85c\ub4dc. 14\ud3b8\uc740 \uadf8 \uae30\ubcf8\uc778 <strong>DOM API<\/strong> \uc758 \ud575\uc2ec\uc744 \uc815\ub9ac\ud569\ub2c8\ub2e4 \u2014 \uc911\uae09 \ud30c\ud2b8\uc758 \uc2dc\uc791.<\/p>\n\n<h2>DOM \uc774\ub780 \u2014 Document Object Model<\/h2>\n\n<pre><code>\/\/ HTML \ud55c \uc904: &lt;h1 id=\"title\"&gt;Hello&lt;\/h1&gt;\n\/\/ JS \uc5d0\uc11c\ub294 \uac1d\uccb4\ub85c \ud45c\ud604\ub428\n\nconst title = document.getElementById(\"title\");\ntitle.textContent;        \/\/ \"Hello\"\ntitle.style.color;        \/\/ \"\"\ntitle.classList;          \/\/ DOMTokenList<\/code><\/pre>\n\n<p>\ube0c\ub77c\uc6b0\uc800\uac00 HTML \uc744 \uc77d\uc5b4\uc11c \ub9cc\ub4e0 <strong>\uac1d\uccb4 \ud2b8\ub9ac<\/strong>\uac00 DOM. JS \ub294 \uc774 \ud2b8\ub9ac\ub97c \uc77d\uace0\u00b7\uc218\uc815\ud574\uc11c \ud654\uba74\uc744 \ubc14\uafc9\ub2c8\ub2e4.<\/p>\n\n<h2>\uc694\uc18c \uc120\ud0dd \u2014 querySelector \uac00 \uc815\ub2f5<\/h2>\n\n<pre><code>\/\/ \uc61b \ubc29\uc2dd\ndocument.getElementById(\"title\");          \/\/ id \ub85c\ndocument.getElementsByClassName(\"btn\");    \/\/ class \ub85c (HTMLCollection \u2014 live)\ndocument.getElementsByTagName(\"p\");        \/\/ \ud0dc\uadf8\ub85c\n\n\/\/ \ud604\ub300 \ud45c\uc900 \u2014 CSS selector \uadf8\ub300\ub85c\ndocument.querySelector(\"#title\");          \/\/ \uccab \ub9e4\uce58 1\uac1c\ndocument.querySelector(\".btn.primary\");    \/\/ \ubcf5\ud569 selector\ndocument.querySelector(\"ul &gt; li:first-child\");\ndocument.querySelectorAll(\".item\");        \/\/ \ubaa8\ub450 \u2014 NodeList (\uc815\uc801)\n\n\/\/ NodeList \ub294 forEach \uac00\ub2a5 (HTMLCollection \uc740 \uc548 \ub428)\ndocument.querySelectorAll(\".item\").forEach(el =&gt; {\n  el.style.color = \"red\";\n});<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>\ud55c \uc904 \uad8c\uc7a5.<\/strong> \uac70\uc758 \ubaa8\ub4e0 \uacbd\uc6b0 <code>querySelector<\/code>\/<code>querySelectorAll<\/code>. CSS \uc120\ud0dd\uc790 \uadf8\ub300\ub85c \uc4f8 \uc218 \uc788\uc5b4 \uc77c\uad00\uc131\u00b7\uc720\uc5f0\uc131\uc774 \ubaa8\ub450 \uc88b\uc2b5\ub2c8\ub2e4. \uc61b API \ub294 \uc548 \uc4f0\ub294 \uac8c \uc815\ub2f5.<\/p>\n<\/div>\n\n<h2>\ub0b4\uc6a9 \ubc14\uafb8\uae30 \u2014 textContent vs innerHTML<\/h2>\n\n<pre><code>const el = document.querySelector(\"#msg\");\n\n\/\/ \ud14d\uc2a4\ud2b8 (\uc548\uc804)\nel.textContent = \"\uc548\ub155\";\nel.textContent;            \/\/ \uc790\uc2dd \ud14d\uc2a4\ud2b8 \ub2e4 \ud569\uccd0 \ubc18\ud658\n\n\/\/ HTML (XSS \uc704\ud5d8)\nel.innerHTML = \"&lt;b&gt;\uc548\ub155&lt;\/b&gt;\";   \/\/ \ud0dc\uadf8\uac00 \uc2e4\uc81c\ub85c \ud30c\uc2f1\ub428\n\n\/\/ \uc0ac\uc6a9\uc790 \uc785\ub825\uc740 \uc808\ub300 innerHTML \uc9c1\uc811 X\nel.innerHTML = userInput;   \/\/ \u274c XSS!\nel.textContent = userInput; \/\/ \u2705 \ud14d\uc2a4\ud2b8\ub85c\ub9cc<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>XSS 1\ubc88\uc9c0.<\/strong> \uc678\ubd80 \ub370\uc774\ud130(\uc0ac\uc6a9\uc790 \uc785\ub825\u00b7URL \ud30c\ub77c\ubbf8\ud130\u00b7API \uc751\ub2f5) \ub97c <code>innerHTML<\/code> \uc5d0 \uadf8\ub300\ub85c \ub123\uc73c\uba74 <code>&lt;script&gt;<\/code> \ud0dc\uadf8\uac00 \uc2e4\ud589\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubaa8\ub974\uba74 \ud56d\uc0c1 <strong>textContent<\/strong>, HTML \uc774 \uaf2d \ud544\uc694\ud558\uba74 sanitize \ub77c\uc774\ube0c\ub7ec\ub9ac(DOMPurify) \uc0ac\uc6a9.<\/p>\n<\/div>\n\n<h2>\uc18d\uc131 \u2014 getAttribute \/ dataset \/ classList<\/h2>\n\n<pre><code>\/\/ HTML \uc18d\uc131\nimg.src;                          \/\/ .src \ud504\ub85c\ud37c\ud2f0 \uc9c1\uc811\nimg.getAttribute(\"src\");          \/\/ \uac19\uc740 \uacb0\uacfc\nimg.setAttribute(\"alt\", \"\ud14d\uc2a4\ud2b8\");\n\n\/\/ data-* \uc18d\uc131 (\ucee4\uc2a4\ud140 \ub370\uc774\ud130)\n\/\/ &lt;div data-user-id=\"42\" data-role=\"admin\"&gt;\nel.dataset.userId;                \/\/ \"42\" (camelCase \ubcc0\ud658)\nel.dataset.role;                  \/\/ \"admin\"\nel.dataset.newKey = \"x\";          \/\/ \ucd94\uac00\ub3c4 OK\n\n\/\/ classList \u2014 \ud074\ub798\uc2a4 \uc870\uc791 \ud45c\uc900\nel.classList.add(\"active\");\nel.classList.remove(\"disabled\");\nel.classList.toggle(\"open\");      \/\/ \uc788\uc73c\uba74 \ube7c\uace0 \uc5c6\uc73c\uba74 \ub354\ud558\uae30\nel.classList.contains(\"active\");  \/\/ true\/false\nel.classList.replace(\"a\", \"b\");<\/code><\/pre>\n\n<h2>\uc774\ubca4\ud2b8 \u2014 addEventListener<\/h2>\n\n<pre><code>const btn = document.querySelector(\"#save\");\n\nbtn.addEventListener(\"click\", (event) =&gt; {\n  console.log(\"\ud074\ub9ad\ub428\", event.target);\n  event.preventDefault();   \/\/ \uae30\ubcf8 \ub3d9\uc791 \ucc28\ub2e8 (form submit \ub4f1)\n});\n\n\/\/ \ud55c \ubc88\ub9cc\nbtn.addEventListener(\"click\", handler, { once: true });\n\n\/\/ \ucea1\ucc98\ub9c1\nbtn.addEventListener(\"click\", handler, { capture: true });\n\n\/\/ passive \u2014 \uc2a4\ud06c\ub864\u00b7\ud130\uce58 \uc131\ub2a5\nwindow.addEventListener(\"scroll\", handler, { passive: true });\n\n\/\/ \uc81c\uac70 (\uac19\uc740 \ud568\uc218 \ucc38\uc870)\nbtn.removeEventListener(\"click\", handler);\n\/\/ \ud654\uc0b4\ud45c \ud568\uc218\ub97c \uc778\ub77c\uc778\uc73c\ub85c \ub123\uc5c8\uc73c\uba74 \ubabb \uc81c\uac70 \u2014 \ud56d\uc0c1 \uc774\ub984 \uc788\ub294 \ud568\uc218\ub85c<\/code><\/pre>\n\n<h2>\uc790\uc8fc \uc4f0\ub294 \uc774\ubca4\ud2b8<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th>\uc774\ubca4\ud2b8<\/th><th>\ubc1c\uc0dd \uc2dc\uc810<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\uc774\ubca4\ud2b8\">click<\/td><td data-label=\"\uc2dc\uc810\">\ub9c8\uc6b0\uc2a4\/\ud130\uce58 \ud074\ub9ad<\/td><\/tr>\n    <tr><td data-label=\"\uc774\ubca4\ud2b8\">input<\/td><td data-label=\"\uc2dc\uc810\">\uc785\ub825\uac12 \ubcc0\uacbd (every keystroke)<\/td><\/tr>\n    <tr><td data-label=\"\uc774\ubca4\ud2b8\">change<\/td><td data-label=\"\uc2dc\uc810\">\uac12 \ubcc0\uacbd + \ud3ec\ucee4\uc2a4 \uc783\uc744 \ub54c<\/td><\/tr>\n    <tr><td data-label=\"\uc774\ubca4\ud2b8\">submit<\/td><td data-label=\"\uc2dc\uc810\">form \uc81c\ucd9c<\/td><\/tr>\n    <tr><td data-label=\"\uc774\ubca4\ud2b8\">keydown \/ keyup<\/td><td data-label=\"\uc2dc\uc810\">\ud0a4 \ub204\ub984\/\ub5cc<\/td><\/tr>\n    <tr><td data-label=\"\uc774\ubca4\ud2b8\">mouseenter \/ mouseleave<\/td><td data-label=\"\uc2dc\uc810\">\ud638\ubc84 \uc9c4\uc785\/\uc774\ud0c8 (\ubc84\ube14 X)<\/td><\/tr>\n    <tr><td data-label=\"\uc774\ubca4\ud2b8\">scroll<\/td><td data-label=\"\uc2dc\uc810\">\uc2a4\ud06c\ub864 (passive \uad8c\uc7a5)<\/td><\/tr>\n    <tr><td data-label=\"\uc774\ubca4\ud2b8\">DOMContentLoaded<\/td><td data-label=\"\uc2dc\uc810\">HTML \ud30c\uc2f1 \ub05d (\uc774\ubbf8\uc9c0 \uae30\ub2e4\ub9ac\uc9c0 \uc54a\uc74c)<\/td><\/tr>\n    <tr><td data-label=\"\uc774\ubca4\ud2b8\">load<\/td><td data-label=\"\uc2dc\uc810\">\uc774\ubbf8\uc9c0\u00b7CSS \uae4c\uc9c0 \ub2e4 \ub85c\ub4dc<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<h2>\uc774\ubca4\ud2b8 \uc704\uc784 \u2014 \ub3d9\uc801 \uc694\uc18c\uc5d0 \ud55c \ubc88\uc5d0<\/h2>\n\n<pre><code>\/\/ \u274c \uc548 \ub428 \u2014 100 \uac1c\uc5d0 \uac01\uac01 \ub9ac\uc2a4\ub108\ndocument.querySelectorAll(\".todo\").forEach(el =&gt; {\n  el.addEventListener(\"click\", handler);\n});\n\/\/ \uc0c8\ub85c \ucd94\uac00\ub41c .todo \uc5d0\ub294 \uc548 \uac78\ub9bc\n\n\/\/ \u2705 \ubd80\ubaa8 \ud55c \uacf3\uc5d0 \uc704\uc784\nconst list = document.querySelector(\"#todos\");\nlist.addEventListener(\"click\", (event) =&gt; {\n  const todo = event.target.closest(\".todo\");\n  if (!todo) return;\n  \/\/ \uc5b4\ub5a4 .todo \ub4e0 \uc5ec\uae30\ub85c \ubaa8\uc784 \u2014 \ucd94\uac00\/\uc0ad\uc81c\uc640 \ubb34\uad00\n  console.log(todo.dataset.id);\n});<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>\uc774\ubca4\ud2b8 \uc704\uc784\uc758 \uac00\uce58.<\/strong> \u2460 \ub9ac\uc2a4\ub108 1\uac1c\ub85c N \uac1c \ucc98\ub9ac(\uba54\ubaa8\ub9ac \uc808\uc57d) \u2461 \ub3d9\uc801\uc73c\ub85c \ucd94\uac00\ub41c \uc694\uc18c\ub3c4 \uc790\ub3d9\uc73c\ub85c \uc7a1\ud798 \u2462 <code>closest()<\/code> \uac00 \ubd80\ubaa8 \uac70\uc2ac\ub7ec \uc62c\ub77c\uac00\uba70 selector \ub9e4\uce58. React \uc758 SyntheticEvent \ub3c4 \uc774 \uc6d0\ub9ac\ub85c \ub3d9\uc791.<\/p>\n<\/div>\n\n<h2>\uc694\uc18c \ub9cc\ub4e4\uae30 \/ \ucd94\uac00 \/ \uc81c\uac70<\/h2>\n\n<pre><code>\/\/ \ub9cc\ub4e4\uae30\nconst li = document.createElement(\"li\");\nli.textContent = \"\uc0c8 \ud560\uc77c\";\nli.classList.add(\"todo\");\nli.dataset.id = \"42\";\n\n\/\/ \ucd94\uac00 (\ub4a4\uc5d0)\nlist.appendChild(li);\n\n\/\/ \uc704\uce58 \uc9c0\uc815 (\ud604\ub300)\nlist.append(li);                  \/\/ \uc5ec\ub7ec \uac1c \uac00\ub2a5\nlist.prepend(li);                 \/\/ \uc55e\uc5d0\nexistingEl.before(li);            \/\/ \ud615\uc81c \uc55e\nexistingEl.after(li);             \/\/ \ud615\uc81c \ub4a4\n\n\/\/ \uc81c\uac70\nli.remove();                      \/\/ \uc790\uae30 \uc790\uc2e0 \uc81c\uac70 (\ud604\ub300)\n\n\/\/ \ud55c \ubc88\uc5d0 HTML \u2014 insertAdjacentHTML (innerHTML \ubcf4\ub2e4 \uc548\uc804)\nlist.insertAdjacentHTML(\"beforeend\", \"&lt;li&gt;...&lt;\/li&gt;\");<\/code><\/pre>\n\n<h2>\uc2e4\uc804 \u2014 \ud1a0\uae00 \ud55c \ud654\uba74<\/h2>\n\n<pre><code>const btn = document.querySelector(\"#toggle\");\nconst menu = document.querySelector(\"#menu\");\n\nbtn.addEventListener(\"click\", () =&gt; {\n  const isOpen = menu.classList.toggle(\"open\");\n  btn.setAttribute(\"aria-expanded\", isOpen);\n});\n\n\/\/ \ubc14\uae65 \ud074\ub9ad\ud558\uba74 \ub2eb\uae30\ndocument.addEventListener(\"click\", (event) =&gt; {\n  if (!btn.contains(event.target) &amp;&amp; !menu.contains(event.target)) {\n    menu.classList.remove(\"open\");\n    btn.setAttribute(\"aria-expanded\", \"false\");\n  }\n});<\/code><\/pre>\n\n<div class=\"cta\">\n  <h3>15\ud3b8 \u2014 \ube44\ub3d9\uae30 \uc785\ubb38 (setTimeout\u00b7\uc774\ubca4\ud2b8 \ub8e8\ud504)<\/h3>\n  <p>JS \uac00 \ud55c \uc904\uc529 \ub3c4\ub294\ub370 \uc5b4\ub5bb\uac8c \ub3d9\uc2dc\uc5d0 \ubcf4\uc774\ub098 \u2014 \uc774\ubca4\ud2b8 \ub8e8\ud504\uc640 \ucf5c\ubc31.<\/p>\n<\/div>\n\n<div class=\"series-nav\">\n  <strong>\ud83d\udcda \uc27d\uac8c \ubc30\uc6b0\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac<\/strong><br>\n  \uc774\uc804: 13\ud3b8 \uc5d0\ub7ec \ucc98\ub9ac \u00b7 \ud604\uc7ac: <strong>14\ud3b8 (\uc911\uae09 \uc2dc\uc791)<\/strong> \u00b7 \ub2e4\uc74c \u2192 15\ud3b8 \ube44\ub3d9\uae30 \u00b7 \uc9c4\ud589: <strong>14\/26<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>DOM \uc870\uc791\u00b7\uc774\ubca4\ud2b8\u00b7\uc704\uc784\u00b7createElement. 26\ud3b8 \uad50\uc7ac 14\ud3b8 (\uc911\uae09 \uc2dc\uc791).<\/p>\n","protected":false},"author":1,"featured_media":540,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-346","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-basic"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=346"}],"version-history":[{"count":3,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/346\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/346\/revisions\/566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/540"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}