39μž₯ DOM

39.5 μš”μ†Œ λ…Έλ“œμ˜ ν…μŠ€νŠΈ μ‘°μž‘

39.5.1 nodeValue

  • Node.prototype.nodeValue ν”„λ‘œνΌν‹°λŠ” setter와 getter λͺ¨λ‘ μ‘΄μž¬ν•˜λŠ” μ ‘κ·Όμž ν”„λ‘œνΌν‹°λ‹€.

  • λ…Έλ“œ 객체의 nodeValue ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•˜λ©΄ λ…Έλ“œ 객체의 값을 λ°˜ν™˜ν•œλ‹€. element일 경우 Null, Textλ…Έλ“œμΌ 경우 text 값을 λ°˜ν™˜ν•œλ‹€.

<html>
  <body>
    <div id="foo">Hello</div>
  </body>
  <script>
    // λ¬Έμ„œ λ…Έλ“œμ˜ nodeValue ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•œλ‹€.
    console.log(document.nodeValue); // null

    // μš”μ†Œ λ…Έλ“œμ˜ nodeValue ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•œλ‹€.
    const $foo = document.getElementById("foo");
    console.log($foo.nodeValue); // null

    // ν…μŠ€νŠΈ λ…Έλ“œμ˜ nodeValue ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•œλ‹€.
    const $textNode = $foo.firstChild;
    console.log($textNode.nodeValue); // Hello
  </script>
</html>

39.5.2 textContent

  • Node.prototype.textContent ν”„λ‘œνΌν‹°λŠ” setter와 getter λͺ¨λ‘ μ‘΄μž¬ν•˜λŠ” μ ‘κ·Όμž ν”„λ‘œνΌν‹°λ‘œμ„œ μš”μ†Œ λ…Έλ“œμ˜ ν…μŠ€νŠΈμ™€ λͺ¨λ“  μžμ† λ…Έλ“œμ˜ ν…μŠ€νŠΈλ₯Ό λͺ¨λ‘ μ·¨λ“ν•˜κ±°λ‚˜ λ³€κ²½ν•œλ‹€.

  • μš”μ†Œ λ…Έλ“œμ˜ textContent ν”„λ‘œνΌν‹°λ₯Ό μ°Έμ‘°ν•˜λ©΄ μš”μ†Œ λ…Έλ“œμ˜ μ½˜ν…μΈ  μ˜μ—­ λ‚΄μ˜ ν…μŠ€νŠΈλ₯Ό λͺ¨λ‘ λ°˜ν™˜ν•œλ‹€.

image
<html>
  <body>
    <div id="foo">Hello <span>world!</span></div>
  </body>
  <script>
    // #foo μš”μ†Œ λ…Έλ“œλŠ” ν…μŠ€νŠΈ λ…Έλ“œκ°€ μ•„λ‹ˆλ‹€.
    console.log(document.getElementById("foo").nodeValue); // null
    // #foo μš”μ†Œ λ…Έλ“œμ˜ μžμ‹ λ…Έλ“œμΈ ν…μŠ€νŠΈ λ…Έλ“œμ˜ 값을 μ·¨λ“ν•œλ‹€.
    console.log(document.getElementById("foo").firstChild.nodeValue); // Hello
    // span μš”μ†Œ λ…Έλ“œμ˜ μžμ‹ λ…Έλ“œμΈ ν…μŠ€νŠΈ λ…Έλ“œμ˜ 값을 μ·¨λ“ν•œλ‹€.
    console.log(document.getElementById("foo").lastChild.firstChild.nodeValue); // world!
    // #foo μš”μ†Œ λ…Έλ“œμ˜ ν…μŠ€νŠΈλ₯Ό λͺ¨λ‘ μ·¨λ“ν•œλ‹€, 이떄 HTML λ§ˆν¬μ—…μ€ λ¬΄μ‹œλœλ‹€.
    console.log(document.getElementById("foo").textContent); //Hello world
  </script>
</html>

