Http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html, you will have a deeper understanding when you come back and read this article. Because I am here to introduce the concept of things less, look at the following example, the novice friend may be a little bit laborious!
1, the DOM's architecture
Copy Code code as follows:
<title>document</title>
<body>
<p> I like beautiful women, especially tall women </p>
</body>
The DOM of this document represents the following figure:
A picture represents a tree of an HTML document.
All DOM tree structures represent a number of different kinds of node objects, and the firstchild,lastchild,nextsibling,previoussibling and ParentNode attributes provide a way to traverse a node's tree. Methods such as APPENDCHILD,REMOVECHILD,REPLACECHILDH and insertbefore can add nodes to the document or delete them from the document. I don't understand. Next I will use a lot of examples to let you know.
1, first create a use of CSS landscaping list
Copy Code code as follows:
<style type= "Text/css" >
body{margin:0px; padding:0px;}
#container {font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; 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 #99ffcc; 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 Code code 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, you should now see the following figure:
4, according to the figure to obtain the total number of elements
Copy Code code 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 use the body to add <button type = "button" onclick = "alert (tools.getelementcount (document))" > get the number of elements </button >
5. Capitalize all the text
Copy Code code 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: Everyone can add <button type = "button" onclick = "tools.modifyelement (document)" > Capital </button>
Effect:
6. Sort List
Copy Code code as follows:
Tools.documentsort = 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: Everyone can add <button type = "button" onclick = "tools.documentsort" (' list ') > Sort </button>
Effect:
7. Dynamically inserting list items (child nodes)
Copy Code code 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");
A.setattribute ("href", "#");
var txt = document.createtextnode ("Hotblog");
A.appendchild (TXT);
Li.appendchild (a);
var parent = N.parentnode;
Parent.insertbefore (Li,n);
};
Note: Everyone can add <button type = "button" onclick= "Tools.insertelement" (' MyBlog ', ' Li '). > Insert </button>
Effect:
8. Use JavaScript class to create documents dynamically
1. Style sheet
Copy Code code as follows:
. Tooltip{background:url (' 2.jpg '); border:solid 1px #99ffcc; width:200px;height:200px;} Here's the picture everybody wants to
Toolcontent{background-color: #ffffff; border:solid 1px #99ff00; padding:5px font:tahoma 12px; color: #000000;}
2. JavaScript class
Copy Code code 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", 300,0);
}
function init ()
{
Document.operator.show.onclick = Show;
Document.operator.hide.onclick = hide;
}
Note: In conjunction with the above use must also complete the following steps: 1, the body in the Onload=init () 2 in the body add:
<form name = "Operator" >
<input type = "button" value = "Hide" name = "Hide"/>
<input type = "button" value = "Display" name = "Show" >
</form>
Effect: (Hide what you see)
9. Add styles and delete styles dynamically
1. Style sheet
Copy Code code as follows:
. container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; 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 #99ffcc; 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 function (dynamic add, delete style)
Copy Code code 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 Code code 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 Adding Styles </button>
<button type= "button" name = "Remove" onclick = "cssclass.remove (' con ', ' container ');" > Dynamic Delete Styles </button>
Effect:
No style added.
After the style is added.
Summary: DOM document manipulation, inline style, dynamic settings style and so on to share it here! In fact, there are a lot of details are not presented to us. Next I will share the course of my learning events.
(A lot of no comments, everyone has questions can give me a message!)
