DOM拡張コンテンツメモ

セレクタAPI

コアコンテンツは、プログラマがcssセレクタを介してDOMのノード1に位置決めできるようにすることである.querySelector()メソッドこのメソッドはcssセレクタを受信し、そのセレクタに一致する**の最初の*要素を返し、一致しないエレメントはNULLを返します.また、Element*タイプでquerySelector()メソッドを呼び出すと、その要素の子孫要素でのみ一致する要素が検索されます.

//  body   
var body = document.querySelector("body");
//  ID myDiv   
var myDiv = document.querySelector("#myDiv")
//    "selected"      
var selected = document.querySelector(".selected");
//    "button"    img  
var img = document.body.querySelector("img.button");

2.querySelectorAll()メソッドが受信するパラメータは**querySelector()メソッドと同じです.このメソッドは、一致するすべての要素を返し、NodeListのインスタンスです.

//   
      （   getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//    “selected”     
var selecteds = document.querySelectorAll(".selected");
 
 
   NodeList                       ，     item()  。
 
 
  の  について
 
 
                        ：
 
 

    
1
    
2
    
3

  
  のコードについてdivにアクセスするサブノードの は7つかもしれません.  /スペースはテキストノードとして されるため、   はhtmlコードを  に  することができます.
1
2
3
  
  には、ここでは、DOMが5つの  childElementCountを  する の  が  されている.テキストノードおよび  を まないサブ  を す  firseElementChild: 1のサブ  を す.firstChildの   lastElementChild: 1のサブ  を す.lastChildの   previousElementSibling: 1のサブ  を す.previousSiblingの   nextElementSibling: 1のサブ  を す.nextSiblingの   は、  firstChildを  していた  のように   に  されています.
クラス  の  
  
1.getElementsByClassName()メソッドこのメソッドは、1つ  のクラス を む   のパラメータを  し、***  クラスのすべての  を つNodeListを します.  のクラス が  される  、クラス の    は  ではありません.
//        "username" "current"   ，          
var allCurrentUsernames = document.getElementsByClassName("username current");
//  ID "myDiv"        "selected"     
var selected =document.getElementById("myDiv").getElementsByClassName("selected"):
  
2.classList  className  は   であるため、  のクラス を  する に  に  に える  であっても     を  することで  する  があります.しかしHTML 5はすべての  にclassListという  を  している.このプロパティは、 しいコレクションタイプDOMTokenListのインスタンスです.この しい  タイプについては、このノートを いた も めてだったので、 のノートに  して  するはずです.ここではclassListプロパティ  のいくつかの  について  します.add(value):  された    をリストに  し、すでに  する  はcontains(value)を  しません.リストにこの がすでに  する  はTRUEに り、そうでない  はFALSE remove(value)に ります.リストから  された   toggle(value)を  します.リストに  された が  する  は  します.そうでない  は、    を  します.
//  "disabled" 
div.classList.remove("disabled");
//  "current" 
div.classList.add("current");
//  "user" 
div.classList.toggle("user");
  
  
  
  さはJavaScriptの  について、あるいはすべての   に をもたらし、 の が  に える  でも くの  を やして  しなければならない.だから まで らなかった  の  と ましが に  になった.  をつけるのも、  の  を る  の つだろう.