Javascriptの研究ノート

私の最後のブログではDOMのための内容の基本的な操作について話しました、このDOMは、更新のための外観を統合挿入、および削除の操作をし続けています。

HTMLのDOMツリーを解析するために、我々は確かに時間までの時間からいくつかの変更となり、変更は、いくつかの非常に有用な特性での動作、Javascriptを容易にするために、オリジナルのコンテンツを削除し、追加します。

.innerHTML

二.innerText

三.textContent

そしてそう..に、我々はいくつかのプロパティよりもより多くを操作しようとしています。

こんにちは、<p個のID =「テスト」>のために！</ P> HTMLエディタは、多くの重要なコンテンツIDを追加しますので、その後、私たちは、innerHTMLプロパティを直接その内容を変更することができます。

非常に単純な二段階、我々は<p> </ p>タグのコンテンツを変更することができます。

もちろん、最初のステップは、IDを取得することです。

VaRのA =のdocument.getElementById（ 'テスト'）。或者するvar A = document.querySelector（ '＃試験'）。

第二のステップは、内容を変更することです。

a.innerHTML = 'あー';

若しくは

a.innerText = 'あー';

若しくは

a.textContent = 'あー';

ここでの焦点はのTextContentは、これら3つの属性、後者は自動的にHTMLを文字列にエンコードする、innerHTMLの、のinnerTextでありinnerHTMLのために、私たちは内容に変更することができるので、これは、任意のHTMLタグを設定していません。

a.innerHTML = 'あー<スクリプト>警告（ "ラッキー！"）</ SCRIPT> <スパンのスタイル=' 赤 '>良い！</ span>を！' 私たちは、プレーンテキストに加えて、コンテンツの一部を実施しました。そのため、ネットワーク環境内の文字列、そうでない場合は文字コードを取得するには、それはXSS攻撃に対して非常に脆弱です。

その後のinnerTextとのTextContentの特性の違いについて話しています。

全体的に、2つの違いはのinnerTextは、テキスト、すべてのテキストのTextContentリターンの隠し要素を返さないのinnerTextありませんが、私は直接書き込むながら、あなたは、そのような<script>要素と<スタイル>要素などのTextContentコンテンツなどすべての要素を取得しますです次のコードを確認するには：

<！DOCTYPE HTML > 
< HTML > 
    < 頭が> 
        < メタのcharset = "UTF-8" > </ メタ> 
    </ ヘッド> 
    < 身体> 
        < divのクラス= "テスト" ID = "テスト" > 
            私はあなた見ることができます
            。< divのスタイルを= "表示：なし" > 
                < スパン> 
                    私はあなたを見ることができない
                </ スパン> 
            </ DIV >
            
                私も、あなたを見ることができます。
            </ P > 
        </ DIV > 
        < スクリプトタイプ= "テキスト/ javascriptの" > 
        VAR 可視= のdocument.getElementById（' テスト' ）。
        // 警告（ "のTextContent可见：" + visible.textContent）。
        警告（" のinnerText可见：" + visible.innerText）。
        // はconsole.log（ "のTextContent可见：" + visible.textContent）。
        // はconsole.log（ "のinnerText可见：" + visible.innerText）。
        </ スクリプト> 
    <
</ HTML >

私はのTextContentリターンが見つかりました：

innerTextを返します：

明らかにstyle要素とのinnerTextなしに戻るのTextContent。

DOMを更新したので、ここでDOMを挿入する方法です。

二つの場合、最初のノードに空がある場合は、<div> </ div>このように、何も内容がない、我々は直接のinnerHTML =「<スパン>こんにちは</ span>の上で使用することができます"

第二のケースでは、ノードが空ノードではないです

以下のために

< P ID = "waittingInsert" >新しいDOM </ P > 
< DIV ID = "リスト" > 
    < P ID = "第一" >第-DOM </ P > 
    < PのID = "第二" >第-DOM < / P > 
    < PのID = "第3" >第三DOM </ P > 
</ DIV >

