JavaScript チュートリアル: dom ノードのインスタンス コードを更新、挿入、変更する方法の詳細な説明

更新

DOM ノードを取得したら、それを更新できます。

ノードのテキストを直接変更するには、次の 2 つの方法があります。

1 つは、innerHTML 属性を変更する方法です。この方法は、DOM のテキスト コンテンツを変更できるだけではありません。ノードを使用しますが、DOM ノード内のサブツリーを直接使用することもできます。記述された文字列をネットワーク経由で取得する場合は、XSS 攻撃を避けるために文字コードに注意してください。
2 番目は、

innerText

または

textContent 属性を変更して、文字列を自動的に HTML エンコードして、HTML タグを設定できないようにします。 2 つは属性を読み取るためのもので、
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;);
// 设置文本为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>的内部结构已修改

insert として書き直す必要があります。 DOM ノードを取得し、この DOM ノードに新しい DOM を挿入したい場合、どうすればよいでしょうか? この DOM ノードが空の場合 (e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3、)、直接

innerHTML = '45a2772a6b6107b401db3c9b82c049c2child54bdf357c58b8a65c66d7c19c8e4d114

' を使用して DOM を変更します。ノードのコンテンツは、新しい DOM ノードを「挿入」することと同等です。

DOM ノードが空でない場合、

innerHTML
が元のすべての子ノードを直接置換するため、これを行うことはできません。

新しいノードを挿入するには 2 つの方法があります。 1 つは、

appendChild を使用して、親ノードの最後の子ノードに子ノードを追加する方法です。例:

// 获取<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>

6de4cee9b51ae144091be93786a2abe8JavaScript94b3e26ee717c64999d7867364b1b4a3を
e672fde323644dddb9191ec4d9b38dcfの最後の項目に追加します:

// 获取<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;;

これで、HTML 構造は次のようになります:

<!-- 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>

挿入した js ノードは現在のドキュメント ツリーに既に存在するため、このノードは最初に元の位置から削除されてから挿入されます。新しい場所へ。 より多くの場合、新しいノードを最初から作成し、指定された位置に挿入します:

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

この方法で、新しいノードを動的に追加します:

<!-- 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>

ノードを動的に作成して追加DOM ツリーに追加すると、多くの機能を実現できます。たとえば、次のコードは

c9ccee2e6ea535a969eb3f532ad9fe89

ノードを動的に作成し、それを

93f0f5c25f18dab9d176bd4f6de5d30e

ノードの末尾に追加することで、新しい CSS 定義をドキュメントに動的に追加します。

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

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 id="haskell">Haskell</p>
</p>

は次のように記述できます:

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

新しい HTML 構造は次のとおりです。

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

insertBefore

を使用する重要なポイントは、「参照子ノード」への参照を取得することであることがわかります。多くの場合、親ノードのすべての子ノードをループする必要がありますが、これは

children

属性を反復することで実現できます:

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

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]不是一个有效的节点。原因就在于，当e388a4556c0f65e1904146cc1a846beeFirst94b3e26ee717c64999d7867364b1b4a3节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

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

以上がJavaScript チュートリアル: dom ノードのインスタンス コードを更新、挿入、変更する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。