39.6 DOM μ‘°μž‘

  • DOM μ‘°μž‘μ€ μƒˆλ‘œμš΄ λ…Έλ“œλ₯Ό μƒμ„±ν•˜μ—¬ DOM에 μΆ”κ°€ν•˜κ±°λ‚˜ κΈ°μ‘΄ λ…Έλ“œλ₯Ό μ‚­μ œ λ˜λŠ” κ΅μ²΄ν•˜λŠ” 것을 λ§ν•œλ‹€.

  • DOM μ‘°μž‘μ— μ˜ν•΄ DOM에 μƒˆλ‘œμš΄ λ…Έλ“œκ°€ μΆ”κ°€λ˜κ±°λ‚˜ μ‚­μ œλ˜λ©΄ λ¦¬ν”Œλ‘œμš°μ™€ λ¦¬νŽ˜μΈνŠΈκ°€ λ°œμƒν•˜λŠ” 원인이 λ””λ―€λ‘œ μ„±λŠ₯에 영ν–₯을 μ€€λ‹€.

39.6.1 innerHTML

  • Element.prototype.innerHTML ν”„λ‘œνΌν‹°λŠ” setter와 getter λͺ¨λ‘ μ‘΄μž¬ν•˜λŠ” μ ‘κ·Όμž ν”„λ‘œνΌν‹°λ‘œμ„œ μš”μ†Œ λ…Έλ“œμ˜ HTML λ§ˆν¬μ—…μ„ μ·¨λ“ν•˜κ±°λ‚˜ λ³€κ²½ν•œλ‹€.

  • μ•„λž˜μ²˜λŸΌ innerHTML ν”„λ‘œνΌν‹°λ₯Ό μ‚¬μš©ν•˜λ©΄ HTML λ§ˆν¬μ—… λ¬Έμžμ—΄λ‘œ κ°„λ‹¨νžˆ DOM μ‘°μž‘μ΄ κ°€λŠ₯ν•˜λ‹€.

    <html>
      <body>
        <ul id="fruits">
          <li class="apple">Apple</li>
        </ul>
      </body>
      <script>
        const $fruits = document.getElementById("fruits");
    
        // λ…Έλ“œ μΆ”κ°€
        $fruits.innerHTML += '<li class="banana">Banana</li>';
    
        // λ…Έλ“œ ꡐ체
        $fruits.innerHTML = '<li class="orange">Orange</li>';
    
        // λ…Έλ“œ μ‚­μ œ
        $fruits.innerHTML = "";
      </script>
    </html>
  • innerHTML ν”„λ‘œνΌν‹°λ₯Ό μ‚¬μš©ν•œ DOM μ‘°μž‘μ€ κ΅¬ν˜„μ΄ κ°„λ‹¨ν•˜κ³  μ§κ΄€μ μ΄λΌλŠ” μž₯점이 μžˆμ§€λ§Œ XSS(Cross Site Script) 곡격에 μ·¨μ•½ν•˜λ‹€λŠ” 단점이 μžˆλ‹€.

39.6.2 insertAdjacentHTML λ©”μ„œλ“œ

  • Element.prototype.insertAdjacentHTML(position, DOMString) λ©”μ„œλ“œλŠ” κΈ°μ‘΄ μš”μ†Œλ₯Ό μ œκ±°ν•˜μ§€ μ•ŠμœΌλ©΄μ„œ μœ„μΉ˜λ₯Ό μ§€μ •ν•΄ μƒˆλ‘œμš΄ μš”μ†Œλ₯Ό μ‚½μž…ν•œλ‹€.

  • <html>
      <body>
        <!-- beforebegin -->
        <div id="foo">
          <!-- afterbegin -->
          text
          <!-- beforeend -->
        </div>
        <!-- afterend -->
      </body>
      <script>
        const $foo = document.getElementById("foo");
    
        $foo.insertAdjacentHTML("beforebegin", "<p>beforebegin</p>");
        $foo.insertAdjacentHTML("afterbegin", "<p>afterbegin</p>");
        $foo.insertAdjacentHTML("beforeend", "<p>beforeend</p>");
        $foo.insertAdjacentHTML("afterend", "<p>afterend</p>");
      </script>
    </html>

