DOM document in JavaScript advanced, simple encapsulation and calling, dynamic addition and deletion of styles (6) _ basic knowledge

Learning is interesting, but it is better to filter the learning content. This blogger provides and shares his learning experience with friends who are new to javascript client programming! I suggest you look at :( Uncle Tom's blog) http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html, back to read this article, you will have a deeper understanding. This is because I have introduced few concepts here. Looking at the example below, it may be difficult for beginners!

1. DOM Architecture

The Code is as follows:

Document


CSS Demo

I like beautiful women, especially beautiful women.

The DOM Representation of this document is as follows:

The image represents the tree of an HTML document.

All DOM tree structures are represented by one number of Node objects of different types. The firstChild, lastChild, nextSibling, previussibling, and ParentNode attributes provide one way to traverse the Node tree.Methods such as appendChild, removeChild, replaceChildh, and insertBefore can be used to add or delete nodes from a document.I don't understand. It's okay. Next I will use a lot of examples to help you understand.

1. Create a list with CSS beautification

The Code is as follows:

2. Add a p element.

The Code is as follows:

• Home


• MyBlog


• Sport


• News


• Contane

3. Now you should see:

4. Retrieve the total number of elements

The Code is as follows:

Var Tools = {};
Tools. getElementCount = function (e ){
Var count = 0;
ElementTotal (e );
Document.table.txt. value = "element:" + count;
Function elementTotal (e)
{
If (e. nodeType = 1) count ++;
Var children = e. childNodes;
For (var I = 0; I {
ElementTotal (children [I]);
}
}
};

Note: You can add the body to the application. Obtain the number of elements
5. uppercase text

The Code is as follows:

Tools. ModifyElement = function modify (e ){
If (e. nodeType = 3)
E. data = e. data. toUpperCase ();
Else
{
For (var I = e. firstChild; I! = Null; I = I. nextSibling)
Modify (I );
}
};

Note: You can add the body to the application. Uppercase

Effect:

6. Sort the list

The Code is as follows:

Tools.doc umentSort = function (e ){
Var textArray = [];
If (typeof e = "string") e = document. getElementById (e );
For (var x = e. firstChild; x! = Null; x = x. nextSibling)
If (x. nodeType = 1) textArray. push (x );
TextArray. sort (function (n, m ){
Var s = n. firstChild. firstChild. data;
Var t = m. firstChild. firstChild. data;
If (s> t) return-1;
Else if (s Else return 0;
});

Note: You can add the body to the application. Sort

Effect:

7. dynamically insert list items (subnodes)

The Code is as follows:

Tools. insertElement = function (n, e ){
If (typeof n = "string") n = document. getElementById (n );
Var li = document. createElement (e );
Var a = document. createElement ("");
A. setAttribute ("href ","#");
Var txt = document. createTextNode ("HotBlog ");
A. appendChild (txt );
Li. appendChild ();
Var parent = n. parentNode;
Parent. insertBefore (li, n );
};

Note: You can add the body to the application. Insert

Effect:

8. dynamically create documents using javascript
1. Style Sheet

The Code is as follows:

. Tooltip {background: url('2.jpg '); border: solid 1px #99 ffcc; width: 200px; height: 200px;} // you need the image here.
. Toolcontent {background-color: # ffffff; border: solid 1px #99ff00; padding: 5px; font: tahoma 12px; color: #000000 ;}

2. javascript

The Code is as follows:

Function Tooltip ()
{
This. tooltip = document. createElement ("p ");
This. tooltip. style. position = "absolute ";
This. tooltip. className = "tooltip ";
This. content = document. createElement ("p ");
This. content. style. position = "relative ";
This. content. className = "toolcontent ";
This. tooltip. appendChild (this. content );
}
Tooltip. prototype. show = function (text, x, y)
{
This. content. innerHTML = text;
This. tooltip. style. left = x + "px ";
This. tooltip. style. top = y + "px ";
This. tooltip. style. visibility = "visible ";
If (this. tooltip. parentNode! = Document. body)
Document. body. appendChild (this. tooltip );
};
Tooltip. prototype. hide = function () {this. tooltip. style. visibility = "hidden ";};
Var t = new Tooltip ();
Function hide ()
{
T. hide ();
}
Function show ()
{
T. show ("hello );
}
Function init ()
{
Document. operator. show. onclick = show;
Document. operator. hide. onclick = hide;
}

Note: The following steps must be completed in combination with the above: 1. Add onload = init () in the body; 2 to the body:

Effect: (hide what you see)

9. dynamically add and delete styles

1. Style Sheet

The Code is as follows:

. Container {font-family: tahoma; font-size: 14px; border: solid 1px #99 ffcc; width: 200px; height: 140px; float: left ;}
. Container ul {list-style: none; padding: 1px 0px 0px 0px; margin: 0px ;}
. Container ul li {border-bottom: solid 1px #99 ffcc; margin: 0px; height: 27px ;}
. Container ul li a {background-color: gray; text-decoration: none; display: block; border-left: solid 10px red; margin: 0px; padding: 5px 0px 5px 10px ;}
. Container ul li a: hover {background-color: red; color: # ffffff ;}

2. Tool functions (dynamically add and delete styles)

The Code is as follows:

Var CSSclass = {};
CSSclass. is = function (e, c ){
If (typeof e = "string") e = document. getElementById (e );
Var classes = e. className;
If (! Classes) return false;
If (classes = c) return true;
Return e. className. search ("\ B" + c + "\ B *")! =-1;
};
CSSclass. add = function (e, c ){
If (typeof e = "string") e = document. getElementById (e );
If (CSSclass. is (e, c) return;
// If (e. className) c = "" + c;
E. className + = c;
};
CSSclass. remove = function (e, c ){
If (typeof e = "string") e = document. getElementById (e );
// E. id = e. id. replace (new RegExp ("\ B" + e. id + "\ B \ s *", "g "),"");
E. className = e. className. replace (new RegExp ("\ B" + c + "\ B \ s *", "g "),"");
};

3. Add the following elements to the body:

The Code is as follows:

• Home


• MyBlog


• Sport


• News


• Content

Add style dynamically
Dynamically Delete styles

Effect:

The style is not added.

After adding the style.

Summary: Dom document operations, inline styles, and dynamic style settings will be shared here! In fact, there are still many details not presented to everyone. In the next article, I will share my learning history.

(If you have any questions, please leave a message !)