๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- HTML,css,Javascript

[Javascript] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ HTML DOM์„ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•

by Wonit 2021. 2. 20.

์˜ค๋Š˜์€ JS ์—์„œ HTML DOM ๊ฐ์ฒด๋ฅผ ๊ฐ€์ ธ์™€ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณผ ๊ฒƒ์ด๋‹ค.


์˜ค๋Š˜ ๋ฐฐ์šธ ๋‚ด์šฉ๋“ค์ด ๋ชจ๋“  ์ƒํ™ฉ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๊ณ  ๋Œ€์ถฉ JS ์—์„œ๋„ ์ด๋ ‡๊ฒŒ ํ•  ์ˆ˜ ์žˆ๊ตฌ๋‚˜ ํ•˜๋Š” ์ƒ๊ฐ์ด ๋ชฉ์ ์ด๋‹ค.


๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋งŽ์ด ์žˆ์œผ๋‹ˆ ์ด๋ฒˆ ๊ธ€์„ ๋ณด๊ณ  ๋ฐฉํ–ฅ์„ ์žก์•„๊ฐ€๊ธธ ๋ฐ”๋ž€๋‹ค.

ํ•™์Šต ์ˆœ์„œ

  • ์—˜๋ฆฌ๋จผํŠธ ๊ฐ€์ ธ์˜ค๊ธฐ
    • getElementById()
    • getElementByName()
    • getElementByClassName()
    • getElementByTagName()
  • ์—˜๋ฆฌ๋จผํŠธ์— ์›ํ•˜๋Š” ํ…์ŠคํŠธ ์ถ”๊ฐ€ํ•˜๊ธฐ
    • innerHTML
    • innerText
  • ์—˜๋ฆฌ๋จผํŠธ ์ƒ์„ฑ, ์‚ญ์ œ, ์ˆ˜์ •ํ•˜๊ธฐ
    • createElement()
    • appendChild()
    • removeChild()

์—˜๋ฆฌ๋จผํŠธ ๊ฐ€์ ธ์˜ค๊ธฐ

 

HTML ์š”์†Œ (Elements)๋ฅผ ์ œ์–ดํ•˜๋ ค๋ฉด ์šฐ์„  HTML ํŒŒ์ผ์— ์žˆ๋Š” HTML ํƒœ๊ทธ ์š”์†Œ๋“ค์„ JS ํŒŒ์ผ๋กœ ๋ถˆ๋Ÿฌ์™€์•ผ ํ•œ๋‹ค.

 

๊ทธ ๋ฐฉ๋ฒ•์€ ํฌ๊ฒŒ 4๊ฐ€์ง€๊ฐ€ ์กด์žฌํ•œ๋‹ค.

  1. id ์†์„ฑ์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ
  2. HTML Tag ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ
  3. name ์†์„ฑ์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ
  4. class ์†์„ฑ๊ฐ’์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ

id ์†์„ฑ์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ & name ์†์„ฑ์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <div id="first">์ฒซ ๋ฒˆ์งธ</div>
    <div name="second">๋‘ ๋ฒˆ์งธ</div>
  </body>
</html>

์œ„์™€ ๊ฐ™์ด div ํƒœ๊ทธ๊ฐ€ id๋กœ ์ง€์ •๋˜์–ด ์žˆ๋‹ค๋ฉด ์šฐ๋ฆฌ๋Š” getElementById() ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด์„œ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.


ํ˜น์€ div ํƒœ๊ทธ๊ฐ€ name์œผ๋กœ ์ง€์ •๋˜์–ด ์žˆ๋‹ค๋ฉด getElementByName() ์„ ์‚ฌ์šฉํ•œ๋‹ค.

const element1 = document.getElementById("first");

const element2 = document.getElementByName("second");

HTML Tag ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ & Class ๋ช…์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <div>hello</div>
    <div>world</div>

    <span class="card">์•ˆ๋…•ํ•˜์„ธ์šฉ</span>
    <span class="card">๋ธ”๋กœ๊ทธ ์ฃผ์ธ์ด์—์šฉ</span>
  </body>
</html>

์œ„์™€ ๊ฐ™์ด div ํƒœ๊ทธ๋กœ ๊ตฌ์„ฑ๋œ ๋ชจ๋“  ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์‹ถ๋‹ค๋ฉด getElementByTagName() ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด์„œ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.


๋˜ํ•œ card๋ผ๋Š” classname์„ ๊ฐ€์ง„ ๋ชจ๋“  ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์‹ถ๋‹ค๋ฉด getElementByClassName() ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด์„œ ๊ฐ€์ ธ์˜จ๋‹ค.


ํŠน์ดํ•œ ์ ์€ getElementByTagName()๊ณผ getElementByClassName() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด HTML Element ๊ฐ์ฒด ๋ฐฐ์—ด์„ ๊ฐ€์ ธ์˜ค๋ฏ€๋กœ ๋ฐฐ์—ด ์ ‘๊ทผ์„ ํ•ด์•ผ ํ•œ๋‹ค.

const elements1 = document.getElementByTagName("div");
const elements2 = document.getElementByClassName("card");

console.log(elements1[0]);
console.log(elements2[1]);

console.log(elements2[0]);

์—˜๋ฆฌ๋จผํŠธ์— ์›ํ•˜๋Š” ํ…์ŠคํŠธ๋ฅผ ์“ฐ๊ณ  ์ฝ๊ธฐ

