JS取得要素のN種類の方法とその動静的討論

12751 ワード

実際のフロントエンド開発では、その要素のスタイル、内容などを更新する目的で、いくつかの要素を取得することがよくあります.ドキュメントオブジェクトモデル(DOM)は、HTMLドキュメントとXMLドキュメントのプログラミングインタフェースであり、ドキュメントの構造化の記述を提供し、プログラムから構造にアクセスしてドキュメントの構造、スタイル、コンテンツを変更する方法を定義しています.DOMは、ドキュメントをノードとオブジェクト(属性とメソッドを含むオブジェクト)からなる構造集合として解析し、Webページとスクリプトまたはプログラム言語を接続します.したがって、JavaScriptはDOM APIを介して要素ノードを取得することができ、querySelector()およびquerySelectorAll()はES 5の要素選択方法である.

1、getElementById()：

パラメータを受信:取得する要素のID(大文字と小文字を区別し、厳密に一致しなければならない)を返し、1つのElementオブジェクト(動的NodeList集合と見なすこともでき、集合には1つの一致する要素しか含まれていないが、DOMノードの変化もリアルタイムで反映される)を返し、前のドキュメントに特定のIDを持つ要素が存在しない場合nulを返す.構文:

element = document.getElementById(id);

例:削除


    
        hello world
        hello dolby
        hello dot
        hello bean
    
    
        var div = document.getElementById("myDiv");
        console.log(div); //(1)
        var body=document.querySelector('body');
        body.removeChild(div);
        console.log(body); //(2)

//(1)    
    
        hello world
        hello dolby
        hello dot
        hello bean
    

//(2)    

    
        var div = document.getElementById("myDiv");
        console.log(div); //(1)
        var body=document.querySelector('body');
        body.removeChild(div);
        console.log(body); //(2)

例:




  getElementById example
  
  function changeColor(newColor) {
    var elem = document.getElementById("para1");
    elem.style.color = newColor;
  }
  


  Some text here

getElementById()メソッドでは、ドキュメントにない要素は検索されません.エレメントを作成してIDを割り当てる場合は、getElementById()を使用して取得するには、insertBefore()または他の類似の方法でエレメントをドキュメントに挿入する必要があります.

var element = document.createElement("div");
element.id = 'testqq';
var el = document.getElementById('testqq'); // el will be null!

2、getElementsByClassName()：

1つ以上のクラス名を含む文字列(クラス名がスペースで区切られている)というパラメータを受信し、現在の要素をルートノードとし、class名を指定したすべてのサブ要素を含むHTML Collection動的集合(NodeListクラス配列オブジェクトを返すこともできます)を返します.構文:

var elements = document.getElementsByClassName(names); 
var elements = rootElement.getElementsByClassName(names);

getElementsByClassNameはdocumentだけでなく任意の要素で呼び出すことができます.このメソッドを呼び出す要素は、今回検索したルート要素として使用されます.例:

すべてのclassが'test'の要素を取得します:

document.getElementsByClassName('test');

すべてのclassを取得'red'と'test'を同時に含む要素:

document.getElementsByClassName('red test');

idが「main」の要素のサブノードで、すべてのclassが「est」の要素を取得します:

document.getElementById('main').getElementsByClassName('test');

例:削除

//html  

        hello world
        hello dolby
        hello dot
        hello bean

//js   
    
        var div = document.getElementsByClassName("myDiv");
        console.log(div); //(3)
        var p = document.getElementsByClassName("myP");
        for (var i = 0; i < p.length; i++) {
            div[0].removeChild(p[i]);
        }
        console.log(p); //(4)

//(3)    
[div.myDiv] //     HTMLCollection  ，   1，innerHTML hello dolby
，hello bean，         p       。

//(4)    
[p.myP,p.myP] //     HTMLCollection  ，   2，innerHTML   "hello dolby"，"hello bean"。