39.6.3 λ…Έλ“œ 생성과 μΆ”κ°€

  • DOM은 λ…Έλ“œλ₯Ό 직접 생성/μ‚½μž…/μ‚­μ œ/μΉ˜ν™˜ν•˜λŠ” λ©”μ„œλ“œλ„ μ œκ³΅ν•œλ‹€.

    • μ•„λž˜μ˜ 과정을 ν†΅ν•΄μ„œ λ…Έλ“œμ˜ 생성과 μΆ”κ°€κ°€ 이루어진닀. (μΆ”ν›„ μ„€λͺ… μΆ”κ°€ μ˜ˆμ •)

       - μš”μ†Œ λ…Έλ“œ 생성
       - ν…μŠ€νŠΈ λ…Έλ“œ 생성
       - ν…μŠ€νŠΈ λ…Έλ“œλ₯Ό μš”μ†Œ λ…Έλ“œμ˜ μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€
       - μš”μ†Œ λ…Έλ“œλ₯Ό DOM에 μΆ”κ°€
      <html>
        <body>
          <ul id="fruits">
            <li>Apple</li>
            <!-- <li>Banana</li> -->
          </ul>
        </body>
        <script>
          const $fruits = document.getElementById("fruits");
      
          // 1. μš”μ†Œ λ…Έλ“œ 생성
          const $li = document.createElement("li");
      
          // 2. ν…μŠ€νŠΈ λ…Έλ“œ 생성
          const textNode = document.createTextNode("Banana");
      
          // 3. ν…μŠ€νŠΈ λ…Έλ“œλ₯Ό $li μš”μ†Œ λ…Έλ“œμ˜ μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€
          $li.appendChild(textNode);
      
          // 4. $li μš”μ†Œ λ…Έλ“œλ₯Ό #fruits μš”μ†Œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€
          $fruits.appendChild($li);
        </script>
      </html>

39.6.4 볡수의 λ…Έλ“œ 생성과 μΆ”κ°€

  • DOM을 μ—¬λŸ¬λ²ˆ λ³€κ²½ν•˜λŠ” 것은 각각 λ¦¬ν”Œλ‘œμš°μ™€ λ¦¬νŽ˜μΈνŒ…μ„ μ•ΌκΈ°μ‹œν‚¨λ‹€. 이λ₯Ό ν”Όν•˜κΈ° μœ„ν•΄ μ»¨ν…Œμ΄λ„ˆ μš”μ†Œλ₯Ό μ‚¬μš©ν•  수 μžˆλ‹€.

    <html>
      <body>
        <ul id="fruits"></ul>
      </body>
      <script>
        const $fruits = document.getElementById("fruits");
    
        // DocumentFragment λ…Έλ“œ 생성
        const $fragment = document.createDocumentFragment();
    
        ["Apple", "Banana", "Orange"].forEach((text) => {
          // 1. μš”μ†Œ λ…Έλ“œ 생성
          const $li = document.createElement("li");
    
          // 2. ν…μŠ€νŠΈ λ…Έλ“œ 생성
          const textNode = document.createTextNode(text);
    
          // 3. ν…μŠ€νŠΈ λ…Έλ“œλ₯Ό $li μš”μ†Œ λ…Έλ“œμ˜ μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€
          $li.appendChild(textNode);
    
          // 4. $li μš”μ†Œ λ…Έλ“œλ₯Ό DocumentFragment λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€
          $fragment.appendChild($li);
        });
    
        // 5. DocumentFragment λ…Έλ“œλ₯Ό #fruits μš”μ†Œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€
        $fruits.appendChild($fragment);
      </script>
    </html>
  • λ¨Όμ € DocumentFragment λ…Έλ“œλ₯Ό μƒμ„±ν•˜κ³  DOM에 μΆ”κ°€ν•  μš”μ†Œ λ…Έλ“œλ₯Ό μƒμ„±ν•˜μ—¬ DocumentFragment λ…Έλ“œμ— μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€ν•œ λ‹€μŒ, DocumentFragment λ…Έλ“œλ₯Ό κΈ°μ‘΄ DOM에 μΆ”κ°€ν•œλ‹€.

    • μ΄λ•Œ, μ‹€μ œλ‘œ DOM 변경이 λ°œμƒν•˜λŠ” 것은 ν•œ 번뿐이며 λ¦¬ν”Œλ‘œμš°μ™€ λ¦¬νŽ˜μΈνŠΈλ„ ν•œ 번만 μ‹€ν–‰ν•œλ‹€.

    • λ”°λΌμ„œ, μ—¬λŸ¬ 개의 μš”μ†Œ λ…Έλ“œλ₯Ό DOM에 μΆ”κ°€ν•˜λŠ” 경우 DocumentFragment λ…Έλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” 것이 더 νš¨μœ¨μ μ΄λ‹€.

