JavaScript DOM Programming Art (2nd edition) reading notes (9)

Trinity's Web page

Structure layer: Created by markup language such as HTML or XHTML;

Presentation layer: The CSS is responsible for the completion;

Behavior layer: The issue of how content should respond to events. This is the domain dominated by the JavaScript language and Dom.

Separation

Use (X) HTML to build the structure of the document;

Use CSS to set the rendering effect of the document;

Using DOM scripting to implement the behavior of the document;

However, there are some potential overlapping areas between these three technologies: DOM allows you to change the structure of a Web page, and Dom methods such as createelement and AppendChild allow you to dynamically create and add tags.

There are also examples of this technique overlapping on CSS. Pseudo-classes such as hover and focus, which allow you to change the rendering of an element based on user-triggered events. Changing the rendering of an element is, of course, the "sphere of influence" of the presentation layer, but responding to user-triggered events is the domain of the behavioral layer. This overlap between the presentation layer and the behavior layer forms a gray area.

CSS is using pseudo-classes to walk into the DOM's territory, but Dom also has a way to counter it. You can use the DOM to set the style for the element.

Style Property

Element.style.property

We can use the color property of the style object to get the display color of an element: Element.style.color

However, properties such as font-family are obtained slightly differently from the color property. The hyphen between "font" and "family" is the same as the subtraction operator in the JavaScript language, and JavaScript interprets it as a minus sign.

When you need to reference a CSS property with a minus sign in the middle, the DOM asks you to use the Hump naming method. The CSS property font-family becomes DOM property fontFamily:element.style.fontFamily.

If you set the Color property to a hexadecimal value:

<p id= "Example" style= "color: #999999;" ></p>

Alert (document.getElementById ("example"). Style.color);

In some browsers, the color property is returned in RGB format with the value (153,153,153).

Use CSS Shorthand properties: You can combine multiple styles together to write a line. For example, if you declare font:12px ' Arial ', the Sans-serif,css Font-size property will be set to the 12px;font-family property will be set to ' Arial ', Sans-serif. The DOM is able to parse such shorthand attributes. If you query the FontSize property, you get a value of 12px.

However, getting a style from the style property has great limitations. Only the inline style can be obtained. External styles and styles that are declared in

Now, you might think that using DOM to manipulate CSS styles is meaningless, but there is another case where the DOM style object can correctly reflect the style we set. You can use the DOM style to retrieve them using the DOM.

Set style

Each property of a Style object is read-write. Not only can we get the style through the style property of an element, but we can also update the style through it. You can update the style with the assignment action:

Element.style.property = value;

When should I use DOM scripting to set styles

In most cases, you should use CSS to declare the style. However, in the case of CSS inconvenient, you can use the DOM to make some small enhancements to the style of the document.

CSS2 introduces a number of location-related selectors, such as First-child and Last-child, while CSS3 defines location selectors such as Nth-child () and: Nth-of-type (). However, it is still not easy to apply styles to an element in a particular location in the document's node tree. For example, in CSS3, you can use the h1~* selector to declare a style for the next sibling element of all H1 elements. The problem is that there are so many browsers that don't support the CSS3 of these cute location selectors at all.

Now, CSS is not able to find a particular element based on the relative positional relationship between elements, but this is not a problem for DOM. We can use the DOM to easily find the element immediately following each H1 element and add the style to it:

var headers = document.getElementsByTagName ("H1");

The next node in the document can be found with the NextSibling property:

Headers[i].nextsibling

But what is really needed here is not the next node, but the next element node. The following getnextelement function can easily accomplish this task:

function getnextelement (node) {  if(node.nodetype = = 1)    {return  node;  }   if(node.nextsibling) {    return  getnextelement (node.nextsibling);  }   return NULL ;}

var elem = getnextelement (headers[i].nextsibling);

Elem.style.fontWeight = "bold";

Elem.style.fontSize = "1.2em";

Finally, wrap the above code in the function styleheadersibling, and don't forget to schedule some tests to see if the browser can understand the DOM method we used in this function.

Set a style repeatedly based on a condition

The common technique for making the rows in a table more readable is to change their background color alternately, thus creating a zebra effect that makes the two adjacent lines distinct. This effect can be achieved by setting the odd and even line styles separately. If the browser supports CSS3, it is simple and requires only the following two lines of style:

Tr:nth-child (Odd) {background-color: #ffc;}

Tr:nth-child (even) {background-color: #fff;}

if: Nth-child () is not available, you have to use another technique to get the same effect. JavaScript is particularly adept at handling repetitive tasks. It is easy to traverse a long list with a while or for loop.

Responding to Events

CSS provides: pseudo-class attributes such as hover allow us to change the style based on the state of the HTML element. The DOM can also respond to changes in the state of an HTML element through events such as onmouseover. So when to use: hover, when to use onmouseover?

The simplest answer is to choose the easiest way to achieve it. For example, if you just want the link to change color when the mouse hovers over it, you should choose CSS:

A:hover{color: #c60;}

Pseudo-class: Hover has been supported by most browsers-at least when it is used to change the style of a link. But if you still want to use this pseudo-class to change the style when the mouse pointer hovers over other elements, there's not a lot of browsers that support this usage.

The vast majority of browsers, although the support of the CSS pseudo-class is not complete, but the DOM has good support. It is more realistic to use DOM to change the style of HTML elements when the event occurs, before the browser's support for CSS is further refined.

<!--

Fiber Sharp
Source: http://www.cnblogs.com/beginner2014/p/4186736.html
This article is copyrighted by the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link. Thank you for your cooperation.

-

JavaScript DOM Programming Art (2nd edition) reading notes (9)