私は<p個のID = "waittingInsert">新しい-DOM </ P>挿入<div要素のid = 'リスト'> </ div>の行きたいので、我々はいくつかの方法で使用することができます。

1.最後に挿入します。

VAR 
    newdom =のdocument.getElementById（ 'waittingInsert'）、
    リスト=のdocument.getElementById（ 'リスト'）; 
list.appendChild（newdom）。

そうした後次のようになります。

< DIV ID = "リスト" > 
    < PのID = "第一" >第-DOM </ P > 
    < PのID = "第二" >第-DOM </ P > 
    < PのID = "第3" >第三DOM < / P > 
    < PのID = "waittingInsert" >新しい-DOM </ P > 
</ DIV >

2.最後に直接挿入された新しいノードを作成します。

VARの
    リスト=のdocument.getElementById（ 'リスト'）、
    newdom =のdocument.createElement（ 'P'）; 
newdom.id = 'waittingInsert'; 
newdom.innerText = '新しい-DOM'; 
list.appendChild（newdom）。

同じケースの結果。

3.ノードは、指定された位置に挿入されている（parentElement.insertBefore（newElement、referenceElement）;）

VARの
    リスト=のdocument.getElementById（ 'リスト'）、
    古い=のdocument.getElementById（ 'サードDOM'）、
    新=のdocument.createElement（ 'P'）; 
new.id = 'waittingInsert'; 
new.innerText =「二DOM2」。
（新、旧）list.insertBefore。

新しいノードが第3のノードに挿入される前に、私たちができるように。

これは次のようになります。

< DIV ID = "リスト" > 
    < PのID = "第一" >第-DOM </ P > 
    < P ID = "第二" >第-DOM </ P > 
    < P ID = "waittingInsert" >二DOM2 < / P > 
    < PのID = "第3" >第三DOM </ P > 
</ DIV >

innerHTMLのは、直接、すべて元のノードをカバーするため、ノードを挿入するinnerHTMLプロパティを使用しないのはなぜ内部ノードが空でないキーは、あります。

最後のノードを削除する方法であり、ノードを削除することは非常にシンプルですが、また、いくつかの問題に注意を払う必要がありますと言います。

ノードを削除するには、我々は最初のノード自身とその親を取得する必要があり、その後、自分自身を削除するには、親ノードのremoveChildを呼び出します。

私は4番目の要素を削除したい場合は、<p個のID =「三」>、我々は操作が終了した前回の内容を取るサードDOM </ P>、我々は次のことができます。

VaRの自己=のdocument.getElementById（ '第' ）。
VaRの親= self.parentElement。
parent.removeChild（自己）;

したがって、我々は、ID =「三」要素のリストタイプを削除しました。

また、直接の親を得ることができます

VaRの親=のdocument.getElementById（ 'リスト' ）; 

parent.removeChild（list.children [ 3]）。

4番目の要素を削除します。

キー：

ドキュメントツリーの後にノードを削除し、実際にそれがメモリ内にいないが、別の場所に再びいつでも追加することができます。

あなたが親ノードの子ノードを歩くと操作を削除すると、そのノートchildrenプロパティは読み取り専用の属性であり、それがリアルタイム子ノードの変更に更新されます。

言うには、

VaRの親=のdocument.getElementById（ 'リスト' ）; 

parent.removeChild（list.children [ 2]）。

我々は第三の要素を除去し、次いで、その長さのコード、ブラウザのエラーを実行するだけでなく、要素の変化に追従するように変更した後、それは相対インデックスが変更されると言うことです。

OKそれを成し遂げる、オペレーティングDOM最後に基本的な、そして後に動的にノードにも非常に便利なもので更新し、Webページのセキュリティに注意を払うためにリマインダーが、結局、一部のページが簡単に個人情報の漏洩、その結果、コードのスクリプトに注入することができるので、HTTPとかとページああ、情報セキュリティへの配慮。

-------------------------------------------------- ----------------------

Javascriptの研究では、3ノート - DOMを操作する（B）

Javascriptの研究ノート

おすすめ