39.6.5 λ…Έλ“œ μ‚½μž…

λ§ˆμ§€λ§‰ λ…Έλ“œλ‘œ μΆ”κ°€

  • Node.prototype.appendChild λ©”μ„œλ“œλŠ” 인수둜 전달받은 λ…Έλ“œλ₯Ό μžμ‹ μ„ ν˜ΈμΆœν•œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ μžμ‹ λ…Έλ“œλ‘œ DOM에 μΆ”κ°€ν•œλ‹€.

    • 단, λ…Έλ“œλ₯Ό μΆ”κ°€ν•  μœ„μΉ˜λ₯Ό μ§€μ •ν•  수 μ—†κ³  μ–Έμ œλ‚˜ λ§ˆμ§€λ§‰ μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€ν•œλ‹€.

<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </body>
  <script>
    // μš”μ†Œ λ…Έλ“œ 생성
    const $li = document.createElement("li");

    // ν…μŠ€νŠΈ λ…Έλ“œλ₯Ό $li μš”μ†Œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€
    $li.appendChild(document.createTextNode("Orange"));

    // $li μš”μ†Œ λ…Έλ“œλ₯Ό #fruits μš”μ†Œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€
    document.getElementById("fruits").appendChild($li);
  </script>
</html>

μ§€μ •ν•œ μœ„μΉ˜μ— λ…Έλ“œ μ‚½μž…

  • Node.prototype.insertBefore(newNode, childNode) λ©”μ„œλ“œλŠ” 첫 번째 인수둜 전달받은 λ…Έλ“œλ₯Ό 두 번째 인수둜 전달받은 λ…Έλ“œ μ•žμ— μ‚½μž…ν•œλ‹€.

<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </body>
  <script>
    const $fruits = document.getElementById("fruits");

    // μš”μ†Œ λ…Έλ“œ 생성
    const $li = document.createElement("li");

    // ν…μŠ€νŠΈ λ…Έλ“œλ₯Ό $li μš”μ†Œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ μžμ‹ λ…Έλ“œλ‘œ μΆ”κ°€
    $li.appendChild(document.createTextNode("Orange"));

    // $li μš”μ†Œ λ…Έλ“œλ₯Ό #fruits μš”μ†Œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ μžμ‹ μš”μ†Œ μ•žμ— μ‚½μž…
    $fruits.insertBefore($li, $fruits.lastElementChild);
    // Apple - Orange - Banana
  </script>
</html>

