JavaScript高档篇之DOM文书档案,轻便包装及调用

,
在回来看这里小说,你一定会有越来越深刻的认知。因为本人在这里边介绍概念上的东西少之又少,看上面包车型地铁事例,对初学的仇人恐怕会有个别吃力!
1、DOM的布局 复制代码 代码如下:

前言
  学习是有趣的,但有过滤的读书内容就更加好,本博主就特意为刚接触javascript客户端编制程序的仇敌提供及享受个人学习经历!提出我们看看:(汤姆二伯的博客卡塔尔(英语:State of Qatar)
,
在回去看这里小说,你早晚会有更加深切的认知。因为作者在这里地介绍概念上的东西少之甚少,看上边的例子,对初学的朋友大概会有个别吃力!
1、DOM的架构
<html>
<head>
<title>document</title>
</head>
<body>
<h1>CSS Demo</h1>
<p>小编欢腾美女,特别是高个的名媛</p>
</body>
</html>
以此文书档案的DOM表示如下图:

复制代码 代码如下:// JScript 文件var
inputID, inputName;function ExpandSubCategory(iCategoryID, FahterID卡塔尔(英语:State of Qatar) {

document

 图片 1

var li_father = document.getElementById; if
(li_father.getElementsByTagName
//如果已经加载了下边节点则一直开展,不必在去读取数据 { ChangeStatus;
return; }

CSS Demo

笔者喜爱得舍不得放手好看的女人,特别是高个的淑女

这些文书档案的DOM表示如下图:

图片表示一个HTML文书档案的树.

不无DOM树布局彰显为差别类型的Node对象的一个数,firstChild,lastChild,nextSibling,previousSibling和ParentNode属性提供遍历节点的树的风流倜傥种艺术,appendChild,removeChild,replaceChildh和insertBefore那样的艺术能够像文书档案中加多节点依旧从文书档案中除去节点。不晓得无妨接下去本人将用大批量的事例让您通晓。

1、先制造二个运用CSS美化的列表 复制代码
代码如下:

2、加一个div 成分. 复制代码 代码如下:

  • Home
  • MyBlog
  • Sport
  • News
  • Contane

3、你今后应该看见如下图:

4、依照上海体育场所获得成分总量 复制代码
代码如下: var Tools = {}; Tools.getElementCount = function{ var count
=0; elementTotal; document.table.txt.value = “element:”+ count; function
elementTotal { if count++; var children = e.childNodes; for(var i =
0;i获取成分个数 5、将文件全体大写 复制代码 代码如下: Tools.ModifyElement =
function modify{ if e.data = e.data.toUpperCase(卡塔尔国; else { for(var i =
e.firstChild;i!=null;i=i.nextSibling卡塔尔(قطر‎ modify; } };
备注:我们使用能够再body参预

大写

效果:

6、给列表排序 复制代码 代码如下:
Tools.documentSort = function{ var textArray = []; if e =
document.getElementById; for(var x = e.firstChild; x!=
null;x=x.nextSibling卡塔尔(قطر‎ if textArray.push; textArray.sort{ var s =
n.firstChild.firstChild.data; var t = m.firstChild.firstChild.data; if
return -1; else if return 1; else return 0; }卡塔尔(قطر‎;
备注:我们利用能够再body参加

排序

效果:

7、动态插入列表项复制代码 代码如下:
Tools.insertElement = function{ if n = document.getElementById; var li =
document.createElement; var a = document.createElement; a.setAttribute;
var txt = document.createTextNode; a.appendChild; li.appendChild; var
parent = n.parentNode; parent.insertBefore; };
备注:大家利用能够再body参加

插入

效果:

8、使用javascript类动态创造文书档案 1、样式表 复制代码 代码如下: .tooltip{background:url;
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; this.tooltip.style.position =
“absolute”; this.tooltip.className = “tooltip”; this.content =
document.createElement; this.content.style.position = “relative”;
this.content.className = “toolcontent”; this.tooltip.appendChild; }
Tooltip.prototype.show = function { 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; }; Tooltip.prototype.hide =
function(卡塔尔{ this.tooltip.style.visibility =”hidden”;}; var t = new
Tooltip { t.hide { t.show; } function init(卡塔尔 {
document.operator.show.onclick = show; document.operator.hide.onclick =
hide; }
备注:协作地方运用必得还产生以下步骤:1、将body中的onload=init(卡塔尔国;2
在body中增添 : 效果:

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、工具函数 复制代码 代码如下: var
CSSclass = {}; CSSclass.is = function{ if e = document.getElementById;
var classes = e.className; if return false; if return true; return
e.className.search != -1; }; CSSclass.add = function{ if e =
document.getElementById; ifreturn; //if c=””+c; e.className += c; };
CSSclass.remove = function{ if e = document.getElementById; //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文书档案操作、内联样式、动态设置样式等就给大家大饱眼福到这里呢!其实还只怕有为数不菲细节没给大家展现。下后生可畏篇小编将享受本人上学事件的长河。

 

//张开时显得稍等 switchNote; //AJAX回调函数,加载节点
used_car.BLL.T_BrandBaby.GetList(“dm=’品牌’ and fID=” + iCategoryID,
GetSubCategory_callback);}function ExpandSubCategoryAgain(iCategoryID,
FahterID) {

图片表示七个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、你今后应该看见如下图:

var li_father = document.getElementById; li_father.className =
“Opened”; //张开时体现稍等 switchNote; //AJAX回调函数,加载节点
used_car.BLL.T_BrandBaby.GetList(“dm=’品牌’ and fID=” + iCategoryID,
GetSubCategory_callback);}function GetSubCategory_callback { var dt =
response.value.Tables[0]; if { var iCategoryID = dt.Rows[0].fID;
//父ID } var li_father = document.getElementById; var ul_sub =
document.getElementById(“ulTree_” + iCategoryID); if {
li_father.removeChild } var ul = document.createElement; ul.id =
“ulTree_” + iCategoryID for (var i = 0; i < dt.Rows.length; i++) {
if (used_car.BLL.T_BrandBaby.GetList(“dm=’品牌’ and fID=” +
dt.Rows[i].id).value.Tables[0].Rows.length<1)// {// if
(dt.Rows[i].ProductStyle_IsChild == 1卡塔尔(قطر‎ //假若已没有下一级节点 { var
li = document.createElement; li.className = “Child”; li.id = “li_” +
dt.Rows[i].id;

 图片 2

var img = document.createElement; img.id = dt.Rows[i].id;
img.className = “s”; img.src = “../../css/s.gif”;

 

var a = document.createElement; var id = dt.Rows[i].id;

4、依照上海图书馆得到成分总量
var Tools = {};
Tools.getElementCount = function(e){
var count =0;
elementTotal(e);
document.table.txt.value = “element:”+ count;

a.href = “javascript:OpenDocument(‘” + dt.Rows[i].id + “‘,'” +
dt.Rows[i].name + “‘);”; a.innerHTML = dt.Rows[i].name.sub; a.title
= dt.Rows[i].name; } else //倘若还应该有下级节点 { var li =
document.createElement; li.className = “Closed”; li.id = “li_” +
dt.Rows[i].id;

function elementTotal(e)
{
if(e.nodeType == 1) count++;

var img = document.createElement; img.id = dt.Rows[i].id;
img.className = “s”; img.src = “../../css/s.gif”; img.onclick = function
() { ExpandSubCategory; }; img.alt = “展开/折叠”;

var children = e.childNodes;
for(var i = 0;i<children.length;i++)
{
elementTotal(children[i]);
}
}
};
备考:大家使用能够再body参预<button type =”button” onclick =
“alert(Tools.getElementCount(document卡塔尔(英语:State of Qatar)卡塔尔(英语:State of Qatar)”>获取成分个数</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>
效果:

var a = document.createElement; a.href = “javascript:ExpandSubCategory(“

 图片 3

  • dt.Rows[i].id + “,’editCate’);”; a.innerHTML =
    dt.Rows[i].name.sub; a.title = dt.Rows[i].name; } li.appendChild;
    li.appendChild; ul.appendChild; } li_father.appendChild;
    //先呈现稍等。。。 switchNote;}

 

// 叶子节点的单击响应函数function OpenDocument {

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’卡塔尔(英语:State of Qatar)”>排序</button>
效果:

shut(卡塔尔(英语:State of Qatar); // inputName.Value = “asddsafdf”; //纠正早先 $.attr; //新增 var
thisID = inputName.getAttribute; // alert(inputName.value +”:”+ thisID +
“–” + Action + “–” + iCategoryID卡塔尔(قطر‎; inputID.value = iCategoryID;
clienkButton1(卡塔尔(英语:State of Qatar);

 图片 4

}function ChangeStatus { var li_father = document.getElementById;

 

if (li_father.className == “Opened”) { li_father.className = “Closed”;
} else { li_father.className = “Opened”; }}function ChangeStatus2 { var
li_father = document.getElementById; if (li_father.className ==
“Closed”) { li_father.className = “Opened”; } }function switchNote {
var li_father = document.getElementById; if { var ul =
document.createElement; ul.id = “ul_note_” + iCategoryID;

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” 
onclick=”Tools.insertElement(‘myblog’,’li’卡塔尔(英语:State of Qatar);”>插入</button>
效果:

var note = document.createElement; note.className = “Child”;

 图片 5

var img = document.createElement; img.className = “s”; img.src =
“../../css/s.gif”;

 

var a = document.createElement; a.href = “javascript:void;”; a.innerHTML
= “请稍候…”;

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

note.appendChild; note.appendChild; //ul.appendChild;
li_father.appendChild; } else { var ul =
document.getElementById(“ul_note_” + iCategoryID); if {
li_father.removeChild; } }}

this.content = document.createElement(“div”);
this.content.style.position = “relative”;
this.content.className = “toolcontent”;

function InitTree { // 加载根节点 // writeDiv(卡塔尔(英语:State of Qatar); //alert(obj.value +
“–” + idObj.value卡塔尔(قطر‎; inputName=obj; inputID = idObj; var pos =
getPosition; var tree = document.getElementById; var root =
document.createElement; var objshow = document.getElementById;
objshow.style.top = pos[1] + pos[3] + “px”; objshow.style.left =
pos[0] + “px”; objshow.style.display = “block”; tree.style.display =
“block”; root.id = “li_” + FatherID; tree.appendChild; //
加载页面时显得第顶级分类 ExpandSubCategory; ChangeStatus2;function
writeDiv(卡塔尔(英语:State of Qatar) { document.write(“

this.tooltip.appendChild(this.content);
}

“); document.write(“

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

请选取分类 “); document.write;

if(this.tooltip.parentNode != document.body)
document.body.appendChild(this.tooltip);
};

}function getPosition { var w = obj.offsetWidth; var h =
obj.offsetHeight; if { for (var posX = 0, posY = 0; obj.offsetParent;
obj = obj.offsetParent) { posX += obj.offsetLeft; posY += obj.offsetTop;
} return [posX, posY, w, h]; } else { return [obj.x, obj.y, w, h]; }
} else { return [0, 0, 0, 0]; }}function shut;}function close11() {
var objshow = document.getElementById; objshow.style.display = “none”
objshow.style.top = 0; objshow.style.left = 0;}function Opent11() { var
objshow = document.getElementById; objshow.style.display =
“block”;}String.prototype.sub = function { var r = /[^x00-xff]/g;
if .length <= n) return this; n = n – 3; var m = Math.floor; for (var
i = m; i < this.length; i++) { if .replace { return this.substr +
“…”; } } return this;};

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中的onload=init(卡塔尔国;2
在body中增多 :
<form name = “operator”>
<input type = “button” value = “隐藏” name = “hide”/>
<input type = “button” value = “显示” name = “show”>
</form>
 效果:(隐蔽见到什么样了卡塔尔国

2//样式

 图片 6图片 7

.TreeMenu{border:#006600 solid 1px; background-color:#ffffff; height
:350px; overflow :auto ; }.TreeMenu
img.s{cursor:hand;vertical-align:middle;}.TreeMenu
.s_1{cursor:pointer;vertical-align:middle;padding-left:5px;}.TreeMenu
ul{padding:0;}.TreeMenu li{list-style:none;padding:0;}.Closed
ul{display:none;}.Child img.s{background:none;cursor:default;}

 

.TreeMenu ul{margin:0 0 0 8px;}.TreeMenu
img.s{width:34px;height:18px;}.TreeMenu .Opened
img.s{background:url(../images/skin3/opened.gif) no-repeat 0
1px;}.TreeMenu .Closed img.s{background:url(../images/skin3/closed.gif)
no-repeat 0 1px;}.TreeMenu .Child
img.s{background:url(../images/skin3/child.gif) no-repeat
15px;}.divClose{ background-color:#fff;height:21px; text-align:right;
border:#006600 solid 1px; border-bottom:#006600 none 1px;
background-color:#ECF6E9;}#RightCate{ height:350px; border:#006600
solid 1px; margin-left:10px;}.allopStyle{ background-color:#fafafa;
border-top:#e1e1e1 solid 1px;border-left:#e1e1e1 solid
1px;border-right:#e1e1e1 solid 1px;width:99%;padding:2px;
margin-top:5px; margin-left:2px;
text-align:left;line-height:23px;}.pageStyle{ background-color:#fafafa;
border:#e1e1e1 solid 1px;width:98%; padding:2px; margin-left:2px;
text-align:center;}

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、工具函数(动态拉长、删除样式)
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中踏向如下成分
<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>
效果:

.divFile { margin:2px 2px 2px 2px; height:138px; width:120px; border:
#e1e1e1 solid 1px; float:left; position:relative;
overflow:hidden;}.divImage { margin:2px 2px 2px 2px; height:100px;
width:116px; border: #000 solid 1px;}.divImage img { cursor:hand;
width:134px; height:100px;}

 图片 8没增添样式的样子图片 9加了体制之后。

.divPage { border: #e1e1e1 solid 1px; margin:10px 10px 10px 10px;
}.divPage span {padding: 4px 4px 4px 4px;}.divPage span a{}

 

.on a{ color:#f00; }.CheckedTab {
background-image:url(../images/partyCurrent.gif); width:105px;
height:28px; cursor:hand; text-align:center; font-size:small; border:
1px solid #e1e1e1;}.NoCheckTab { width:105px; height:28px; cursor:hand;
text-align:center; font-size:small; border: 1px solid #e1e1e1;}

小结:Dom文档操作、内联样式、动态设置样式等就给大家分享到那边吧!其实还或许有不菲细节没给我们表现。下一篇作者将分享小编就学事件的经过。

.divCheckItem{float:left; width:119px; height:104px; border:#C8D3C4 3px
solid; position:relative;}.divCheckImg{width:119px;
height:104px;}.divRemove{display:none; position:absolute; top:3px;
right:3px;}

 摘自 ben2012
 

.divAdd{display:none; position:absolute; top:3px; right:3px;}

学习是风趣的,但有过滤的读书内容就越来越好,本博主就特意为刚接触javascript客商端编制程序的爱人提供及享受个人学习涉世!提出大家看看:…

发表评论

电子邮件地址不会被公开。 必填项已用*标注