Bagaimana untuk melintasi pokok DOM mengikut urutan dalam kemahiran javascript_javascript

Pokok DOM ialah struktur pepohon yang terdiri daripada semua nod dalam dokumen (nod elemen, nod teks, nod ulasan, dll. Penghuraian dan pembinaan pepohon DOM ialah fungsi utama untuk dilaksanakan oleh penyemak imbas). Memandangkan pokok DOM ialah struktur pokok, kita boleh menggunakan kaedah yang berkaitan untuk melintasi struktur pokok untuk melintasi pokok DOM Pada masa yang sama, modul "Traversal" dalam DOM2 menyediakan dua jenis baharu, supaya DOM boleh dengan mudah. dilaksanakan.

Nota: Lima kaedah dalam artikel ini adalah kesemua kaedah prapesan traversal DOM (depth-first traversal) dan hanya fokus pada jenis Elemen.

1 Gunakan antara muka asas dalam DOM1 untuk melintasi pepohon DOM secara rekursif

DOM1 menyediakan beberapa API untuk jenis asas Nod, yang melaluinya beberapa operasi DOM asas boleh diselesaikan. Kod untuk melintasi pepohon DOM secara rekursif adalah agak mudah Idea terasnya adalah untuk memproses nod semasa dahulu, dan kemudian melintasi nod anak secara rekursif dari kiri ke kanan Kod adalah seperti berikut:

/**
  * 使用递归的方式先序遍历DOM树
  * @param node 根节点
  */
 function traversal(node){
   //对node的处理
   if(node && node.nodeType === 1){
     console.log(node.tagName);
   }
   var i = 0, childNodes = node.childNodes,item;
   for(; i < childNodes.length ; i++){
     item = childNodes[i];
     if(item.nodeType === 1){
       //递归先序遍历子节点
       traversal(item);
     }
   }
 }

2 Gunakan antara muka asas DOM1 untuk melintasi pepohon DOM secara berulang

Berbeza dengan kaedah pertama, kali ini kaedah lelaran digunakan untuk merentasi pokok DOM. Menggunakan lelaran untuk melintasi pepohon DOM adalah agak rumit Perkara utama ialah menggunakan timbunan untuk mengekalkan laluan akses nod Apabila nod semasa diproses, nod anak Elemen pertama digunakan sebagai nod akar daripada kitaran seterusnya, dan mengikut Tolak nod elemen anak lain nod semasa ke tindanan mengikut urutan dari kanan ke kiri. Jika nod semasa tidak mempunyai nod anak Elemen, pop nod Elemen daripada tindanan sebagai nod akar kitaran seterusnya sehingga nod akar tidak boleh diperolehi. Kodnya adalah seperti berikut:

/**
 * 使用迭代的方式先序遍历DOM树
 * @param node 根节点
 */
function traversalIteration(node){
  var array = [], i = 0,k = 0,elementCount = 0, len = 0, childNodes,item;
  while(node != null){
    console.log(node.tagName);
    childNodes = node.childNodes;
    len = node.childNodes.length;
    elementCount = 0;
    if(len > 0){
      for(i = 0; i < len; i++){
        item = childNodes[i];
        if(item.nodeType === 1){
          elementCount++;
          node = item;
          break;
        }
      }
      for(k = len -1 ; k > i; k--){
        item = childNodes[k];
        if(item.nodeType == 1){
          elementCount++;
          array.push(item);
        }
      }
      if(elementCount < 1){
        node = array.pop();
      }
    }else{
      node = array.pop();
    }
  }
}

3 Gunakan API Element Traversal sambungan DOM untuk melintasi pepohon DOM secara rekursif

DOMElement Traversal API menyediakan beberapa antara muka untuk memudahkan traversal DOM, menjadikannya lebih mudah untuk mendapatkan nod anak Elemen sesuatu nod. Dalam Bahagian 2 "Sambungan DOM: Peningkatan Lanjut API DOM [Ringkasan - Bahagian 1]", API Element Traversal sambungan DOM diperkenalkan. Kodnya adalah seperti berikut:

/**
 * 使用DOM扩展的Traversal API提供的新的接口先序遍历DOM树
 * @param node 根节点
 */
function traversalUsingTraversalAPI(node){
  if(node && node.nodeType === 1){
    console.log(node.tagName);
  }
  var i = 0,len = node.childElementCount, child = node.firstElementChild;
  for(; i < len ; i++){
    traversalUsingTraversalAPI(child);
    child = child.nextElementSibling;
  }
}

4. Gunakan NodeIterator

Modul "Traversal" DOM2 menyediakan jenis NodeIterator, yang boleh digunakan untuk melaksanakan traversal prapesanan dengan mudah bagi pepohon DOM Bahagian 12.3.1 "Pengaturcaraan Lanjutan JavaScript, Edisi Ketiga" memperkenalkan jenis ini terus Kod diberikan seperti berikut:

/**
 * 使用DOM2的"Traversal"模块提供的NodeIterator先序遍历DOM树
 * @param node 根节点
 */
function traversalUsingNodeIterator(node){
  var iterator = document.createNodeIterator(node, NodeFilter.SHOW_ELEMENT,null,false);
  var node = iterator.nextNode();
  while(node != null){
    console.log(node.tagName);
    node = iterator.nextNode();
  }
}

5. Gunakan TreeWalker

Jenis TreeWalker boleh dikatakan sebagai versi dipertingkatkan daripada jenis NodeIterator Bahagian 12.3.2 "Pemrograman Lanjutan JavaScript, Edisi Ketiga" memperkenalkan jenis ini secara langsung Kami juga memberikan kod di sini seperti berikut:

/**
 * 使用DOM2的"Traversal"模块提供的TreeWalker先序遍历DOM树
 * @param node 根节点
 */
function traversalUsingTreeWalker(node){
  var treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT,null,false);
  if(node && node.nodeType === 1){
    console.log(node.tagName);
  }
  var node = treeWalker.nextNode();
  while(node != null){
    console.log(node.tagName);
    node = treeWalker.nextNode();
  }
}

Di atas adalah kaedah javascript untuk melintasi pokok DOM untuk berkongsi dengan anda. Saya harap ia akan membantu pembelajaran semua orang.