js要素の内容まとめ 操作_javascriptスキル

1.innerHTML
これは読み書き可能であり、互換性の問題については、W3Help のナレッジ レコードを参照することができます。

2.outerHTML
このメソッドは、次のように要素自体をすばやく置き換えるのに使用できます。

コードをコピー コードは次のとおりです。

こんにちは、私はデモです

$('hello').outerHTML = '';

残念ながら、Firefox はまだサポートしていません (私は現在 Firefox8 を使用しています)。他のブラウザはかなりよくサポートしています。 ff で使用できます。 innerHTML を使用して実装をシミュレートします。

3.documentFragment
DocumentFragment は効率的な DOM ノード挿入操作を実現します。新しい DocumentFragment を作成できます。

var docFragment = document.createDocumentFragment();

ノードを追加するために使用できる要素ノードの appendChild メソッドをサポートします。これはメモリ内の一時スペースに相当します。その後、すぐに DOM に追加されます。Tree では、前のブログ投稿で説明した、ブラウザー関連のリフローおよび再描画イベントがほとんどありません。

4.insertAdjacentHTML
このメソッドは、IE4 で初めて導入され、現在 HTML5 標準に組み込まれており、ff は 8 でサポートを開始したばかりです。 。 要素の内側と外側の 4 か所にコンテンツを柔軟に追加できます。例:

コードをコピー コードは次のようになります。

こんにちは、私はデモです。< - beforeend-->

$('test').insertAdjacentHTML('beforebegin', /* ここにコンテンツ */); 🎜>
これは本当に素晴らしいですよね。しかし、残念なことに、これは IE 自体によって導入されたものであり、たとえば、要素が div である場合、IE6 ～ 8 のバージョンには確かに多くのバグがあります。 、コンテンツは 4 つの場所すべてにスムーズに挿入できますが、これを p 要素に変更すると、'beforebegin' と 'afterend' は p の外側のコンテンツの挿入のみをサポートします。 p 内では、tr や td がこのメソッドをサポートしていないなど、さまざまなバグがあります。 IE9 でテストしたところ、期待どおりに動作しました。 jQuery の父がこのメソッドに関するブログを公開しています。興味がある場合は、http://ejohn.org/blog/dom-insertadjacenthtml/ を参照してください。

5.textContent
これは要素用です。要素自体とそのサブ要素内のテキスト コンテンツの操作は、あまり頻繁には使用されませんが、知っておく必要があります。例:

コードをコピーします コードは次のとおりです:

何でもいいです。こんにちは、私は デモです

$('test').textContent //まあまあ、こんにちは、私はデモです


テキストを直接接続します。 IE9 およびその他のブラウザは、この方法を適切にサポートしています。

6.innerText
これも元々は IE で導入されましたが、現在は Firefox に加えて他のブラウザでもサポートされていますが、結果は若干異なります。 Opera では、結果は textContent と一致します。Chrome では、テキスト要素を含むスタイルに関連します。 IE9 では、テキスト要素を含むスタイルに関連します。 実際、innerText と textContent は似ているように見えますが、いくつかの顕著な違いがあります。 MDN には具体的な手順があります:

1. textContent は script 要素と style 要素のテキストを取得できます。 innerText が機能しない

2. innerText の結果はスタイルに関連しており、非表示要素のテキスト コンテンツを取得することはできませんが、textContent は制限されません

3. innerText は、ブラウザ内で reflow イベントを実行できますが、textContent は実行できません。はい、これは効率に多少の影響を与えます。

もちろん、IE6~8 の場合、ノードをトラバースすることで textContent の効果を簡単に実現できます。サイの本に記載されている解決策として:

コードをコピーします コードは次のとおりです:

function textContent(e) {

var child, type, s = []; // s はすべての子のテキストを保持します
for(child = e.firstChild; child != null; child = child.nextSibling) {
type = child.nodeType;
if(type === 3 || type === 4) { //Text ノードと CDATASection ノード
s.push(child.nodeValue) ;
} else if(type === 1) {
s.push(textContent(child))
return
} }