更新
DOM ノードを取得したら、それを更新できます。
ノードのテキストを直接変更するには、次の 2 つの方法があります。
1 つは、innerHTML 属性を変更する方法です。この方法は、DOM のテキスト コンテンツを変更できるだけではありません。ノードを使用しますが、DOM ノード内のサブツリーを直接使用することもできます。記述された文字列をネットワーク経由で取得する場合は、XSS 攻撃を避けるために文字コードに注意してください。
2 番目は、
innerText
textContent 属性を変更して、文字列を自動的に HTML エンコードして、HTML タグを設定できないようにします。 2 つは属性を読み取るためのもので、
innerText は非表示要素のテキストを返しませんが、textContent はすべてのテキストを返します。また、IEtextContent
CSS の変更も頻繁に必要な操作です。 DOM ノードの
属性はすべての CSS に対応しており、直接取得または設定できます。 CSS では font-size のような名前が許可されていますが、JavaScript では有効な属性名ではないため、JavaScript でキャメルケースの名前 fontSize: insert として書き直す必要があります。 DOM ノードを取得し、この DOM ノードに新しい DOM を挿入したい場合、どうすればよいでしょうか? この DOM ノードが空の場合 (、)、直接 // 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改
ログイン後にコピー
' を使用して DOM を変更します。ノードのコンテンツは、新しい DOM ノードを「挿入」することと同等です。
innerHTML
が元のすべての子ノードを直接置換するため、これを行うことはできません。
JavaScript
appendChild を使用して、親ノードの最後の子ノードに子ノードを追加する方法です。例: // 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>ログイン後にコピー
の最後の項目に追加します:
// 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 设置CSS: p.style.color = '#ff0000'; p.style.fontSize = '20px'; p.style.paddingTop = '2em';
挿入した js ノードは現在のドキュメント ツリーに既に存在するため、このノードは最初に元の位置から削除されてから挿入されます。新しい場所へ。 より多くの場合、新しいノードを最初から作成し、指定された位置に挿入します: <!-- 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>
ログイン後にコピー
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 ツリーに追加すると、多くの機能を実現できます。たとえば、次のコードは