39.6.6 λ…Έλ“œ 이동

  • DOM에 이미 μ‘΄μž¬ν•˜λŠ” λ…Έλ“œλ₯Ό appendChild λ˜λŠ” insertBefore λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ DOM에 λ‹€μ‹œ μΆ”κ°€ν•˜λ©΄ ν˜„μž¬ μœ„μΉ˜μ—μ„œ λ…Έλ“œλ₯Ό μ œκ±°ν•˜κ³  μƒˆλ‘œμš΄ μœ„μΉ˜μ— λ…Έλ“œλ₯Ό μΆ”κ°€ν•œλ‹€. 즉, λ…Έλ“œκ°€ μ΄λ™ν•œλ‹€.

    <html>
      <body>
        <ul id="fruits">
          <li>Apple</li>
          <li>Banana</li>
          <li>Orange</li>
        </ul>
      </body>
      <script>
        const $fruits = document.getElementById("fruits");
    
        // 이미 μ‘΄μž¬ν•˜λŠ” μš”μ†Œ λ…Έλ“œλ₯Ό 취득
        const [$apple, $banana] = $fruits.children;
    
        // 이미 μ‘΄μž¬ν•˜λŠ” $apple μš”μ†Œ λ…Έλ“œλ₯Ό #fruits μš”μ†Œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ λ…Έλ“œλ‘œ 이동
        $fruits.appendChild($apple); // Banana - Orange - Apple
    
        // 이미 μ‘΄μž¬ν•˜λŠ” $banana μš”μ†Œ λ…Έλ“œλ₯Ό #fruits μš”μ†Œμ˜ λ§ˆμ§€λ§‰ μžμ‹ λ…Έλ“œ μ•žμœΌλ‘œ 이동
        $fruits.insertBefore($banana, $fruits.lastElementChild);
        // Orange - Banana - Apple
      </script>
    </html>

39.6.7 λ…Έλ“œ 볡사

  • Node.prototype.cloneNode([deep: true | false]) λ©”μ„œλ“œλŠ” λ…Έλ“œμ˜ 사본을 μƒμ„±ν•˜μ—¬ λ°˜ν™˜ν•œλ‹€.

<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
    </ul>
  </body>
  <script>
    const $fruits = document.getElementById("fruits");
    const $apple = $fruits.firstElementChild;

    // $apple μš”μ†Œλ₯Ό 얕은 λ³΅μ‚¬ν•˜μ—¬ 사본을 생성. ν…μŠ€νŠΈ λ…Έλ“œκ°€ μ—†λŠ” 사본이 μƒμ„±λœλ‹€.
    const $shallowClone = $apple.cloneNode();
    // 사본 μš”μ†Œ λ…Έλ“œμ— ν…μŠ€νŠΈ μΆ”κ°€
    $shallowClone.textContent = "Banana";
    // 사본 μš”μ†Œ λ…Έλ“œλ₯Ό #fruits μš”μ†Œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ λ…Έλ“œλ‘œ μΆ”κ°€
    $fruits.appendChild($shallowClone);

    // #fruits μš”μ†Œλ₯Ό κΉŠμ€ λ³΅μ‚¬ν•˜μ—¬ λͺ¨λ“  μžμ† λ…Έλ“œκ°€ ν¬ν•¨λœ 사본을 생성
    const $deepClone = $fruits.cloneNode(true);
    // 사본 μš”μ†Œ λ…Έλ“œλ₯Ό #fruits μš”μ†Œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ λ…Έλ“œλ‘œ μΆ”κ°€
    $fruits.appendChild($deepClone);
  </script>
</html>

39.6.8 λ…Έλ“œ ꡐ체

  • Node.prototype.replaceChild(newChild, oldChild) λ©”μ„œλ“œλŠ” μžμ‹ μ„ ν˜ΈμΆœν•œ λ…Έλ“œμ˜ μžμ‹ λ…Έλ“œλ₯Ό λ‹€λ₯Έ λ…Έλ“œλ‘œ κ΅μ²΄ν•œλ‹€.

<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
    </ul>
  </body>
  <script>
    const $fruits = document.getElementById("fruits");

    // κΈ°μ‘΄ λ…Έλ“œμ™€ ꡐ체할 μš”μ†Œ λ…Έλ“œλ₯Ό 생성
    const $newChild = document.createElement("li");
    $newChild.textContent = "Banana";

    // #fruits μš”μ†Œ λ…Έλ“œμ˜ 첫 번째 μžμ‹ μš”μ†Œ λ…Έλ“œλ₯Ό $newChild μš”μ†Œ λ…Έλ“œλ‘œ ꡐ체
    $fruits.replaceChild($newChild, $fruits.firstElementChild);
  </script>