以上、getElementsByClassNameメソッドがHTML Collectionダイナミックコレクションを返すことを、ノードを削除する方法で検証しました.
⬆️以上のコードでは、まずdivがページ中のクラス名「myDiv」の要素からなる動的集合を取得し、pがページ中のクラス名「myP」の要素からなる動的集合を取得し、次に「myDiv」の集合の第1項(すなわち、前例で唯一のdiv要素)の「myP」の集合の各項をforループで削除し、結果として第1項と第3項のみが削除されたのはなぜでしょうか.なぜなら、動的集合におけるDOM構造の変化は、保存されたオブジェクトに自動的に反映され、最初はp.legth=4であり、i=0のときにページの最初のp要素が削除され、その後はp.length=3であるからである.i=1で残りの3つのpの項目インデックスが1の項目が削除され、その後p.length=2となる.i=2で満たされていないi
では、クラス配列オブジェクトHTML Collectionコレクションの各項目を巡回し、すべての項目を削除するにはどうすればいいのでしょうか.それともforサイクルで⬇️,オブジェクトセットの最後の項目を削除するたびに～

//js   
    
        var div = document.getElementsByClassName("myDiv")[0];
        console.log(div); //(5)
        var p = document.getElementsByClassName("myP");
        for (var i=p.length;i--;){
            div.removeChild(p[i]);
        }
        console.log(p); //(6)

//(5)    


//(6)    
[] //  HTMLCollection  ，   0

3、getElementsByTagName()：

接收一个参数：要取得的元素的标签名（不区分大小写），返回一个HTMLCollection动态集合（也可以说返回一个NodeList类数组对象）,集合中包含以当前元素为根节点（不包括当前元素自身），所有指定标签名的子元素，子元素的顺序是在当前元素的子树中出现的顺序，如果没有搜索到元素则集合为空。
语法：

elements = element.getElementsByTagName(tagName)

例:

// check the alignment on a number of cells in a table. 
var table = document.getElementById("forecast-table"); 
var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
    var status = cells[i].getAttribute("data-status"); 
    if ( status == "open" ) { 
        // grab the data 
    }
}

例:削除


    
        hello world
        hello dolby
        hello dot
        hello bean
    
    
        var div = document.getElementById("myDiv");
        console.log(div); //(7)
        var p = document.getElementsByTagName("p");
//  for    for (var i=0,len=p.length;i<len;i++) {div.removeChild(p[0]);}  ；   p        len，  len       ，              0  ，                 。
        for (var i=p.length;i--;){
            div.removeChild(p[i]);
        }
        console.log(p); //(8)

getElementByClassNameと同様に、ダイナミックコレクションを返すため、ループ削除結果も同じです.

//(7)    


//(8)    
[] //  HTMLCollection  ，   0

4、getElementsByName()：

接收一个参数：带有给定name属性值的元素，返回一个动态NodeList类数组对象，对象中包含以当前元素为根节点，所有指定name属性值的子元素。最常用的场景是取得单选按钮。
示例：




 ...







var up_forms = document.getElementsByName("up");
console.log(up_forms[0].tagName); // returns "FORM"

例:削除


    
        red
        green
        blue
    
    
        var div = document.getElementById("myDiv");
        console.log(div); //(9)
        var ipt_favCol = document.getElementsByName("fav-color");
        for (var i = ipt_favCol.length; i--;) {
            div.removeChild(ipt_favCol[i]);
        }
        console.log(ipt_favCol); //(10)

getElementByNameはNodeListダイナミックコレクションを返します

//(9)    

"red"
"green"
"blue"


//(10)    
[] //  NodeList  ，   0

5、querySelector()：

パラメータを受信します.1つ以上のCSSセレクタを含む文字列(複数のセレクタがカンマで区切られています)、指定したCSSセレクタに一致する最初の要素ノード(CSSダミー要素を選択できません)を返し、一致するノードが見つからない場合nullを返します.構文:

element = document.querySelector(selectors);

例:強力な選択方法


     //        



    var el = document.querySelector("div.user-panel.main input[name=login]");

