JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（推荐七）

前言

　　学习是有趣的,但有过滤的学习内容就更好,本博主就专门为刚接触javascript客户端编程的朋友提供及分享个人学习经历!建议大家看看：(汤姆大叔的博客) http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识。因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力!

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 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、你现在应该看到如下图：

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" οnclick="Tools.insertElement('myblog','li');">插入</button>

效果：

8、使用javascript类动态创建文档

1、样式表

.tooltip{background:url('2.jpg'); border:solid 1px #99ffcc; width:200px;height:200px;}//这里的图片大家要该一下
.toolcontent{background-color:#ffffff; border:solid 1px #99ff00; padding:5px; font:tahoma 12px; color:#000000;}

2、javascript类

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;
}

备注：配合上面使用必须还完成以下步骤：1、将body中的οnlοad=init();2 在body中添加 :

</form>

效果：（隐藏看到什么了)

9、动态添加样式和删除样式

1、样式表

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

3、在body中加入如下元素

<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');">动态添加样式</button>
<button type="button" name ="remove" onclick ="CSSclass.remove('con','container');">动态删除样式</button>

效果：

没添加样式的样子加了样式之后。

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

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

转载于:https://www.cnblogs.com/ben2012/archive/2012/04/06/2435126.html

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（推荐七）相关推荐

Javascript 强制浏览器渲染Dom文档
在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...
Web前端文档阅读笔记-vis.js动态添加节点（vue cli环境）
这里主要是针对vis的network图进行节点动态添加图用的是vis.js,表单使用的是element-ui 程序运行截图如下: 添加一个节点: 这里是不需要刷新页面就能添加的. 程序结构如下: 关 ...
php ftp 账号密码修改,月光软件站 - 编程文档 - 其他语言 - 用PHP即时添加,删除FTP帐号和更改FTP密码的函数...
网上不知道有没有Serv-U FTP的接口,这类的资料,由于不知道Serv-U的加密方式,所以没有使用加密密码的方式,如果有人知道算法,麻烦你告诉我一声 $filepath是Serv-U的安装地址,$ ...
dom文档对象手册_DOM总结
一.DOM是一棵树,树上有Node,Node分为 Document.Element(元素)和 Text(文本),以及其他不重要的. 二.浏览器原生提供document节点,代表整个文档, 文档的第一层 ...
BOM 浏览器对象模型和DOM 文档对象模型
浏览器对象模型BOM 1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可 ...
java dom遍历_JavaScript DOM文档遍历实战
在介绍了<JavaScript DOM修改文档树方法实例>与<JavaScript DOM实战:创建和克隆元素>,本文将介绍JavaScript DOM文档遍历的详细知识,我们 ...
day-16 jquery的DOM文档操作及bootstrap
1. jquery的DOM文档操作 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
【示例】solr添加文档/删除文档/简单查询/多条件查询
solr添加文档/删除文档/简单查询/多条件查询
JavaScript高级篇之Function对象
JavaScript高级篇之Function对象一: Function对象引入: Function对象是js的方法对象,可以用Function实例化出任何js方法对象. 例如: 1 <%@ p ...

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（推荐七）

JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（推荐七）相关推荐

最新文章

热门文章