</html>

39.6.9 λ…Έλ“œ μ‚­μ œ

  • Node.prototype.removeChild(child) λ©”μ„œλ“œλŠ” child λ§€κ°œλ³€μˆ˜μ— 인수둜 μ „λ‹¬ν•œ λ…Έλ“œλ₯Ό DOMμ—μ„œ μ‚­μ œν•œλ‹€.

<html>
  <body>
    <ul id="fruits">
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </body>
  <script>
    const $fruits = document.getElementById("fruits");

    // #fruits μš”μ†Œ λ…Έλ“œμ˜ λ§ˆμ§€λ§‰ μš”μ†Œλ₯Ό DOMμ—μ„œ μ‚­μ œ
    $fruits.removeChild($fruits.lastElementChild);
  </script>
</html>

39.7 μ–΄νŠΈλ¦¬λ·°νŠΈ

39.7.1 μ–΄νŠΈλ¦¬λ·°νŠΈ λ…Έλ“œμ™€ attributes ν”„λ‘œνΌν‹°

  • HTML λ¬Έμ„œμ˜ ꡬ성 μš”μ†ŒμΈ HTML μš”μ†ŒλŠ” μ—¬λŸ¬ 개의 μ–΄νŠΈλ¦¬λ·°νŠΈλ₯Ό κ°€μ§ˆ 수 μžˆλ‹€.

  • HTML μš”μ†Œμ˜ λ™μž‘μ„ μ œμ–΄ν•˜κΈ° μœ„ν•œ 좔가적인 정보λ₯Ό μ œκ³΅ν•œλ‹€.

  • λŒ€λΆ€λΆ„μ˜ μ–΄νŠΈλ¦¬λ·°νŠΈλŠ” λͺ¨λ“  HTML μš”μ†Œμ—μ„œ μ‚¬μš©λ  수 μžˆμ§€λ§Œ, type, value, checked μ–΄νŠΈλ¦¬λ·°νŠΈλŠ” input μš”μ†Œμ—λ§Œ μ‚¬μš©ν•  수 μžˆλŠ” κ²½μš°λ„ μžˆλ‹€.

  • HTML λ¬Έμ„œκ°€ νŒŒμ‹±λ  λ•Œ HTML μš”μ†Œμ˜ μ–΄νŠΈλ¦¬λ·°νŠΈλŠ” μ–΄νŠΈλ¦¬λ·°νŠΈ λ…Έλ“œλ‘œ λ³€ν™˜λ˜μ–΄ μš”μ†Œ λ…Έλ“œμ™€ μ—°κ²°λœλ‹€.

39.7.2 HTML μ–΄νŠΈλ¦¬λ·°νŠΈ μ‘°μž‘

  • HTML μ–΄νŠΈλ¦¬λ·°νŠΈ 값을 μ°Έμ‘°ν•˜λ €λ©΄ Element.prototype.getAttribute(attributeName) λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•˜κ³ , HTML μ–΄νŠΈλ¦¬λ·°νŠΈ 값을 λ³€κ²½ν•˜λ €λ©΄ Element.prototype.setAttribute(attributeName, attributeValue) λ©”μ„œλ“œλ₯Ό μ‚¬μš©ν•œλ‹€.

<html>
  <body>
    <input id="user" type="text" value="ungmo2" />
    <script>
      const $input = document.getElementById("user");

      // value μ–΄νŠΈλ¦¬λ·°νŠΈ 값을 취득
      const inputValue = $input.getAttribute("value");
      console.log(inputValue); // ungmo2

      // value μ–΄νŠΈλ¦¬λ·°νŠΈ 값을 λ³€κ²½
      $input.setAttribute("value", "foo");
      console.log($input.getAttribute("value")); // foo
    </script>
  </body>
</html>

Last updated