JavaScript DOM operation table and Style

JavaScript DOM operation table and Style

1. operation table

<Table> A tag is the most complex structure in HTML. We can create it Through DOM or operate it through HTMLDOM;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// 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 2nd = document. createElement ('th ');   Tr. appendChild (th1 ); Th1.appendChild (document. createTextNode ('name ')); Tr. appendChild (2nd ); Th2.appendChild (document. createTextNode ('age '));   Document. body. appendChild (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 stores the reference of the <caption> element;
TBodies stores the HTMLCollection set of <tbody> elements;
TFoot stores references to <tfoot> elements;
THead stores references to <thead> elements;
Rows stores the HTMLCollection set of <tr> elements;
CreateTHead () creates the <thead> element and returns a reference;
CreateTFoot () creates the <tfoot> element and returns a reference;
CreateCpation () creates the <caption> element and returns a reference;
DeleteTHead () deletes the <thead> element;
DeleteTFoot () deletes the <tfoot> element;
DeleteCaption () deletes the <caption> element;
DeleteRow (pos) deletes the specified row;
InsertRow (pos) inserts a row into the specified position in the rows set;

<Tbody> attributes and methods added to an element
Rows stores the HTMLCollection of the row in the <tbody> element;
DeleteRow (pos) deletes rows at the specified position;
InsertRow (pos) inserts a row into the specified position in the rows set;

<Tr> attributes and methods added to an element
Cells stores the HTMLCollectioin set of cells in the <tr> 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;

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

// PS: in a table, <thead> and <tfoot> are unique and can only have one;
// The <tbody> is not unique and can be multiple. As a result, the <thead> and <tfoot> returned are element references, while the <tbody> is a set of elements;

 

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). Use the <style/> element to define an embedded style;
(3 ). the <link/> element contains an external style table file. 1 // The DOM1 level achieves the most basic document processing, and the 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. The <style> and <link> methods in the other two forms cannot be obtained;

(2). Calculated style: getComputedStyle/currentStyle
// Although the CSS style of a single value can be obtained through the style, the style information of the composite value must be obtained by calculating the style;
// DOM2-level style. The getComputedStyle () method is provided under the window object. The getComputedStyle () method receives two parameters, the style elements to be calculated, and the pseudo class (: hover). If there is no pseudo class, then null;
// The getComputedStyle () method returns a CSSStyleDeclaration object (same as the type of the style attribute), which contains all the calculated styles of the current element;
// PS: IE does not support this DOM2-level method, but there is a similar property that can use the currentStyle attribute;
Var box = document. getElementById ('box ');
Var style = window. getComputedStyle? Window. getComputedStyle (box, null): null | box. currentStyle;
Alert (style. color); // The color varies with the rgb () format in different browsers;
Alert (style. border); // different results of different browsers;
Alert (sytle. fontFamily); // calculate and display the composite style value;
// PS: The border attribute is a comprehensive attribute, so it is displayed in Chrome. Firefox is empty, and IE is undefined;
// Therefore, when DOM obtains CSS, it is best to use the complete writing method with the best compatibility; for example: border-top-color;

2. Operation Style Sheet

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// You can use the style attribute to set the CSS style in the row. Calling by id and class is the most common method; Box. className = 'red'; // use the className keyword to set the style; // Add multiple className functions: // Determine whether the class exists; Function hasClass (element, className ){ Return element. className. match (new RegExp ('(\ s | ^)' + className + '(\ s | $ )')); } // Add a class, if it does not exist; Function addClass (element, className ){ If (! HasClass (element, className )){ Element. className + = "" + className; } } // Delete a class, if any; Function removeClass (element, className ){ If (hasClass (element, className )){ Element. className = element. className. replace (new RegExp ('(\ s | ^)' + className + '(\ s | $ )'),''); } } // Previously, the style attribute was used. Only the style in the row can be obtained and set; // Then the getComputedStyle and currentStyle learned can only be obtained but cannot be set;

(1). Obtain CSSStyleSheet
// For the CSSStyleSheet type, you can use the <link> element and the style table contained in the <style> element;
Document. implementation. hasFeature ('stylesheet ', '2. 0'); // whether the DOM2 style sheet is supported;
Document. getElementsByTagName ('link') [0]; // HTMLLinkElement;
Document. getElementsByTagName ('style') [0]; // HTMLStyleElement;
// The two elements return the HTMLLinkElement and HTMLStyleElement types, but the CSSStyleSheet type is more common;
// This type is not returned. IE uses the styleSheet attribute instead;
Var link = document. getElementsByTagName ('link') [0];
Var sheet = link. sheet | link. styleSheet; // obtain CSSStyleSheet;

