Kemahiran DOM tidying_javascript yang biasa digunakan

Kata Pengantar:

html membina pepohon DOM untuk dokumen Pepohon ini terdiri daripada satu siri nod Nod. Ia mentakrifkan struktur dokumen untuk kami.

Jenis nod:

Node.ELEMENT_NODE(1); //Nod elemen lebih biasa digunakan
Node.ATTRIBUTE_NODE(2); //Nod atribut lebih biasa digunakan
Node.TEXT_NODE(3); //Nod teks lebih biasa digunakan
Node.CDATA_SECTION_NODE(4);
Nod.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Nod.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9); //Nod dokumen lebih biasa digunakan
Nod.DOCUMENT_TYPE_NODE(10);
Nod.DOCUMENT_FRAGMENT_NODE(11);
Nod.NOTATION_NODE(12);

Fungsi berkaitan:

1. Dapatkan nod:

document.getElementById('elemen');
document.getElementsByTagName('elemen'); Mengembalikan objek seperti tatasusunan
document.getElementsByName('elemen'); Mengembalikan objek seperti tatasusunan
document.getElementsByClassName('className') Mengembalikan objek seperti tatasusunan, yang tidak disokong oleh IE7 dan ke bawah
document.querySelectorAll('class' | 'element') Mengembalikan objek seperti tatasusunan

2. Nod lintasan

Cari nod anak: element.childNodes Mengembalikan objek seperti tatasusunan
Cari nod anak pertama: element.firstChild
Cari nod anak terakhir: element.lastChild
Cari elemen induk: element.parentNode
Cari elemen adik-beradik sebelumnya: element.previousSibling
Cari elemen adik beradik seterusnya: element.nextSibling

3. Dapatkan maklumat nod

Dapatkan nama label bagi elemen atau nod atribut: elementNode.nodeName
Dapatkan kandungan nod teks: textNode.nodeValue;
Dapatkan dan tetapkan kandungan nod elemen (mungkin mengandungi teg HTML): elementNode.innerHTML
Dapatkan dan tetapkan kandungan teks biasa nod elemen: element.innerText(IE) | element.textContent(FF)
Dapatkan nilai nod atribut: attrNode.getAttribute(AttrName);
Tetapkan nilai nod atribut: attrNode.setAttribute(AttrName,AttrValue);
Dapatkan jenis nod: node.nodeType;
Nod elemen: 1; Nod atribut: 2; Nod teks: 3; Nod dokumen: 9; Nod ulasan: 8;

4. Nod operasi


Cipta nod elemen: document.createElement('elemen');

Cipta nod teks: document.createTextNode('text');

Cipta nod atribut: document.createAttribute('attribute');
Padamkan nod: node.remove();

Padamkan nod anak: parentNode.removeChild(childNode); Sisipkan nod: parentNode.appendChild(childNode); //Sisipkan ke hujung nod induk

parentNode.insertBefore(newNode,existingNode) //Sisipkan di hadapan nod sedia ada; Nod klon: Node.cloneNode([true]) //Melalui benar bermakna salinan dalam
Gantikan nod: parentNode.replaceChild(newNode,oldNode);


Peluasan berkaitan:


1. Disebabkan ketidakserasian antara IE dan penyemak imbas lain dalam memproses DOM, beberapa pemprosesan enkapsulasi mudah diperlukan.

2. Manipulasi gaya elemen DOM

 
//=================
function getElementChildren(element) {
   var children = [],
   oldChildNodes = element.childNodes;
   for(var i=0, len=oldChildNodes.length; i<len; i+=1) {
     if(oldChildNodes[i].nodeType == 1) {
        children.push(oldChildNodes[i]);
     }
   }
 return children;
}
 
//==================
function getElementNext(element) {
   var next = element.nextSibling || null;
     if(next) {
       if(next.nodeType == 1) {
          return next;
       } else {
          return arguments.callee(next);
       }
     } else {
     throw new Error("下一个兄弟元素不存在！");
     }
}
 
//======================
function getElementPrev(element) {
   var prev = element.previousSibling || null;
   if(prev) {
     if(prev.nodeType == 1) {
       return prev;
     } else {
       return arguments.callee(prev);
     }
   } else {
     throw new Error("上一个兄弟元素不存在！");
   }
}
 

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.