Home  >  Article  >  Web Front-end  >  JavaScript Advanced DOM Document, Simple Encapsulation and Calling, Dynamically Adding and Deleting Styles (6)_Basic Knowledge

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

WBOY
WBOYOriginal
2016-05-16 17:54:311057browse

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:



document


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:

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 add
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

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 add

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


效果: 


没添加样式的样子

加了样式之后。

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

(很多没有备注,大家有问题可以给我留言!) 
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:jQuery UI Dialog creates a friendly pop-up dialog box implementation code_jqueryNext article:jQuery UI Dialog creates a friendly pop-up dialog box implementation code_jquery

Related articles

See more