JavaScript Advanced DOM Document, Simple Encapsulation and Calling, Dynamically Adding and Deleting Styles (6)_Basic Knowledge

http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html, you will definitely have a deeper understanding when you come back to read the article here. Because I introduce few conceptual things here, look at the examples below, which may be a bit difficult for beginners!

1. DOM architecture

Copy code The code is as follows:

CSS Demo

I like beauties, especially tall beauties

The DOM representation of this document is as follows:

The picture represents a tree of an HTML document.

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

1. First create a list beautified with CSS

Copy the code The code is as follows:

2. Add a div element.

Copy the code The code is as follows:

• Home
  
• MyBlog


• Sport


• News


• Contane

3. You should now see the following picture :

4. Get the total number of elements according to the above picture

Copy the code 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: Everyone You can addto get the number of elements
5. Make the text all capital letters

Copy code 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 uppercase

Effect:

6. Sort the list

Copy the code The code is 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(selse return 0;
});

Note: You can addSort

Effect:

7. Dynamically insert list items (child nodes)

Copy code 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");
a.setAttribute("href","#");
var txt = document.createTextNode( "HotBlog");
a.appendChild(txt);
li.appendChild(a);
var parent = n.parentNode;
parent.insertBefore(li,n);
};

Note: You can add Insert

Effect:

8. Use javascript classes to dynamically create documents
1. Style sheet

Copy code The code is as follows:

.tooltip{background:url('2.jpg'); border:solid 1px #99ffcc; width:200px;height:200px;}//Everyone wants the pictures here Click
.toolcontent{background-color:#ffffff; border:solid 1px #99ff00; padding:5px; font:tahoma 12px; color:#000000;}

2. javascript class

Copy code The 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 ",300 ,0);
}
function init()
{
document.operator.show.onclick = show;
document.operator.hide.onclick = hide;
}

Note: To use the above, you must also complete the following steps: 1. Add onload=init();2 in the body:

Effect: (Hide what you see)

9. Dynamically add and delete styles

1. Style sheet

Copy code The code is 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、工具函数（动态添加、删除样式）

复制代码 代码如下:

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、在body中加入如下元素

复制代码 代码如下:

• Home


• MyBlog


• Sport


• News


• Content

动态添加样式
动态删除样式

效果： 

没添加样式的样子

加了样式之后。

小结：Dom文档操作、内联样式、动态设置样式等就给大家分享到这里吧！其实还有很多细节没给大家呈现。下一篇我将分享我学习事件的历程。

（很多没有备注，大家有问题可以给我留言!)