Home > Developer > JavaScript
1. DOM ArchitectureCopy codeThe Code is as follows: <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 beautificationCopy codeThe Code is as follows: <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.Copy codeThe Code is as follows: <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 elementsCopy codeThe 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 <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 textCopy codeThe 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 <button type = "button" onclick = "Tools. ModifyElement (document)"> uppercase </button> to the body.
Effect:
6. Sort the listCopy codeThe 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 <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)Copy codeThe 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 <button type = "button" onclick = "Tools. insertElement ('myblog ', 'lil') to the body."> insert </button>
Effect:
8. dynamically create documents using javascript
1. Style SheetCopy codeThe Code is as follows:. tooltip {background: url('2.jpg '); border: solid 1px #99 ffcc; width: 200px; height: 200px;} // you need to take the image here.
. Toolcontent {background-color: # ffffff; border: solid 1px #99ff00; padding: 5px; font: tahoma 12px; color: #000000 ;}
2. javascriptCopy codeThe Code is as follows: 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 SheetCopy codeThe 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)Copy codeThe 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:Copy codeThe Code is as follows: <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:
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 !)
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