例:一致するIDまたはセレクタがCSS構文に合致しない場合(たとえば、コロンまたはスペースが適切に使用されていない場合)、これらの文字を逆スラッシュで変換する必要があります.JavaScriptでは、バックスラッシュがエスケープ文字であるため、テキスト列を入力する場合は、2回エスケープする必要があります(1回はJavaScript文字列エスケープ、もう1回はquerySelectorエスケープ):





  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    //        

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') //      div

  document.querySelector('#foo:bar')    //        
  document.querySelector('#foo\\:bar')  //      div

示例：删除

    
        hello world
        hello dolby
        hello dot
        hello bean
    
    
        var div = document.getElementById("myDiv");
        console.log(div); //(11)
        var p = document.querySelector("p");
        div.removeChild(p);
        console.log(p); //(12)

//(11)    
    
        hello dolby
        hello dot
        hello bean
    

//(12)    
        hello world //    ，querySelector

6、querySelectorAll()：

パラメータを受信します.1つ以上のCSSセレクタを含む文字列(複数のセレクタがカンマで区切られています)は、指定したCSSセレクタに一致するすべてのノードを含む静的NodeListオブジェクトのセットを返します.要素ノードの変化は結果にリアルタイムで反映されません.パラメータにCSSダミー要素が含まれている場合は、空のオブジェクトセットが返されます.構文:

elementList = document.querySelectorAll(selectors);

例:

var matches = document.querySelectorAll("div.note, div.alert");

例:削除

    
        hello world
        hello dolby
        hello dot
        hello bean
    
    
        var div = document.getElementById("myDiv");
        console.log(div); //(13)
        var p = document.querySelectorAll("p");
        for (var i = 0; i < p.length; i++) {
            div.removeChild(p[i]);
        }
        console.log(p); //(14)

//(13)    
    
//(13)    
    [p.myP,p.myP,p.myP,p.myP] //      NodeList  ，

7、elementFromPoint()：

接收两个参数：分别是相对于当前窗口左上角的横纵坐标，单位为CSS像素，不需要加单位；返回位于页面指定位置的元素，如果该元素不可返回（如滚动条）则返回它的父元素，如果坐标值无意义（如负值）则返回null。
语法

var element = document.elementFromPoint(x, y);

例:




elementFromPoint example


function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}




Some text here

この要素を取得する方法はあまり使われていないので、あまり紹介しません.
上の頭を見て大きくなったのではないでしょうか.何が動的なのか、何が静的なのか、覚えやすい方法はありませんか.ありますよ.
簡単に理解すると、getElementByシリーズは動的HTML Collectionの集合を返し、動的集合のDOM構造の変化は保存されたオブジェクトにリアルタイムで反映され、querySelectorシリーズは静的なNodeListオブジェクトを返し、DOMのいかなる操作にも影響を与えないスナップショットである.

では、NodelistとHTML Collectionの違いは何でしょうか。

同じ点:

両方ともクラス配列オブジェクト

である.

両方ともlength属性

を有する

両方ともitem()メソッド

を有する

は両方ともダイナミックな要素の集合であり、アクセスするたびにドキュメントを再クエリーする必要があります.

君はきっと好奇心があるに違いない.前はquerySelectorシリーズが静的なNodeListオブジェクトを返すって言ったでしょ?どうしてまたダイナミックになったの?理由:仕様ではquerySelectorAllに対して、静的なNodeListオブジェクトを返す必要があることを明確に要求しています.Chromeでは次のようになります.

document.querySelectorAll('a').toString();    // return "[object NodeList]"
document.getElementsByTagName('a').toString();    // return "[object HTMLCollection]"

相違点:

NodeListオブジェクトには、Element、Text、Commentなどのドキュメント内のすべてのノードが含まれます.HTML Collectionオブジェクトには、ドキュメント内のElementノードのみが含まれます.

参考資料:

document.getElementById

document.getElementByIClassName

document.getElementByITagName

document.getElementByIName

document.querySelector

document.querySelectorAll

document.elementFromPoint

javascriptの動的集合、NodeList、HTML Collection、NamedNodeMap

を深く理解する

静的NodeListと動的NodeListの違い

querySelectorAllメソッドはgetElementsByシリーズメソッドと比較してどのような違いがありますか?

JavaScript基礎構文2

Docker、仮想化の概要理解〜HelloWorldまでやってみる