DOM

最新推荐文章于 2017-05-28 21:05:51 发布

MC赵小叔

最新推荐文章于 2017-05-28 21:05:51 发布

阅读量396

点赞数

分类专栏： B/S

本文链接：https://blog.csdn.net/z15732621582/article/details/51828848

版权

B/S 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是按字母来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node andnode),想学习DHTML中的DOM千万不要从头到尾地看遍所有的属性和方法,你有三国时张松的"过目不忘"的本领吗?

其实DOM教给我们的就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录……

1. HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。

2.HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。

DOM类型：

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

DOM操作：

<span style="font-family:KaiTi_GB2312;font-size:24px;">Element常用方法
1.appendChild(node)   
//增加内容
向当前对象追加节点,example:   
<div 
id="test">123</div>
<script type="text/javascript">
var 
newdiv=document.createElement("div");
var newtext=document.createTextNode("A 
new div");
newdiv.appendChild(newtext) 
;
document.getElementById("test").appendChild(newdiv) 
;
</script>
当然,上面的功能用document.getElementById("test").innerHTML="测试一下"就可实现,遗憾的是,innerHTML不属于DOM.
2,removeChild(childreference)
移除当前节点的子节点,并返回节点
<div 
id="father"><div id="child">A 
child</div></div>
<script type="text/javascript">
var 
childnode=document.getElementById("child");
var 
removednode=document.getElementById("father").removeChild(childnode)
</script>
3.cloneNode(deepBoolean)
复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性.
4,insertBefore(newElment,targetElement)  插入新的节点
在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点.
example:
<body>
<span 
id="lovespan">熊掌我所欲也!</span>
</body>
<script 
type="text/javascript">
var 
lovespan=document.getElementById("lovespan");  //获取id
var 
newspan=document.createElement("span");  
var 
newspanref=document.body.insertBefore(newspan, 
lovespan);
newspanref.innerHTML="鱼与";
</script></span>

JS设置DIV的属性

setAttribute方法:

var a=document.createElement("div");        //新建一个DIV
a.id="div1";
//给新加的DIV命名
a.style.setAttribute("zIndex",2);
//设置DIV叠放次序
a.style.setAttribute("textAlign",Dalign);
//对齐方式
a.style.setAttribute("border","#e6e7e8 1px solid");
//边框颜色
a.style.width=divwidth;      //DIV宽度
a.style.height=Dheight;
//DIV高度
a.setAttribute("position","absolute");
a.style.backgroundColor=Dbgcolor;
//DIV背景
a.setAttribute("z-index","2");      //DIV叠放次序
a.style.top =
divtop+"px";      //DIV上边距
a.style.left = divleft+"px";
//DIV左边距
a.setAttribute("innerHTML",info10[0].firstChild.data+"<br>"+info11[0].firstChild.data);
document.body.appendChild(a);       //新建DIV结束

隐藏div：document.getElementById（“啊”）.style.display="none" //block 出现

document.getElementById（“啊”）.style.disabled="true"

document.getElementById（“啊”）.style.readOnly="true"

MC赵小叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
27
评论
DOM

DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是按字母来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node andnode),想学习DHTML中的DOM千万不要从头到尾地看遍所有的属性和方法,你有三国时张松的"过目不忘"的本领吗? 其实DOM教给我们的就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录……
复制链接

扫一扫

专栏目录