JavaScript DOM operation table and Style

Source: Internet
Author: User

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;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.