(2). attributes and methods of CSSStyleSheet objects
CSSStyleSheet attributes or methods
Attribute or method description
Disabled: gets and sets whether the style sheet is disabled;
If href is included through <link>, the style sheet is URL; otherwise, the style sheet is null;
A set of all media types supported by the media style sheet;
OwnerNode points to the pointer that owns the current style table;
When parentStyleSheet @ import is imported, the parent CSS object is obtained;
The value of the title attribute in the title ownerNode;
Type style table type string;
The cssRules style table contains a set of style rules, which is not supported by IE; where IE is rules; 12 ownerRule @ import indicates the imported rule, which is not supported by IE;
DeleteRule (index) deletes the rule at the specified position in the cssRules set, which is not supported by IE;
InsertRule (rule, index) inserts a rule string at a specified position in the cssRules set, which is not supported by IE;

Sheet. disabled; // false; it can be set to true;
Sheet. href; // css URL;
Sheet. media; // MediaList, set;
Sheet. title; // obtain the value of the title attribute;
Sheet.css Rules; // CSSRuleList, a set of style sheet Rules;
Sheet. deleteRule (0); // Delete the first style rule;
Sheet. insertRule ("body {background-color: red}", 0); // Add a style rule at the first position;

// PS: attributes and methods not supported in IE. IE has an alternative version;
Sheet. rules; // replaces the IE version of cssRules;
Sheet. removeRule (0); // Replace the IE version of deleteRule;
Sheet. addRule ("body", "{background-color: red", 0); // replace IE version of insertRule;

// In addition to the method above, the CSSStyleSheet type can be obtained. Alternatively, the document styleSheets attribute can be used to obtain the CSS stylesheet type;
Document. styleSheets; // StyleSheetList, set;
Var sheet = docuemnt. styleSheets [0]; // CSSStyleSheet, the first style sheet object;

1 2 3 4 5 6 7 8 9 10 11 12

// Add CSS rules and be compatible with all browser functions; Var sheet = docuemnt. styleSheets [0]; InsertRule (sheet, "body", "background-color: red;", 0 ); Function insertRule (sheet, selectorText, cssText, postion ){ // If it is not IE; If (sheet. insertRule ){ Sheet. insertRule (selectorText + "{" + cssText + "}", postion ); // For IE } Else if (sheet. addRule ){ Sheet. addRule (selectorText, cssText, postion ); } }

(3). CSSRules style table rule set list;
// Using CSSRules attributes (non-IE) and rules attributes (IE), we can obtain a list of rule sets in the style sheet;
// Then we can perform specific operations on each style;
Var sheet = docuemnt. styleSheets [0]; // CSSStyleSheet;
Var rules = sheet.css Rules | sheet. rules; // CSSRuleList, rule set list of the style sheet;
Var rule = rules [0]; // CSSStyleRule, the first rule of the style sheet;
CSSRules attributes
Attribute description
CssText obtains the text corresponding to the current overall rule, which is not supported by IE;
ParentRule @ import: The returned rule or null is not supported by IE;
The style table of the current parentStyleSheet rule, which is not supported by IE;
SelectorText: obtains the text of the selector of the current rule;
Style returns the CSSStyleDeclaration object. You can obtain and set styles;
Type indicates the constant value of the rule. For style rules, the value is 1, which is not supported by IE;

Rule.css Text; // The style Text of the current rule;
Rule. selectorText; // # box; style selector;
Rule. style. color; // red; obtain the specific style value;
Rule. style. backgroundColor = "green"; // modify the style information of a rule;

Summary

The DOM2 level style module is mainly developed for the style information of operation elements. Its features are as follows:
(1) Each element has an associated style object, which can be used to determine and modify the style in the row;
(2) to determine the calculation style of an element (including all CSS rules applied to it), you can use the getComputedStyle () method;
(3). IE supports the similar method currentStyle ();
(4). You can access the style sheet through the document. styleSheets set; 6 // (5). CSS rules in the style sheet rule set list; 1 // three methods to operate CSS:

The first style is readable and writable in the row;
The second type is intra-row/inner join and link. getComputedStyle or currentStyle is used to make it readable and not writable;
The third type of inner join and connection. cssRules or rules can be read and written;