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는 모든 텍스트를 반환합니다. 또한 IEtextContent를 지원하지 않습니다.
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 트리에서는 많은 기능을 수행할 수 있습니다. 예를 들어, 다음 코드는 노드를 동적으로 생성한 다음 이를 노드의 끝에 추가하여 문서에 새 CSS 정의를 동적으로 추가합니다.

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

위 코드를 Chrome 콘솔에서 실행하고 페이지 스타일의 변화를 관찰할 수 있습니다.

insertBefore

하위 노드를 지정된 위치에 삽입하려면 어떻게 해야 할까요? parentElement.insertBefore(newElement, referenceElement);를 사용할 수 있습니다. 하위 노드는 referenceElement 앞에 삽입됩니다.
위 HTML을 예로 들어 Python 앞에 Haskell을 삽입한다고 가정해 보겠습니다.

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

는 다음과 같이 작성할 수 있습니다.

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

새 HTML 구조는 다음과 같습니다.

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

insertBefore 사용의 핵심은 "참조 하위 노드"에 대한 참조를 얻는 것임을 알 수 있습니다. 많은 경우 상위 노드의 모든 하위 노드를 반복해야 하며 이는 children 속성을 반복하여 수행할 수 있습니다.

var
  i, c,
  list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
  c = list.children[i]; // 拿到第i个子节点
}

delete

删除一个DOM节点就比插入要容易得多。
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

例如，对于如下HTML结构：

<p id="parent">
  <p>First</p>
  <p>Second</p>
</p>

当我们用如下代码删除子节点时：

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当

First

节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

因此，删除多个节点时，要注意children属性时刻都在变化。

위 내용은 JavaScript 튜토리얼: DOM 노드 인스턴스 코드를 업데이트, 삽입 및 수정하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!