JavaScript DOM operation forms and styles_Basic knowledge

1 Operation form

tag is the most complex structure in HTML. We can create and generate it through DOM, or operate it through HTMLDOM;

// 使用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);

// The table is complex and has many levels. It will be troublesome to use the previous DOM to obtain a certain element; it is recommended to use HTMLDOM;
Introduction to HTMLDOM properties and methods
Property or method Description
caption holds a reference to the

elements;
tFoot holds a reference to the element;
tHead holds a reference to the element;
rows holds an HTMLCollection of elements;
createTHead() creates the element and returns the reference;
createTFoot() creates the element and returns the reference;
createCpation() creates the element;
deleteTFoot() deletes the element;
deleteCaption() deletes the element
rows holds an HTMLCollection of rows in the element;
deleteRow(pos) deletes the row at the specified position;
insertRow(pos) inserts a row into the specified position in the rows collection;

Attributes and methods added to the element
cells holds the HTMLCollection collection of cells in the element;
deleteCell(pos) deletes the cell at the specified position;
insertCell(pos) inserts a cell into the specified position of the cells collection and returns a reference;

//HTMLDOM gets the

and are unique in a table, there can only be one;
// And is not unique, it can be multiple, so that the finally returned and are element references; and is a collection of elements;

2 Operation Style

As an auxiliary to (X)HTML, CSS can enhance the display effect of the page, but not every browser can support the latest CSS capabilities;
CSS capabilities are closely related to DOM levels, so it is necessary to detect the level of CSS capabilities supported by the current browser;
There are three ways to define styles in HTML:
(1). Use the style attribute to define styles for specific elements;
(2). Use the

element;
tBodies holds an HTMLCollection of

element and returns the reference;
deleteTHead() deletes

element;
deleteRow(pos) deletes the specified row;
insertRow(pos) inserts a row into the specified position in the rows collection;

Attributes and methods added by the

of the table alert(table.caption.innerHTML); // Get the content of the caption;

// PS: