Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-DOM-Operationsformen und -Stile_Grundkenntnisse

WBOY
Freigeben: 2016-05-16 16:04:20
Original
1008 Leute haben es durchsucht

1 Operationsformular

-Tag ist die komplexeste Struktur in HTML. Wir können es über DOM erstellen und generieren oder über HTMLDOM betreiben

// 使用DOM来创建表格;
 var table = document.createElement('table');
 table.border = 1;
 table.width = 300;

 var caption = document.createElement('caption');
 table.appendChild(caption);
 caption.appendChild(document.createTextNode('人员表'));

 var thead = document.createElement('thead');
 table.appendChild(thead);

 var tr = document.createElement('tr');
 thead.appendChild(tr);

 var th1 = document.createElement('th');
 var th2 = document.createElement('th');

 tr.appendChild(th1);
 th1.appendChild(document.createTextNode('姓名'));
 tr.appendChild(th2);
 th2.appendChild(document.createTextNode('年龄'));

 document.body.appendChild(table);
Nach dem Login kopieren

// Die Tabelle ist komplex und hat viele Ebenen. Die Verwendung des vorherigen DOM zum Abrufen eines bestimmten Elements wird empfohlen Einführung in HTMLDOM-Eigenschaften und -Methoden
Beschreibung der Eigenschaft oder Methode
caption enthält einen Verweis auf das Element
tBodies enthält eine HTMLCollection von

-Elementen;
tFoot enthält einen Verweis auf das
-Element tHead enthält einen Verweis auf das -Element; rows enthält eine HTMLCollection von -Elementen;
createTHead() erstellt das -Element und gibt die Referenz zurück; createTFoot() erstellt das -Element und gibt die Referenz zurück; createCpation() erstellt das -Element;
deleteTFoot() löscht das -Element; deleteCaption() löscht das -Element hinzugefügte Attribute und Methoden
rows enthält eine HTMLCollection von Zeilen im -Element;
deleteRow(pos) löscht die Zeile an der angegebenen Position;
insertRow(pos) fügt eine Zeile an der angegebenen Position in der Zeilensammlung
ein

Dem Element hinzugefügte Attribute und Methoden

Zellen enthält die HTMLCollection-Sammlung von Zellen im

-Element;
deleteCell(pos) löscht die Zelle an der angegebenen Position;
insertCell(pos) fügt eine Zelle an der angegebenen Position der Zellsammlung ein und gibt eine Referenz zurück;
//HTMLDOM ruft die sind in einer Tabelle eindeutig, es kann nur eines geben; // Und ist nicht eindeutig, es können also mehrere Elemente sein, die schließlich zurückgegeben werden;

2 Bedienungsstil

Als Hilfsmittel zu (X)HTML kann CSS den Anzeigeeffekt der Seite verbessern, aber nicht jeder Browser kann die neuesten CSS-Funktionen unterstützen; CSS-Funktionen hängen eng mit den DOM-Ebenen zusammen, daher ist es notwendig, die Ebene der vom aktuellen Browser unterstützten CSS-Funktionen zu ermitteln; Es gibt drei Möglichkeiten, Stile in HTML zu definieren:
(1). Verwenden Sie das Stilattribut, um Stile für bestimmte Elemente zu definieren (2). Verwenden Sie das Element

-Element und gibt die Referenz zurück; deleteTHead() löscht das -Element;
deleteRow(pos) löscht die angegebene Zeile;
insertRow(pos) fügt eine Zeile an der angegebenen Position in der Zeilensammlung
ein
Vom

der Tabelle ab Alert(table.caption.innerHTML); // Den Inhalt der Beschriftung abrufen;


// PS: