JavaScript 튜토리얼: DOM 노드 인스턴스 코드를 업데이트, 삽입 및 수정하는 방법에 대한 자세한 설명

Update

DOM 노드를 얻은 후 업데이트할 수 있습니다.

노드의 텍스트를 직접 수정할 수 있습니다.

첫 번째는 innerHTML 속성을 수정하는 것입니다. 이 방법은 매우 강력합니다. node이지만 HTML 조각을 직접 사용할 수도 있습니다. DOM 노드 내부의 하위 트리를 수정하세요.

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置文本为abc:
p.innerHTML = &#39;ABC&#39;; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = &#39;ABC <span style="color:red">RED</span> XYZ&#39;;
// <p>...</p>的内部结构已修改

innerHTML을 사용할 때 HTML을 작성해야 하는지 주의하세요. 작성된 문자열을 네트워크를 통해 얻은 경우 XSS 공격을 피하기 위해 문자 인코딩에 주의하세요.
두 번째는 innerText 또는 textContent 속성을 수정하여 문자열이 자동으로 HTML로 인코딩되어 HTML 태그가 설정되지 않도록 하는 것입니다.

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置文本:
p.innerText = &#39;<script>alert("Hi")</script>&#39;;
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>

사이의 차이점 두 가지는 속성을 읽는 것입니다. innerText는 숨겨진 요소의 텍스트를 반환하지 않는 반면 textContent는 모든 텍스트를 반환합니다. 또한 IE<9는 textContent를 지원하지 않습니다.
CSS 수정도 자주 필요한 작업입니다. DOM 노드의 style 속성은 모든 CSS에 해당하며 직접 얻거나 설정할 수 있습니다. CSS는 font-size와 같은 이름을 허용하지만 JavaScript에서는 유효한 속성 이름이 아니기 때문에 JavaScript에서 카멜 케이스 이름 지정 fontSize:

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置CSS:
p.style.color = &#39;#ff0000&#39;;
p.style.fontSize = &#39;20px&#39;;
p.style.paddingTop = &#39;2em&#39;;

insert로 다시 작성해야 합니다.

DOM 노드를 얻고 이 DOM 노드에 새 DOM을 삽입하려면 어떻게 해야 합니까?
이 DOM 노드가 비어 있는 경우(예:

, 그런 다음 직접 innerHTML = 'child'을 사용하여 DOM을 수정합니다) 노드의 내용은 새 DOM 노드를 "삽입"하는 것과 같습니다.
DOM 노드가 비어 있지 않으면 innerHTML이 모든 원래 하위 노드를 직접 대체하므로 이 작업을 수행할 수 없습니다.
새 노드를 삽입하는 방법에는 두 가지가 있습니다. 하나는 appendChild를 사용하여 상위 노드의 마지막 하위 노드에 하위 노드를 추가하는 것입니다. 예:

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</p>

JavaScript

를

의 마지막 항목에 추가하세요.

var
  js = document.getElementById('js'),
  list = document.getElementById('list');
list.appendChild(js);

이제 HTML 구조는 다음과 같습니다:

<!-- HTML结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="js">JavaScript</p>
</p>

우리가 삽입한 js 노드가 이미 현재 문서 트리에 존재하기 때문에 이 노드는 먼저 원래 위치에서 삭제된 다음 삽입됩니다. 새로운 위치로.
더 자주 처음부터 새 노드를 생성하여 지정된 위치에 삽입합니다.

var
  list = document.getElementById('list'),
  haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

이러한 방식으로 새 노드를 동적으로 추가합니다.

<!-- HTML结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="haskell">Haskell</p>
</p>

동적으로 노드를 생성한 다음 추가합니다. DOM 트리에서는 많은 기능을 수행할 수 있습니다. 예를 들어, 다음 코드는