HTML Element์— ์›ํ•˜๋Š” ํ…์ŠคํŠธ๋ฅผ JS ์—์„œ ์ƒ์„ฑํ•˜๊ณ  ์ฃผ์ž…ํ•ด์ค„ ์ˆ˜ ์žˆ์œผ๋ฉฐ ๋˜ํ•œ HTML Element ์— ์žˆ๋Š” ๋‚ด์šฉ์„ JS๋กœ ์ฝ์–ด์˜ฌ ์ˆ˜๋„ ์žˆ๋‹ค.

 

  • HTML Element Text ์ฝ๊ธฐ : textContent
  • HTML Element Text ์ถ”๊ฐ€ํ•˜๊ธฐ : innerHTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <div>hello</div>
    <div>world</div>

    <span id="first">์•ˆ๋…•ํ•˜์„ธ์šฉ</span>
    <span id="second">๋ธ”๋กœ๊ทธ ์ฃผ์ธ์ด์—์šฉ</span>
  </body>
</html>

 

์œ„์™€ ๊ฐ™์ด ์กด์žฌํ•œ๋‹ค๋ฉด ์šฐ๋ฆฌ๋Š” ์ „์— ๋ฐฐ์šด document.getElementBy..๋ฅผ ํ†ตํ•ด์„œ Element๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

 

๊ทธ๋ฆฌ๊ณ  Element.textContent์™€ Element.getElementById ์†์„ฑ์„ ํ†ตํ•ด์„œ ํ…์ŠคํŠธ ๊ฐ’์„ ์กฐ์ž‘ํ•˜๋ฉด๋œ๋‹ค.

 

const first = document.getElementById("first");
const second = document.getElementById("second");

console.log(first.textContent); // ์•ˆ๋…•ํ•˜์„ธ์šฉ

second.innerHTML = second.textContent + " ๋งŒ๋‚˜์„œ ๋ฐ˜๊ฐ€์›Œ์š”";

console.log(first.textContent); // ์•ˆ๋…•ํ•˜์„ธ์šฉ
console.log(second.textContent); // ๋ธ”๋กœ๊ทธ ์ฃผ์ธ์ด์—์šฉ ๋งŒ๋‚˜์„œ ๋ฐ˜๊ฐ€์›Œ์š”

 

๊ทธ๋Ÿผ ๋งŒ์•ฝ <input type="text" /> ์— ์ž…๋ ฅ๋œ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ?


์ด๋Š” Element.value๋กœ ๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

์—˜๋ฆฌ๋จผํŠธ ์ƒ์„ฑ, ์‚ฝ์ž…, ์‚ญ์ œํ•˜๊ธฐ

์šฐ๋ฆฌ๋Š” JS์—์„œ DOM ๋…ธ๋“œ ๊ฐ์ฒด ์ฆ‰ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  DOM ํŠธ๋ฆฌ์— ์‚ฝ์ž…ํ•˜๊ฑฐ๋‚˜ ์‚ญ์ œํ•˜๊ฑฐ๋‚˜ ์น˜ํ™˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ๋…ธ๋“œ ์ƒ์„ฑํ•˜๊ธฐ
  • ๋…ธ๋“œ ์‚ฝ์ž…ํ•˜๊ธฐ
  • ๋…ธ๋“œ ์‚ญ์ œํ•˜๊ธฐ

๋…ธ๋“œ ์ƒ์„ฑํ•˜๊ธฐ

์ƒˆ๋กœ์šด Element ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋ ค๋ฉด createElement ๋ฉ”์„œ๋“œ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.

const newNode = document.createElement("h1");
const newNode = document.createElement("li");
const newNode = document.createElement("href");

๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ์‚ฌ์šฉ๋ฒ•์€ ์•„๋ž˜ ๋…ธ๋“œ ์‚ฝ์ž…ํ•˜๊ธฐ์™€ ํ•จ๊ป˜ ํ•ด๋ณด๊ฒ ๋‹ค.

๋…ธ๋“œ ์‚ฝ์ž…ํ•˜๊ธฐ

๋…ธ๋“œ๋ฅผ ์‚ฝ์ž…ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‘ ๊ฐ€์ง€ ๋ฉ”์„œ๋“œ๊ฐ€ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค.

 

ํ•˜์ง€๋งŒ ์ด๋ฒˆ ์‹œ๊ฐ„์˜ ๋ชฉ์ ์€ HTML DOM์„ JS์—์„œ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์— ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ์ž์„ธํ•˜๊ฒŒ ๋“ค์–ด๊ฐ€์ง€ ์•Š๊ณ  ์š”์†Œ์˜ ๋งˆ์ง€๋ง‰์— ์‚ฝ์ž…ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ๋งŒ ์•Œ์•„๋ณผ ๊ฒƒ์ด๋‹ค.

 

์š”์†Œ์˜ ๋งˆ์ง€๋ง‰์— ์‚ฝ์ž… : Node.appendChild()

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <div>hello</div>
    <div>world</div>

    <span id="first">์•ˆ๋…•ํ•˜์„ธ์šฉ</span>
    <span id="second">๋ธ”๋กœ๊ทธ ์ฃผ์ธ์ด์—์šฉ</span>
  </body>
</html>
const first = document.getElementById("first");

const newNode = document.createElement("span");
newNode.innerHTML = "๋งŒ๋‚˜์„œ ๋ฐ˜๊ฐ‘์Šต๋‹ˆ๋‹ค";
first.appendChild(newNode);

 

๋…ธ๋“œ ์‚ญ์ œํ•˜๊ธฐ

๋…ธ๋“œ๋ฅผ ์‚ญ์ œํ•  ๋•Œ๋Š” removeChild()๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

 

์ด๋ฆ„์—์„œ๋„ ์•Œ ์ˆ˜ ์žˆ๋“ฏ, ์ž์‹ ํƒœ๊ทธ๋ฅผ ์‚ญ์ œํ•˜๋Š”๋ฐ ์—ญ์‹œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ถ€๋ชจํƒœ๊ทธ์—์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

node.parentNode.removeChild(node);

๋Œ“๊ธ€