JavaScriptDOM operation tables and styles _ basic knowledge

This article mainly introduces JavaScriptDOM operation tables and styles. For more information, see 1. operation table

// Tables are complex and have many layers. It is troublesome to use the previous DOM to obtain an element. HTMLDOM is recommended;
Introduction to HTMLDOM attributes and Methods
Attribute or method description
Caption saves

// HTMLDOM

2. Operation Style

As an aid to (X) HTML, CSS can enhance the page display effect, but not every browser can support the latest CSS capabilities;
The CSS capability is closely related to the DOM level, so it is necessary to check the level of CSS capability supported by the current browser;
There are three ways to define styles in HTML:
(1). Use the style feature to define styles for specific elements;
(2). UseElements define embedded styles;
(3). Pass The element contains an external style table file. 1 // At the DOM1 level, the most basic document processing is achieved. On this basis, DOM2 and DOM3 provide more interaction capabilities;
DOM2 adds CSS programming access and changes CSS style information;
Checks whether the browser supports DOM1-level CSS or DOM2-level CSS.
Alert ('dom1-level CSS capability: '+ document. implementation. hasFeature ('css', '2. 0 '));
Alert ('dom2 level CSS capability: '+ document. implementation. hasFeature ('css2', '2. 0 '));

1. Access element styles

(1). style Features/objects
// Any HTML element tag has a common attribute: style, which returns the CSSStyleDeclaration object;
CSS attributes and JavaScript calls
JavaScript call of CSS attributes
Color style. color
Font-size style. fontSize
Float style.css Float (non-IE)
Float style. styleFloat (IE)
Var box = document. getElementById ('box ');
Box. style; // CSSStyleDecaration;
Box. style. color; // red;
Box. style. fontSze; // 20px;
// Compatible with float operations of IE;
Typeof box.style.css Float! = 'Undefined '? Box.style.css Float = 'right': box. style. styleFloat = 'right ';

DOM2-level style specifications define attributes and methods for style objects
Attribute or method description
CssText accesses or sets CSS code in the style;
Box.style.css Text; // gets the CSS code;
// PS: The style attribute can only obtain CSS styles in the row. For the other two forms of inline

// Use DOM to create a table; var table = document. createElement ('table'); table. border = 1; table. width = 300; var caption = document. createElement ('caption '); table. appendChild (caption); caption. appendChild (document. createTextNode ('personnel table'); var thead = document. createElement ('thead'); table. appendChild (thead); var tr = document. createElement ('tr '); thead. appendChild (tr); var th1 = document. createElement ('th'); var Th1 = document. createElement ('th'); tr. appendChild (th1); th1.appendChild (document. createTextNode ('name'); tr. appendChild (Th1); th2.appendChild (document. createTextNode ('age'); document. body. appendChild (table );

A tag is the most complex structure in HTML. We can use DOM to create and generate it, or HTMLDOM to operate on it; HTMLCollection set of elements;TFoot saves Element reference;THead saves Element reference;Rows saves HTMLCollection set of elements;Create createTHead () Element and return a reference;CreateTFoot () Creation Element and return a reference;CreateCpation () Creation Element;DeleteTFoot () Delete Element;DeleteCaption () Delete Attributes and methods added to an elementRows saves HTMLCollection of row in the element;DeleteRow (pos) deletes rows at the specified position;InsertRow (pos) inserts a row into the specified position in the rows set; Attributes and methods added to an elementCells save HTMLCollectioin set of cells in the element;DeleteCell (pos) deletes a cell at a specified position;InsertCell (pos) inserts a cell into the specified position of the cells set and returns a reference; And It is unique and can only have one;// While It is not unique. It can be multiple, resulting in the final return And Is element reference; while Is a collection of elements;

Element reference;
TBodies

Element and return a reference;
DeleteTHead () Delete

Element;
DeleteRow (pos) deletes the specified row;
InsertRow (pos) inserts a row into the specified position in the rows set;

Alert (table. caption. innerHTML); // obtain the caption content;

// PS: In a table