, 在回来看这里文章,你一定会有更深刻的认识。因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力!
1、DOM的架构
复制代码 代码如下:
<html>
<head>
<title>document</title>
</head>
<body>
<h1>CSS Demo</h1>
<p>我喜欢美女,特别是高个的美女</p>
</body>
</html>
这个文档的DOM表示如下图:
图片表示一个HTML文档的树.
所有DOM树结构表现为不同种类的Node对象的一个数,firstChild,lastChild,nextSibling,previousSibling和ParentNode属性提供遍历节点的树的一种办法,appendChild,removeChild,replaceChildh和insertBefore这样的方法可以像文档中添加节点或者从文档中删除节点。不明白没关系接下来我将用大量的例子让你明白。
1、先创建一个使用CSS美化的列表复制代码 代码如下:
<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、加一个div 元素.
复制代码 代码如下:
<div>
<ul>
<li><a href="#">Home</a></li>
<li><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、你现在应该看到如下图:
4、根据上图获取元素总数
复制代码 代码如下:
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]);
}
}
};
备注:大家使用可以再body加入<button type ="button" onclick = "alert(Tools.getElementCount(document))">获取元素个数</button>
5、将文本全部大写
复制代码 代码如下:
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);
}
};
备注:大家使用可以再body加入<button type ="button" onclick = "Tools.ModifyElement(document)">大写</button>
效果:
6、给列表排序
复制代码 代码如下:
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;
});
备注:大家使用可以再body加入<button type ="button" onclick = "Tools.documentSort('list')">排序</button>
效果:
7、动态插入列表项(子节点)
复制代码 代码如下:
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);
};
备注:大家使用可以再body加入<button type ="button">插入</button>
效果:
8、使用javascript类动态创建文档
1、样式表
复制代码 代码如下: