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 ノードが空の場合 (

、)、直接

innerHTML = 'child

' を使用して 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>

JavaScript

を

の最後の項目に追加します:

// 获取<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 ツリーに追加すると、多くの機能を実現できます。たとえば、次のコードは