JavaScript DOM Action tables and styles _ basics

A table of operations

The <table> tag is one of the most complex structures in HTML, and we can create it by using the DOM, or htmldom to manipulate it;

Use DOM to create tables;
 var table = document.createelement (' table ');
 Table.border = 1;
 Table.width =;

 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 Th2 = document.createelement (' th ');

 Tr.appendchild (Th1);
 Th1.appendchild (document.createTextNode (' name '));
 Tr.appendchild (Th2);
 Th2.appendchild (document.createTextNode (' age '));

 Document.body.appendChild (table);

Tables are more complex and more hierarchical, using the previous DOM to get an element is cumbersome; recommend using Htmldom;
Introduction to Htmldom Properties and methods
Description of property or method
The caption preserves the reference of the <caption> element;
The tbodies preserves the Htmlcollection collection of the <tbody> elements;
TFoot keeps a reference to the <tfoot> element;
THead keeps a reference to the <thead> element;
Rows preserve a htmlcollection set of the <tr> elements;
Createthead () creates <thead> elements, and returns a reference;
Createtfoot () creates <tfoot> elements, and returns a reference;
Createcpation () creates <caption> elements, and returns a reference;
Deletethead () delete <thead> element;
Deletetfoot () delete <tfoot> element;
Deletecaption () delete <caption> element;
DeleteRow (POS) deletes the specified line;
InsertRow (POS) inserts a row into the rows collection at the specified location;

<tbody> elements added properties and methods
Rows preserve the htmlcollection of the Bank of <tbody> elements;
DeleteRow (POS) deletes the row at the specified location;
InsertRow (POS) inserts a row into the rows collection at the specified location;

<tr> elements added properties and methods
Cells holds the htmlcollectioin set of cells in the <tr> element;
Deletecell (POS) deletes the cell at the specified location;
InsertCell (POS) inserts a cell into the cells collection at the specified location and returns a reference;

Htmldom get the <caption> of the form
alert (Table.caption.innerHTML); Get the content of caption;

PS: In a table <thead> and <tfoot> are unique, can only have one;
And <tbody> is not unique, can be multiple, so that the last return of <thead> and <tfoot> are element references, and <tbody> is the element set;

Two-operation style

CSS as an aid to (X) HTML, can enhance the display of the page, but not every browser can support the latest CSS capabilities;
The ability of CSS is closely related to the DOM level, so it is necessary to detect the level of the current browser's ability to support CSS.
There are 3 different ways to define styles in HTML:
(1). Use the style attribute to define styles for specific elements;
(2). Use the <style/> element to define the embedded style;
(3). Through <link/> elements including external style sheet files, 1//DOM1 level to achieve the most basic document processing, DOM2 and DOM3 on this basis to add more interactive capabilities;
DOM2 adds CSS programmatic access and changes CSS style information;
Detect whether the browser supports DOM1 level CSS capabilities or DOM2 level CSS capabilities
Alert (' DOM1 level CSS capabilities: ' +document.implementation.hasfeature (' css ', ' 2.0 '));
Alert (' DOM2 level CSS capability: ' +document.implementation.hasfeature (' CSS2 ', ' 2.0 '));

1. Accessing the style of an element

(1). style Attributes/objects
Any HTML element tag will have a generic attribute: style, which returns the Cssstyledeclaration object;
CSS properties and JavaScript calls
CSS Properties JavaScript call
Color Style.color
Font-size style.fontsize
Float style.cssfloat (non IE)
Float Style.stylefloat (IE)
var box = document.getElementById (' box ');
Box.style; Cssstyledecaration;
Box.style.color; Red
Box.style.fontSze; 20px;
Float operation compatible with IE;
typeof box.style.cssFloat!= ' undefined '? Box.style.cssFloat = ' right ': box.style.styleFloat = ' right ';

    DOM2-level style specification defines properties and methods for a Style object
property or method                         Description
csstext                  Access or set CSS code in style;
    box.style.csstext;                      //Get CSS code; The
   //Ps:style property can only get CSS styles within the row and cannot be retrieved for the other two forms of inline <style> and link <link> methods;

(2). After the calculated style: Getcomputedstyle/currentstyle
Although you can get a CSS style for a single value by using style, the style information for a composite value needs to be obtained by calculating the style;
DOM2-level style, Window object provides the getComputedStyle () method: Receives two parameters, the style element that needs to be computed, and pseudo class (: hover), or null if there is no pseudo class;
The getComputedStyle () method returns a Cssstyledeclaration object (the same type as the Style property), which contains all the calculated styles of the current element;
Ps:ie does not support this DOM2-level approach, but there is a similar attribute that can use the Currentstyle property;
var box = document.getElementById (' box ');
var style = window.getComputedStyle? window.getComputedStyle (box,null): null | | Box.currentstyle;
alert (Style.color); Colors in different browsers will have different RGB () format;
alert (Style.border); different browser results;
alert (sytle.fontfamily); Calculates the style value that displays the composite;
The Ps:border attribute is a composite property, so it is shown in Chrome, Firefox is empty, ie is undefined;
Therefore, Dom in the acquisition of CSS, it is best to use the complete writing compatibility best; for example: Border-top-color;

