JavaScript advanced text DOM document, simple encapsulation and invocation, dynamic Add, delete style (vi) _ Basics

Source: Internet
Author: User
Tags button type text dom visibility
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!)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.