문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Javascript HTML DOM Elements (Nodes)======
<WRAP left notice 80%>
  * description : Javascript HTML DOM Elements (Nodes)
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-06-03
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of the article=====
[[https://www.w3schools.com/Js/js_htmldom_nodes.asp|Javascript HTML DOM Elements (Nodes)]]\\
\\
Nodes(%%HTML%% 요소) 추가하고 제거하기\\

=====Creating New HTML Elements (Nodes)=====
%%HTML DOM%%에 새로운 요소를 추가하려면, 먼저 요소(요소 노드, element node)를 만든 후, 기존의 요소에 덧붙여야 합니다.\\

====Example====
<code javascript>
<body>

  <div id="div1">
    <p id="p1">This is a paragraph with #p1</p>
    <p id="p2">This is a another paragraph with #p2</p>
    <!-- This is the best. -->
  </div>

  <script>
    var para = document.createElement("P");
    var node = document.createTextNode("This is the best.");
    para.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(para);
  </script>

</body>
</code>

=====Example Explained=====

다음의 코드는 새로운 ''%%<p>%%'' 요소를 생성합니다.\\
<code javascript>
var para = document.createElement("p");
</code>
\\

''%%<p>%%'' 요소에 텍스트를 추가하기 위해, 텍스트 노드를 먼저 생성해야 합니다. 다음의 코드는 텍스트 노드를 생성합니다.\\
<code javascript>
var node = document.createTextNode("This is a new paragraph.");
</code>
\\

이후, ''%%<p>%%'' 요소에 텍스트 노드를 덧붙여야 합니다:\\
<code javascript>
para.appendChild(node);
</code>
\\

마지막으로, 기존의 요소에 새로운 요소를 덧붙여야 합니다.\\
다음의 코드는 기존 요소를 찾습니다.\\
<code javascript>
var element = document.getElementById("div1");
</code>
\\

다음의 코드는 기존 요소에 새로운 요소를 덧붙입니다.\\
<code javascript>
element.appendChild(para);
</code>

=====Creating new HTML Elements - insertBefore()=====
이전 예제의 ''%%appendChild()%%'' 메서드는 새로운 요소를 부모의 마지막 자식으로 덧붙였습니다.\\
\\
원하지 않는 경우, ''%%insertBefore()%%'' 메서드를 사용할 수 있습니다.\\

====Example====
<code javascript>
<body>

  <div id="div1">
    <!-- This is new.가 생성됨. -->
    <p id="p1">This is a paragraph with #p1</p>
    <p id="p2">This is another paragraph with #p2</p>
  </div>

  <script>
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);

    var element = document.getElementById("div1");
    var child = document.getElementById("p1");
    element.insertBefore(para, child);
  </script>

</body>
</code>

=====Removing Existing HTML Elements=====
%%HTML%% 요소를 제거하기 위해서는 ''%%remove()%%'' 메서드를 사용합니다.\\

====Example====
<code javascript>
<body>

  <div>
    <p id="p1">This is a paragrahp with #p1</p>
    <!-- 버튼 클릭 시  #p1이 삭제됨-->
    <p id="p2">This is another paragrahp with #p2</p>
  </div>

  <button onclick="myFunction()">Remove Element</button>

  <script>
    function myFunction() {
      var elmnt = document.getElementById("p1");
      elmnt.remove();
    }
  </script>

</body>
</code>

=====Example Explained=====
%%HTML%% 문서에는 두 개의 자식 노드 (두 개의 %%<p>%% 요소)를 가진 %%<div>%% 요소가 있습니다.\\

<code javascript>
<div>
  <p id="p1">This is a paragraph with #p1</p>
  <p id="p2">This is another paragraph with #p2</p>
</div>  
</code>
\\

삭제하려는 요소를 찾습니다.\\
<code javascript>
var elmnt = document.getElementById("p1");
</code>

\\

그 후, 해당 요소에 대한 remove() 메서드를 실행합니다.\\
<code javascript>
elmnt.remove();
</code>
\\
''%%remove()%%'' 메서드는 이전 브라우저에서 작동하지 않습니다. 대신 ''%%removeChild()%%''를 사용하는 방법에 대한 아래 예제를 참조하십시오.\\

=====Removing a Child Node=====
''%%remove()%%'' 메서드를 지원하지 않는 브라우저의 경우, 요소를 제거하려면 부모 노드를 찾아야 합니다.\\

====Example====
<code javascript>
<body>

  <div id="div1">
    <p id="p1">This is a paragraph with #p1</p>
    <!-- #p1이 삭제됨 -->
    <p id="p2">This is another paragraph with #p2</p>
  </div>

  <script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
  </script>

</body>
</code>

=====Example Explained=====
다음의 %%HTML%% 문서에는 두 개의 자식 노드 (두 개의 ''%%<p>%%'' 요소)를 가진 %%<div>%% 요소가 포함되어 있습니다.\\
<code javascript>
<div id="div1">
  <p id="p1">This is a paragraph with #p1</p>
  <p id="p2">This is another paragraph with #p2</p>
</div> 
</code>
\\

''%%id="div1"%%''을 가진 요소를 찾습니다.\\
<code javascript>
var parent = document.getElementById("div1");
</code>
\\

''%%id="p1"%%''을 가진 ''%%<p>%%'' 요소를 찾습니다.\\
<code javascript>
var child = document.getElementById("p1");
</code>
\\

부모 요소에서 자식 요소를 삭제합니다.\\
<code javascript>
parent.removeChild(child);
</code>
\\

일반적인 해결 방법은 다음과 같습니다: 제거할 자식 요소를 찾고, ''%%parentNode%%'' 속성을 사용하여 부모를 찾습니다.\\
<code javascript>
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
</code>

=====Replacing HTML Elements=====
요소를 %%HTML DOM%%으로 바꾸려면 ''%%replaceChild()%%'' 메서드를 사용하십시오.\\

====Example====
<code javascript>
<body>

  <div id="div1">
    <p id="p1">This is a paragraph with #p1</p>
    <!-- This is new.로 변경됨 -->
    <p id="p2">This is another paragraph with #p2</p>
  </div>

  <script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node); /* <p>This is new.</p> */
    parent.replaceChild(para, child); /* parent의 요소인 첫 번째 child를 para의 child로 변경한다. */
  </script>

</body>
</code>

































































{{tag>오션, Javascript HTML DOM Elements (Nodes)}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
