1 Operation form
The <table> tag is the most complex structure in HTML. We can create and generate it through DOM, or HTMLDOM to operate it;
// Use DOM to create tables; var table = ('table');
= 1;
= 300;
var caption = ('caption');
(caption);
(('Personnel List'));
var thead = ('thead');
(thead);
var tr = ('tr');
(tr);
var th1 = ('th');
var th2 = ('th');
(th1);
(('Name'));
(th2);
(('age'));
(table);
// The table is more complex and has many levels. Using the previous DOM to obtain a certain element will be more troublesome; it is recommended to use HTMLDOM;
Introduction to HTMLDOM properties and methods
Attributes or Method Description
caption holds a reference to the <caption> element;
tBodies saves the HTMLCollection collection of <tbody> elements;
tFoot saves a reference to the <tfoot> element;
tHead saves a reference to the <head> element;
rows saves the HTMLCollection collection of <tr> elements;
createTHead() creates the <head> element and returns the reference;
createTFoot() creates the <tfoot> element and returns the reference;
createCpation() creates the <caption> element and returns the reference;
deleteTHead() deletes the <head> element;
deleteTFoot() deletes the <tfoot> element;
deleteCaption() deletes the <caption> element;
deleteRow(pos) deletes the specified row;
insertRow(pos) Insert a row to the specified position in the rows collection;
Attributes and methods added by <tbody> element
rows saves the HTMLCollection of the row in the <tbody> element;
deleteRow(pos) deletes the row at the specified location;
insertRow(pos) Insert a row to the specified position in the rows collection;
Attributes and methods added by <tr>Element
cells saves the HTMLCollectioin collection of cells in the <tr> element;
deleteCell(pos) Delete the cell at the specified location;
insertCell(pos) Insert a cell to the specified position of the cells collection and return a reference;
// HTMLDOM gets the <caption> of the table
alert(); // Get the content of the caption;
// PS: <head> and <tfoot> are unique in a table, only one can be found;
// And <tbody> is not unique, it can be multiple, which results in the last returned <thead> and <tfoot> are element references; while <tbody> is element collection;
Two 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;
The CSS capability is closely related to the DOM level, so it is necessary to detect the current browser's CSS capability level;
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 the embedded style;
(3). Contains external stylesheet files through the <link/> element; 1 // The DOM1 level realizes the most basic document processing, and DOM2 and DOM3 add more interactive capabilities on this basis;
DOM2 adds CSS programming access methods and changes CSS style information;
Detect whether the browser supports DOM1 level CSS capability or DOM2 level CSS capability
alert('DOM1 level CSS capability:'+('CSS','2.0'));
alert('DOM2 level CSS capability:'+('CSS2','2.0'));
1. Access the style of the element
(1).style attribute/object
// Any HTML element tag will have a common attribute: style, which will return the CSSStyleDeclaration object;
CSS attributes and JavaScript calls
CSS properties
color
font-size
float
float (IE)
var box = ('box');
; // CSSStyleDecaration;
; // red;
; // 20px;
// Compatible with IE float operation;
typeof != 'undefined' ? = 'right' : = 'right';
DOM2-level style specification defines properties and methods for style objects
Attributes or methods
cssText �
; �
// PS:style attribute can only get the CSS styles in the line, but cannot get the other two forms of inline <style> and link <link> methods;
(2). Calculated style: getComputedStyle/currentStyle
// Although the CSS style of a single value can be obtained through style, the style information of the compound value needs to be obtained by calculating the style;
// DOM2-level style, the getComputedStyle() method is provided under the window object: receive two parameters, the style element that needs to be calculated, and the pseudo-class (:hover); if there is no pseudo-class, null;
// getComputedStyle() method returns a CSSStyleDeclaration object; (same type as the style attribute); it 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 property;
var box = ('box');
var style = ? (box,null) : null ||;
alert(); // The colors will have different rgb() formats in different browsers;
alert(); // Different results for different browsers;
alert(); // Calculate the style value of the display compound;
// PS: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 to have the best compatibility; for example: border-top-color;
2. Operation style sheet
// Use the style attribute to set the CSS style within the line, and calling through id and class is the most commonly used method; = 'red'; // Set styles through the className keyword;// Add multiple className functions: // Determine whether this class exists; function hasClass(element,className){
return (new RegExp('(\\s|^)'+className+'(\\s|$)'));
}
// Add a class if it does not exist; function addClass(element,className){
if(!hasClass(element,className)){
+= " "+className;
}
}
// Delete a class, if it exists; function removeClass(element,className){
if(hasClass(element,className)){
= (new RegExp('(\\s|^)'+className+'(\\s|$)'),'');
}
}
// Before using the style attribute, you can only get and set the styles within the line;// Then learngetComputedStyleandcurrentStyle,Only get but not set;
(1). Obtain CSSStyleSheet
// The CSSStyleSheet type can be used to include the style sheets in the <link> element and the <style> element;
('StyleSheet','2.0'); // Whether DOM2-level style sheets are supported;
('link')[0]; // HTMLLinkElement;
('style')[0]; // HTMLStyleElement;
// These two elements themselves return HTMLLinkElement and HTMLStyleElement types; but the CSSStyleSheet type is more general;
// Get this type of non-IE uses sheet attribute, and IE uses styleSheet;
var link = ('link')[0];
var sheet = || ; // Get CSSStyleSheet;
(2).CSStyleSheet object properties and methods
CSSStyleSheet property or method
Attributes or Method Description
disabled Get and set whether the style sheet is disabled;
href if it is included through <link>, the stylesheet is URL, otherwise it is null;
A collection of all media types supported by media style sheets;
ownerNode Pointer to the current stylesheet;
When parentStyleSheet @import is imported, the parent CSS object is obtained;
title The value of the title attribute in ownerNode;
type stylesheet type string;
cssRules style sheet contains a collection of style rules, which IE does not support; IE is rules; 12 When ownerRule @import import is imported, pointing to the rule indicating the import, IE does not support;
deleteRule(index) deletes the rules for specifying locations in the cssRules collection, which IE does not support;
insertRule(rule,index) Insert rule string to the specified position in the cssRules collection, which is not supported by IE;
; // false; can be set to true;
; // css URL;
; // MediaList, collection;
; // Get the value of the title attribute;
; // CSSRuleList, style sheet rule collection;
(0); // Delete the first style rule;
("body {background-color:red}",0); // Add a style rule in the first position;
// PS: properties and methods that are not supported in IE, IE has an alternative version;
; // Replace the IE version of cssRules;
(0); // Replace the IE version of deleteRule;
("body","{background-color:red",0); // Replace IE version of insertRule;
// In addition to the method just now, you can get the CSSStyleSheet type, there is another method that is to obtain it through the styleSheets property of the document;
; // StyleSheetList, collection;
var sheet = [0]; // CSSStyleSheet, the first stylesheet object;
// Add CSS rules and are compatible with all browser functions; var sheet = [0];
insertRule(sheet,"body","background-color:red;",0);
function insertRule(sheet,selectorText,cssText,postion){
// If it is not IE; if(){
(selectorText+"{"+cssText+"}",postion);
// If it is IE }else if(){
(selectorText,cssText,postion);
}
}
(3).CSSRules style sheet rule collection list;
// Through the CSSRules attribute (non-IE) and rules attribute (IE), we can obtain a list of rules collections of style sheets;
// This way we can perform specific operations on each style;
var sheet = [0]; // CSSStyleSheet;
var rules = || ; // CSSRuleList, the list of rules collections for style sheets;
var rule = rules[0]; // CSSStyleRule, the first rule of the style sheet;
CSSRules properties
Attribute Description
cssText Gets the text corresponding to the current overall rule, which IE does not support;
parentRule @import import, return rules or null, IE does not support it;
parentStyleSheet The style sheet of the current rule, which IE does not support;
selectorText Gets the selection run text for the current rule;
style Returns the CSSStyleDeclaration object, which can obtain and set styles;
type represents the constant value of the rule. For style rules, the value is 1, and IE does not support it;
; // The style text of the current rule;
; // #box; style selector;
; // red;get specific style values;
= "green"; // Modify the style information of a certain rule;
Three Summary
The DOM2-level style module is mainly developed for the style information of operation elements, and its characteristics are as follows:
(1). Each element has an associated style object, which can be used to determine and modify the style within the line;
(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 currentStyle();
(4). Style sheets can be accessed through collections; 6 // (5). Style sheet rules collection list CSSRules; 1 // Three methods to operate CSS:
The first style line can be readable and writeable;
The second type of inline/inline and link, using getComputedStyle or currentStyle, can be readable but not writable;
The third type of inline and connection, using cssRules or rules, can be readable and writable;