Nineth Chapter Css-dom

Another netizen tidied up a lot of the code in the book: http://www.cnblogs.com/jingangel/archive/2013/01/03/2843505.html

1. Trinity's Web page

The Web page The browser sees consists of three parts: the structure layer (HTML), the presentation layer (CSS), the behavior layer (JavaScript).

2. Style Property

Each element has a variety of attributes, such as positional attributes: Parentnode,childnodes, previoussibling; The element itself information properties: NodeType, nodeName; all elements have a style property that contains the styles of the elements.

var obj = document.getElementById ("obj"); alert (obj.nodename); // P Alert (typeof Obj.type) If it is a P tag; // Object , which is a target alert (typeof Obj.nodename); // string

Example:

// restricted style can only get internal style, can't get style element.style.color in style file ; // color element.style.fontFamily; // return font, middle love you do not underline element.style.fontSize; // Font Size

3. Get style

#第一种, according to the label name P {  font-size: 1em;  } #第二种, depending on the style name. Findprint {    font-size: 1em;} #第三种, depending on the id#intro of the element {    font-size: 1em;}

4. Parity selection

tr:nth-child (Odd) {Background-color:#ffc;} Tr:nth-child (even) {Background-color:#fff;}

5. Response events, CSS can be implemented, DOM can take advantage of the onmouseover event to implement

#鼠标移过a: Hover {   color:#c60;} Tr:hover {    color:#c60;     font-weight: bold;}

functionHighlightpage () {if (!document.getelementsbytagname)ReturnFalse;if (!document.getelementbyid)ReturnFalse;var headers = document.getelementsbytagname (' header ');if (Headers.length = = 0)ReturnFalse;var navs = headers[0].getelementsbytagname (' Nav ');if (navs.length = = 0) return false; var links = navs[0].getelementsbytagname (' a '); For (var i=0; i<links.length; i++) {linkurl = Links[i].getattribute (' href '); if (window.location.href.indexOf (linkurl)!=-1) {links[i].classname = "Now"; var linktext = links[i].lastchild.nodevalue.tolowercase (); Document.body.setAttribute ("id", linktext ); }}}addloadevent (Highlightpage);               

6. ClassName Properties

Obj.classnme = "Intro"+ = "Intro"; // Append

Nineth Chapter Css-dom