JavaScript learning 9: DOM operation tables and styles, javascriptdom

JavaScript learning 9: DOM operation tables and styles, javascriptdom

DOM is relatively simple and clear in generating HTML by operations. However, because the browser is always compatible and traps, the final operation is not that simple and convenient. This article will show you how DOM operates tables and styles today.

1. operation table

<Table> A tag is the most complex structure in HTML. You can use DOM to create a tag or use html dom to operate it.

Next we will use DOM to create a table:

<Span style = "font-size: 18px;"> window. onload = function () {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'); var th3 = document. createElement ('th'); tr. appendChild (th1); th1.appendChild (document. createTextNode ('name'); tr. appendChild (Th1); th2.appendChild (document. createTextNode ('age'); tr. appendChild (th3); th3.appendChild (document. createTextNode ('gender'); document. body. appendChild (table) ;}; </span>

Run the Code as follows:

2. Operation Style

As an aid to 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 CSS capability level supported by the current browser.

DOM1-level implementation of the most basic document processing, DOM2 and DOM3 on this basis added more interaction capabilities, here we mainly discuss CSS, DOM2 adds CSS programming access and changes CSS style information.

1. Access element styles

Any HTML element tag has a general attribute style. It returns the CSSStyleDeclaration object. Next we will look at several of the most common in-row style access methods.

Although CSS styles with a single value can be obtained through styles, the style information of compound values must be obtained by calculating styles. DOM2 level style. The getComputedStyle () method is provided under the window object. Take two parameters, the style element to be calculated, and the second pseudo class (: hover). If there is no pseudo class, enter null.

2. Operation Style Sheet

You can use the style attribute to set the CSS style in the row, but the most common method for calling through id and class. Previously, we used the style attribute to only get and set the style in the row. If it is a style rule provided by inline <style> or link <link>, there is no choice, later we came into contact with getComputedStyle and currentStyle, which can only be obtained but cannot be set.

The CSSStyleSheet type indicates the style table contained by the <link> element and <style> element.

The two elements return the HTMLLinkElement and HTMLStyleElement types, but the CSSStyleSheet type is more common. Therefore, if this type is not IE, the sheet attribute is used, and IE uses styleSheet.

Var sheet = link. sheet | link. styleSheet;

In addition, we can use the CSSRules attributes (not IE) and rules attributes (IE) to obtain the rule set list of the style sheet. In this way, we can perform specific operations on each style.

Varrules=sheet.css Rules | sheet. rules;

Summary: three methods are used to operate CSS. The first method is a style row that can be read and written. The second method is a combination of intra-row, inner, and link. getComputedStyle or currentStyle is used to make it readable and unwritable. The third method is CSSRules or rules, the inner links are readable and writable.