Home > Developer > JavaScript
Preface
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
<Html>
<Head>
<Title> document </title>
</Head>
<Body>
<H1> CSS Demo <P> I like beautiful women, especially beautiful women. </p>
</Body>
</Html>
The DOM Representation of this document is as follows:
The image represents the tree of an HTML document.
All DOM tree structures represent one number of Node objects of different types, such as firstChild, lastChild, nextSibling, previussibling, and ParentNode. This provides a way to traverse the tree of a Node, 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
<Style type = "text/css">
Body {margin: 0px; padding: 0px ;}
# 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: #000000 ;}
</Style>
2. Add a div element.
<Div id = "container">
<Ul id = "list">
<Li> <a href = "#"> Home </a> </li>
<Li id = "myblog"> <a href = "#"> MyBlog </a> </li>
<Li> <a href = "#"> Sport </a> </li>
<Li> <a href = "#"> News </a> </li>
<Li> <a href = "#"> Contane </a> </li>
</Ul>
</Div>
3. Now you should see:
4. Retrieve the total number of elements
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 <children. length; I ++)
{
ElementTotal (children [I]);
}
}
};
Note: You can add <button type = "button" onclick = "alert (Tools. getElementCount (document)"> get the number of elements to the body. </button>
5. uppercase text
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 <button type = "button" onclick = "Tools. ModifyElement (document)"> uppercase </button> to the body.
Effect:
6. Sort the list
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 <t) return 1;
Else return 0;
});
Note: You can add <button type = "button" onclick = "Tools.doc umentSort ('LIST')"> sort </button> to the body.
Effect:
7. dynamically insert list items (subnodes)
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 <button type = "button" onclick = "Tools. insertElement ('myblog ', 'lil') to the body."> insert </button>
Effect:
8. dynamically create documents using javascript
1. Style Sheet
. 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
Function Tooltip ()
{
This. tooltip = document. createElement ("div ");
This. tooltip. style. position = "absolute ";
This. tooltip. className = "tooltip ";
This. content = document. createElement ("div ");
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:
<Form name = "operator">
<Input type = "button" value = "hide" name = "hide"/>
<Input type = "button" value = "display" name = "show">
</Form>
Effect: (hide what you see)
9. dynamically add and delete styles
1. Style Sheet
. 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)
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:
<Div id = "con">
<Ul id = "list">
<Li> <a href = "#"> Home </a> </li>
<Li id = "myblog"> <a href = "#"> MyBlog </a> </li>
<Li> <a href = "#"> Sport </a> </li>
<Li> <a href = "#"> News </a> </li>
<Li> <a href = "#"> Content </a> </li>
</Ul>
<Button type = "button" name = "add" onclick = "CSSclass. add ('Con ', 'Container');"> dynamically add a style </button>
<Button type = "button" name = "remove" onclick = "CSSclass. remove ('Con ', 'Container');"> dynamically delete a style </button>
Effect:
After a style is added.
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.
From ben2012
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
