JavaScript ナレッジポイントのコレクション: 要素とノードの取得

著者：Eve Cole 更新時間：2022-06-11 09:02:49

この記事では、JavaScript に関する関連知識を提供します。主に、ID、クラス名、名前、タグ名による要素の取得、ノードの作成、削除、クローン作成など、要素とノードの取得に関する関連コンテンツを紹介します。見てみましょう。 , 皆さんの参考になれば幸いです。

[関連する推奨事項: JavaScript ビデオチュートリアル、Web フロントエンド]

ID ( getElementById )、名前属性 ( getElementsByName )、タグ名 ( getElementsByTagName )、クラス名 ( getElementsByClassName ) を通じて

要素

を
取得
し
ます
。セレクター ( getElementsByClassName ) を通じて要素を取得します。 querySelector )
セレクターを介して要素のグループ ( querySelectorAll )
html を取得するメソッド ( document.documentElement )
ボディを取得するメソッド ( document.body )

1. ID で取得 (getElementById)

// 1 要素ノードを取得 // ID で (find ID による要素。大文字と小文字が区別されます。複数の ID がある場合は、最初の ID のみが見つかります)
    document.getElementById('p1');

コンテキストはドキュメントである必要があります。
パラメータは渡す必要があります。パラメータは文字列タイプであり、要素の ID を取得するために使用されます。
戻り値は 1 つの要素のみを取得し、見つからない場合は null を返します。

2. クラス名で要素を検索 (getElementsByClassName)

// クラス名で要素を検索します。複数のクラス名をスペースで区切って HTMLCollection (長さ属性を持つ要素のコレクション。インデックス番号を通じて内部の要素にアクセスできます) を取得します。 )
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

パラメータは要素のクラス名です。
戻り値は配列のような配列です。見つからない場合は、空の配列が返されます

。

3. name 属性を通じて (getElementsByName)

// name 属性を検索し、NodeList (長さ属性を持つノード コレクション) を返します。インデックス番号を通じてアクセスできます)
   var nm = document.getElementsByName('c');
    console.log(nm);

4. タグ名で (getElementsByTagName)

// タグ名で要素を検索し、HTMLCollection を返します。
    document.getElementsByTagName('p');

このパラメーターは、大文字と小文字を区別しない要素のタグ名属性を取得します。
戻り値はクラス配列です。見つからない場合は、空の配列が返されます。

5. セレクター (querySelector) を通じて要素を取得します

。

document.querySelector('.animated')

パラメーターは、次のようなセレクターです。クラス名」。
単一のノードを返します。一致する要素が複数ある場合は、最初の

6 を返します。セレクター (querySelectorAll) を通じて要素のセットを取得します。

document.querySelector('.animated')

戻り値は

、ノード

を

取得するための

クラス配列です

。

ドキュメントオブジェクトモデル (DOM) )、各ノードはオブジェクトです。 DOM ノードには 3 つの重要な属性があります

。 1.nodeName: ノードの名前

2.nodeValue: ノードの値

3.nodeType: ノードのタイプ

1.nodeName 属性: ノードの名前 (読み取り専用) 。

ラベル名
と同じです。
は常に
#text です

。 .nodeValue 属性: 要素

ノードの nodeValue は未定義または null です。nodeValue
ノードの
テキスト属性です

. nodeType 属性: タイプです

。

ノードの。これは読み取り専用です。一般的に使用されるノードタイプは次のとおりです。

要素タイプノードタイプ
要素 1
属性 2
テキスト 3 スペースも 3 を返します
コメント 8
ドキュメント 9

ノードの作成:

1. ノードの作成: createElement('')

// 要素を作成するだけであり、appendChild と組み合わせて使用する必要があります。 p');
    elem.id = 'テスト';
    elem.style = '色: 赤';
    elem.innerHTML = '私は新しく作成されたノードです';
    document.body.appendChild(elem);

2. ノードの挿入: appendChild () の

使用法は次のとおりです:parent.appendChild(child)
は、子ノードが元々存在する場合は、元のノード
になります。
新しいノードを最後に追加しますが、イベントは

var oNewp=document.createElement("p");

のままになります。

      var oText=document.createTextNode("World Hello");
      oNewp.appendChild(oText);

2-1. ノードの挿入: insertBefore()

の使用法は

、

parent.insertBefore(newNode,refNode); です。

      document.body.insertBefore(oNewp,oOldp);

ノードの削除

1. ノードの削除:removeChild の

使用法:parent.removeChild(child)
親要素ではない子ノードを削除すると、エラーが報告されます

。 .body.getElementsByTagName("p ")[0];
         op.parentNode.removeChild(op);

クローンノード

1. クローンノード:parent.cloneNode() false または true

クローンノード (要素をコピーするかどうかを示すパラメーターを受け入れる必要があります)

// クローン ノード (パラメーターを受け入れる必要があります)要素) 要素) をコピーするかどうかを示します
    var form = document.getElementById('test');
    var clone = form.cloneNode(true);
    クローン.id = 'test2';
    document.body.appendChild(clone);

ノードを置換します

1. ノードを置換するメソッド node.replace(new,old)

var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

ドキュメントフラグメントボックスの

機能

: ドキュメントに多数のノードを追加する場合、1 つずつ追加すると非常に遅くなります。この場合、ドキュメントフラグメントを使用して、それらを一度にドキュメントに追加します。
構文
: document.createDocumentFragment()

;
    {
        var start = Date.now();
        var str = '', li;
        var ul = document.getElementById('ul');
        var フラグメント = document.createDocumentFragment();
        for(var i=0; i<10000; i++)
        {
            li = document.createElement('li');
            li.textContent = ''+i+' 番目の子ノード';
            フラグメント.appendChild(li);
        }
        ul.appendChild(フラグメント);
        console.log('時間消費:'+(Date.now()-start)+'ミリ秒'); // 63 ミリ秒})();