2. Operation Style Sheet

//Use the Style property to set the CSS style within the row, which is the most common method by ID and class invocation;         Box.classname = ' red ';
Set the style by classname keywords;
  Add multiple ClassName Functions://To determine whether this 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 present; function Removeclass (element,classname) {if (Hasclass (Element,classname)) {element.classname = Element.classname.
    Replace (new RegExp (\\s|^) ' +classname+ ' (\\s|$) ');
Use the style attribute only to get and set the style within the row; 
Then learn the getComputedStyle and Currentstyle, can only get but not set; 

(1). Get Cssstylesheet
//Cssstylesheet type can be contained by <link> element and <style> element style sheet;
Document.implementation.hasFeature (' StyleSheet ', ' 2.0 '); Whether to support DOM2-level style sheets;
document.getElementsByTagName (' link ') [0];//htmllinkelement;
document.getElementsByTagName (' style ') [0];//htmlstyleelement; The
//The two elements themselves return the htmllinkelement and htmlstyleelement types; But the Cssstylesheet type is more general;
//Get this type non ie use sheet attribute, ie use stylesheet;
var link = document.getelementsbytagname (' link ') [0];
var sheet = Link.sheet | | link.stylesheet;//get cssstylesheet;

(2). Properties and methods of Cssstylesheet objects
Cssstylesheet Property or method
Description of property or method
Disabled gets and sets whether the style sheet is disabled;
If href is contained through <link>, the stylesheet is a URL, otherwise null;
A collection of all media types supported by the media style sheet;
Ownernode points to a pointer with the current style sheet;
Parentstylesheet @import Import, get the parent CSS object;
The value of Title attribute in title Ownernode;
Type style sheet type string;
The Cssrules style sheet contains a collection of style rules that IE does not support; ie for rules;12 ownerrule @import Import, point to the rules of import, IE does not support;
DeleteRule (index) Removes the rule specified in the Cssrules collection, IE is not supported;
Insertrule (rule,index) Inserts the rule string to the specified position in the Cssrules collection, IE is not supported;

sheet.disabled; False Can be set to true;
Sheet.href; The URL of the CSS;
Sheet.media; Medialist, set;
Sheet.title; Gets the value of the title attribute;
Sheet.cssrules; Cssrulelist, style sheet rule collection;
Sheet.deleterule (0); Deletes the first style rule;
Sheet.insertrule ("Body {background-color:red}", 0); Adds a style rule to the first position;

Ps:ie properties and methods are not supported, IE has an alternative version;
Sheet.rules; Replace 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 you can get Cssstylesheet type, there is also a way to get it through the stylesheets attribute of the document;
Document.stylesheets; Stylesheetlist, set;
var sheet = docuemnt.stylesheets[0]; Cssstylesheet, the first style sheet object;

Add CSS rules and compatible with all browser functions;
  var sheet = docuemnt.stylesheets[0];
  Insertrule (sheet, "body", "background-color:red;", 0);
  function Insertrule (sheet,selectortext,csstext,postion) {
    //if non-ie;
    if (sheet.insertrule) {
      Sheet.insertrule (selectortext+ "{" +csstext+ "}", postion);
    If the IE
    }else if (sheet.addrule) {
      sheet.addrule (selectortext,csstext,postion);
    }
  }

(3). A list of Cssrules style sheet rule collections;
//Through the Cssrules property (not IE) and the rules attribute (IE), we can get a list of the rule sets of the style sheet;
So we can do the specific operation of each style;
var sheet = docuemnt.stylesheets[0]; Cssstylesheet;
var rules = Sheet.cssrules | | Sheet.rules; Cssrulelist, a list of rule sets for style sheets;
var rule = rules[0]; Cssstylerule, the first rule of the style sheet;
Properties of Cssrules
Attribute description
Csstext get the text corresponding to the current overall rule, IE does not support;
Parentrule @import imported, the return rule or null,ie is not supported;
Parentstylesheet The current rule's style sheet, IE is not supported;
Selectortext gets the selector text of the current rule;
Style returns the Cssstyledeclaration object, which can get and set the style;
Type represents a constant value for a rule, and for a style rule, the value is 1,ie not supported;

Rule.csstext; The style text of the current rule;
Rule.selectortext; #box; a selector for a style;
Rule.style.color; Red; Get the concrete style value;
Rule.style.backgroundColor = "green"; Modifying the style information of a rule;

Three summary

The DOM2-level style module is developed primarily for the style information of an action element, and its characteristics are as follows:
(1). Each element has an associated style object that can be used to determine and modify the style within 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 similar methods of Currentstyle ();
(4). The style sheet can be accessed through the Document.stylesheets collection; 6//(5). Style Sheet rule Collection List cssrules;1//three ways to manipulate CSS:

In the first style line, readable and writable;
The second inline/inline and link, using getComputedStyle or currentstyle, can be read and not writable;
The third type of inline and connection, using Cssrules or rules, can be read and writable;