230317 - DOM

๋ฐฑ์Šน์—ฐยท2023๋…„ 3์›” 17์ผ
1

๐Ÿšฉ DOM - text ์ ‘๊ทผ

text์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•

๐Ÿ“ ์„ค๋ช…

  • HTMLElement.textContent : ์ˆจ๊น€์ฒ˜๋ฆฌํ•œ ํ…์ŠคํŠธ๊นŒ์ง€ ๊ฐ€์ ธ์˜ด
  • Element.innerHTML : ํ™”๋ฉด์— ๋ณด์ด๋Š” ํ…์ŠคํŠธ๋งŒ ๊ฐ€์ ธ์˜ด
  • Node.textContent : html ํƒœ๊ทธ๊นŒ์ง€ ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ์˜ด (์ˆจ๊น€์ฒ˜๋ฆฌ ์—ฌ๋ถ€ ์ƒ๊ด€โŒ)


โœ’๏ธ ์ฝ”๋“œ ์ž‘์„ฑ

์˜ˆ์ œ

css

* { margin: 0; padding: 0; }
body { background: #BDCDD6; }
body > div {
  width: 400px;
  margin: 150px auto;
  padding: 2px;
  text-align: center;
  border: 1px solid #DF7857;
}
h1 { margin: 10px 0; }
h1 img { width: 150px; }
h2 { color:#737db6; margin-bottom: 30px; }
li {
  list-style: none;
  background: #6096B4;
  color: #fff;
  line-height: 50px;
  margin: 2px;
  padding-left: 20px;
}
.red { background: #E7AB9A; }
.orange { background: #f3be70; }
.sky { background: #93BFCF; }
.purple { background: #d49dd4; color: yellow; }
.line { text-decoration: line-through; }
.check {
  background: #fff url("../img/check-mark.png") no-repeat 90% 50% / 25px;
  color: red;
}

em { display: none; }

html

<div id="page">
  <h1><img src="./img/logo.png" alt="" /></h1>
  <h2>text(html)๋ถ€๋ถ„๋งŒ ์ ‘๊ทผ</h2>
  <ul>
    <li id="one"><em>ํ† ์ฝ”</em> ํˆฌ์นธ</li>
    <li id="two"><strong>์ฒญ๋‘ฅ</strong>์˜ค๋ฆฌ</li>
    <li>๋ณ‘์•„๋ฆฌ</li>
    <li id="three" class="orange">๋‹ญ</li>
    <li class="sky">ํ‚ค์œ„์ƒˆ</li>
    <li>์•ต๋ฌด์ƒˆ</li>
  </ul>
</div>

js

const item1 = document.querySelector("#one"); // ํ† ์ฝ”ํˆฌ์นธ
const item2 = document.querySelector("#two"); // ์ฒญ๋‘ฅ์˜ค๋ฆฌ
const item3 = document.querySelector("#three"); // ๋‹ญ
const item4 = document.querySelector(".sky"); // ํ‚ค์œ„์ƒˆ

const text1 = item1.textContent; // id="one"์˜ ํ…์ŠคํŠธ ๋ถ€๋ถ„์„ ๋ณ€์ˆ˜์— ๋Œ€์ž…
const text2 = item1.innerText;
console.log("textContent : ", text1); // ํ† ์ฝ” ํˆฌ์นธ
console.log("innerText : ", text2); // ํˆฌ์นธ

const text3 = item1.innerHTML;
const text4 = item2.innerHTML;
console.log(text3); // <em>ํ† ์ฝ”</em> ํˆฌ์นธ
console.log(text4); // <strong>์ฒญ๋‘ฅ</strong>์˜ค๋ฆฌ

const item3Txt = item3.innerText;
item3.innerHTML = `<a href="https://terms.naver.com/entry.naver?docId=742195&cid=46681&categoryId=46681"> ${item3Txt} </a>`;

const item4Txt = item4.innerText;
item4.innerHTML = `<a href="https://terms.naver.com/entry.naver?docId=1151737&cid=40942&categoryId=32594"> ${item4Txt} </a>`;

์ถœ๋ ฅ

  • ์ด๋ฏธ์ง€๋กœ ๋Œ€์ฒด


๐Ÿ”— ์ฐธ๊ณ  ๋งํฌ & ๋„์›€์ด ๋˜๋Š” ๋งํฌ






๐Ÿšฉ DOM ์š”์†Œ ์ถ”๊ฐ€/์ œ๊ฑฐ

DOM ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์ œ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ•

๐Ÿ“ ์„ค๋ช…

  • createElement(a) : ๋ฌธ์„œ ๊ฐ์ฒด(html tag) a๋ฅผ ์ƒ์„ฑ

  • createTextNode(a) : ์ƒ์„ฑ๋œ ํƒœ๊ทธ ๋‚ด๋ถ€์— ๋“ค์–ด๊ฐˆ ํ…์ŠคํŠธ a ์ƒ์„ฑ

  • Node.appendChild(a) : Node(๋ถ€๋ชจโญ•) ์— a Node๋ฅผ ์‚ฝ์ž…ํ•˜์—ฌ ์ž์‹ ์š”์†Œ๋ฅผ ๋งŒ๋“ฆ (์‚ฝ์ž…ํ•  ํƒœ๊ทธ์˜ ์ œ์ผ ๋ ๋ถ€๋ถ„)

  • Node.append(a) : ์œ„๋ž‘ ๋™์ผ

  • Node.prepend(a) : Node(๋ถ€๋ชจโญ•) ์— a Node๋ฅผ ์‚ฝ์ž…ํ•˜์—ฌ ์ž์‹ ์š”์†Œ๋ฅผ ๋งŒ๋“ฆ (์‚ฝ์ž…ํ•  ํƒœ๊ทธ์˜ ๋งจ ์•ž ๋ถ€๋ถ„)

  • Node.insertBefore(a, b) : ๋ถ€๋ชจ Node์˜ ์ž์‹ ์š”์†Œ b์•ž์— a๋ฅผ ์‚ฝ์ž…

  • Node.after(a) : Node(๋ถ€๋ชจโŒ) ๋’ค์— a Node๋ฅผ ์‚ฝ์ž… (Node๋Š” ๊ฐ™์€ ํ˜•์ œ)

  • Node.before(a) : Node(๋ถ€๋ชจโŒ) ์•ž์— a Node๋ฅผ ์‚ฝ์ž… (Node๋Š” ๊ฐ™์€ ํ˜•์ œ)

  • Node.removeChild(a) : Node ์‚ญ์ œ



โœ’๏ธ ์ฝ”๋“œ ์ž‘์„ฑ

์˜ˆ์ œ

css

* { margin: 0; padding: 0; }
body { background: #BDCDD6; }
body > div {
  width: 400px;
  margin: 150px auto;
  padding: 2px;
  text-align: center;
  border: 1px solid #DF7857;
}
h1 { margin: 10px 0; }
h1 img { width: 150px; }
h2 { color:#737db6; margin-bottom: 30px; }
li {
  list-style: none;
  background: #6096B4;
  color: #fff;
  line-height: 50px;
  margin: 2px;
  padding-left: 20px;
}
.red { background: #E7AB9A; }
.orange { background: #f3be70; }
.sky { background: #93BFCF; }
.line { text-decoration: line-through; }

html

<div id="page">
  <h1><img src="./img/kiwi_icon.png" alt="" /></h1>
  <h2>DOM ์š”์†Œ ์ œ๊ฑฐ ์ถ”๊ฐ€</h2>
  <ul>
    <li>1. ํˆฌ์นธ</li>
    <li>2. ์˜ค๋ฆฌ</li>
    <li>3. ๋ณ‘์•„๋ฆฌ</li>
    <li>4. ๋‹ญ</li>
    <li>5. ํ‚ค์œ„์ƒˆ</li>
    <li>6. ์•ต๋ฌด์ƒˆ</li>
  </ul>
  <!-- <ul>
        <li>๋‘ ๋ฒˆ์จฐ ul์ž…๋‹ˆ๋‹ค</li>
      </ul> -->
</div>

js

const parentElement = document.getElementsByTagName("ul")[0];
const removeElement = document.getElementsByTagName("li")[2];
parentElement.removeChild(removeElement); // ์ œ๊ฑฐ

const newElement = document.createElement("li"); // ๋ฌธ์„œ๊ฐ์ฒด(html tag) ์ƒ์„ฑ
const newText = document.createTextNode("์ƒˆ ์ข…๋ฅ˜(js๋กœ ์ถ”๊ฐ€)");
newElement.appendChild(newText); 
parentElement.append(newElement); // li ๋งจ ๋งˆ์ง€๋ง‰์— ์ถ”๊ฐ€๋จ
parentElement.append("<li>์ฌ์ฝ”๋‰ด์–ด</li>"); // ๋‹จ์ˆœํ•˜๊ฒŒ ํ…์ŠคํŠธ๋กœ ์ธ์‹


const h2 = document.querySelector("h2");
const elH3 = document.createElement("h3");
elH3.textContent = "small title";
// h2.after(elH3);
// h2.before(elH3);
page.insertBefore(elH3, h2);

console.log(elH3);

์ถœ๋ ฅ

  • ์ด๋ฏธ์ง€๋กœ ๋Œ€์ฒด


๐Ÿ”— ์ฐธ๊ณ  ๋งํฌ & ๋„์›€์ด ๋˜๋Š” ๋งํฌ






๐Ÿšฉ Attribute ๊ฒ€์‚ฌ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์†์„ฑ ๊ฒ€์‚ฌํ•˜๋Š” ๋ฐฉ๋ฒ•

๐Ÿ“ ์„ค๋ช…

  • ๋ฐ‘์— ๋‚˜์˜ฌ attribute ์ƒ์„ฑ/๋ณ€๊ฒฝ์—์„œ ํ•œ๊บผ๋ฒˆ์— ์ •๋ฆฌ


โœ’๏ธ ์ฝ”๋“œ ์ž‘์„ฑ

์˜ˆ์ œ

css

* { margin: 0; padding: 0; }
body { background: #BDCDD6; }
body > div {
  width: 400px;
  margin: 150px auto;
  padding: 2px;
  text-align: center;
  border: 1px solid #DF7857;
}
h1 { margin: 10px 0; }
h1 img { width: 150px; }
h2 { color:#737db6; margin-bottom: 30px; }
li {
  list-style: none;
  background: #6096B4;
  color: #fff;
  line-height: 50px;
  margin: 2px;
  padding-left: 20px;
}
.red { background: #E7AB9A; }
.orange { background: #f3be70; }
.sky { background: #93BFCF; }
.line { text-decoration: line-through; }

#result { 
  background: #90b460; 
  margin: 20px; 
  padding: 20px; 
  border-radius: 10px; 
}

html

<div id="page">
  <h1><img src="./img/kiwi_icon.png" alt="" /></h1>
  <h2>Attribute ๊ฒ€์‚ฌ</h2>
  <ul>
    <li id="one" class="toucan">ํˆฌ์นธ</li>
    <li>๋‹ญ</li>
    <li>ํ‚ค์œ„์ƒˆ</li>
    <li id="four">์•ต๋ฌด์ƒˆ</li>
  </ul>
  <div id="result"></div>
</div>

js

const item1 = document.getElementById("one");
const pos = document.getElementById("result");

if (item1.hasAttribute("class")) {
  const attValue = item1.getAttribute("class"); 
  console.log("class ์†์„ฑ์˜ ๊ฐ’์€? : ", attValue);

  pos.innerHTML = `์ฒซ ๋ฒˆ์งธ item์˜ class ์ด๋ฆ„์€? <br> <big>${attValue}</big> ์ž…๋‹ˆ๋‹ค.`;
}

์ถœ๋ ฅ

  • ์ด๋ฏธ์ง€๋กœ ๋Œ€์ฒด


๐Ÿ”— ์ฐธ๊ณ  ๋งํฌ & ๋„์›€์ด ๋˜๋Š” ๋งํฌ






๐Ÿšฉ Attribute ์ƒ์„ฑ/๋ณ€๊ฒฝ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์†์„ฑ ์ƒ์„ฑ/๋ณ€๊ฒฝ ๋ฐฉ๋ฒ•

๐Ÿ“ ์„ค๋ช…

  • Element.hasAttribute(a) : ์š”์†Œ์— a ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€ ์•Œ์•„๋ด„(boolen๊ฐ’์œผ๋กœ ๋ฐ˜ํ™˜)
  • Element.setAttribute(name, value) : ์š”์†Œ์— ์†์„ฑ, ์†์„ฑ๊ฐ’์„ ๋Œ€์ž…ํ•˜์—ฌ ๋งŒ๋“ค์–ด์คŒ (์ถ”๊ฐ€)
  • Element.removeAttribute(name) : ์š”์†Œ์— ์žˆ๋Š” ์†์„ฑb๋ฅผ ์ œ๊ฑฐ
  • Element.getAttribute(a) : ์š”์†Œ์— ์žˆ๋Š” a์†์„ฑ์˜ ์†์„ฑ๊ฐ’(value)์„ ๊ฐ€์ ธ์˜ด(๋Œ€์ž…)


โœ’๏ธ ์ฝ”๋“œ ์ž‘์„ฑ

์˜ˆ์ œ

css

* { margin: 0; padding: 0; }
body { background: #BDCDD6; }
body > div {
  width: 400px;
  margin: 150px auto;
  padding: 2px;
  text-align: center;
  border: 1px solid #DF7857;
}
h1 { margin: 10px 0; }
h1 img { width: 150px; }
h2 { color:#737db6; margin-bottom: 30px; }
li {
  list-style: none;
  background: #6096B4;
  color: #fff;
  line-height: 50px;
  margin: 2px;
  padding-left: 20px;
}
.red { background: #E7AB9A; }
.orange { background: #f3be70; }
.sky { background: #93BFCF; }
.line { text-decoration: line-through; }

#result { 
  background: #90b460; 
  margin: 20px; 
  padding: 20px; 
  border-radius: 10px; 
}

html

<div id="page">
  <h1><img src="./img/kiwi_icon.png" alt="" /></h1>
  <h2>Attribute ์ƒ์„ฑ, ๋ณ€๊ฒฝ</h2>
  <ul>
    <li id="one" class="toucan">ํˆฌ์นธ</li>
    <li>๋‹ญ</li>
    <li title="kiwi">ํ‚ค์œ„์ƒˆ</li>
    <li id="four"><a>์•ต๋ฌด์ƒˆ</a></li>
  </ul>
  <div id="result"></div>
</div>

js

const item1 = document.getElementById("one");
const pos = document.getElementById("result");

// ํด๋ž˜์Šค ์ถ”๊ฐ€
item1.classList.add("line"); // ํด๋ž˜์Šค ์ถ”๊ฐ€ // class="toucan" -> "toucan line"
item1.classList.replace("toucan", "toco"); // ํด๋ž˜์Šค์˜ value๋ฅผ ๋ณ€๊ฒฝ (class="toucan line" -> "toco line")

// aํƒœ๊ทธ์— attribute ์ถ”๊ฐ€
const item2 = document.querySelector("#four a");
item2.setAttribute("href", "https://terms.naver.com/entry.naver?docId=1164605&cid=40942&categoryId=32617"); // ์†์„ฑ ์ถ”๊ฐ€ (a ํƒœ๊ทธ์— ๋งํฌ ์ถ”๊ฐ€)
item2.setAttribute("target", "_blank"); //์†์„ฑ ์ถ”๊ฐ€ ๊ฐ€๋Šฅ.  // ์ƒˆ ํƒญ์œผ๋กœ ์—ด๋ฆผ

const item3 = document.querySelectorAll("li").item(1);
item3.setAttribute("class", "red"); // ์ธ์ž 2๊ฐœ ํ•„์š”

const item4 = document.querySelectorAll("li").item(2);
item4.removeAttribute("title"); // ์†์„ฑ ์‚ญ์ œ
console.log(item4);

const item3Name = item3.getAttribute("class");
pos.innerHTML = `๋‘ ๋ฒˆ์งธ li ์•ˆ class์˜ value๋Š” <br> ${item3Name} ์ด๋‹ค.`;
}

์ถœ๋ ฅ

  • ์ด๋ฏธ์ง€๋กœ ๋Œ€์ฒด


๐Ÿ”— ์ฐธ๊ณ  ๋งํฌ & ๋„์›€์ด ๋˜๋Š” ๋งํฌ






profile
๊ณต๋ถ€ํ•˜๋Š” ๋ฒจ๋กœ๊ทธ

0๊ฐœ์˜ ๋Œ“๊ธ€