<!--

节点类型检查

if(someNode.nodeType==ElementNode){

alert("Node is an element");

}

或者

if(someNode.nodeType==1){

alert("Node is an element");

}

使用nodeName和nodeValue这两个属性

if(someNode.nodeType==1){

var someNode.nodeName();//nodeName的值是元素的标签名

}

每一个节点都有一个childNodes属性。当中保存NodeList对象,NodeList是一种类型数组对象,用于保存一组有序的节点

这个对象也有length属性,能够通过位置来訪问这些节点

var firstChild=someNode.childNodes[0];

var secondChild=someNode.childNodes.item(1);

var length=someNode.childNodes.length;

每一个节点都有一个parentNode属性。该属性指向文档树中的父节点

if(someNode.nextSibling===null){

alert("last node in the parent's childNodes list...");

}else if(someNode.previousSibling===null){

alert("First node in the parent's childNodes list...");

假设列表中仅仅有一个节点,那么该节点的nextSibling和previousSibling都为null

}

父节点和第一个子节点和最后一个子节点也存在关系

firstChild

lastChild

即存在这种关系

(someNode.childNodes[0]===someNode.firstChild)

(someNode..childNodes[childNodes.length-1]===someNode.lastChild)



操作节点

最经常使用的方法是appendChilde();//用于向childNodesd的末尾加入一个节点

var returnNode=somenNode.appendChild(newNode);

alert(returnNode==newNode);//true

alert(someNode.lastChild==newNode);//true

使用insertBefore()方法将节点附加到ChildNodes的任何位置

var returnNode=someNode.appendChild(newNode,null);

alert(returnNode==someNode.lastNode);//true

//插入后成为一个子节点

var returnNode=someNode.appendChild(newNode,someNode.firstNode);

alert(returnNode===newNode);

alert(returnNode===someNode.firstNode);

//插入后成为最后一个节点的前一个节点

var returnNode=someNode.appendChild(newNode,someNode.lastNode);

alert(returnNode===someNode.childNodes.length-2);//true

alert(returnNode===newNode);//true

//注意:appendChild()和insertBefore不会删除节点

//replaceChild()方法接受两个參数,要插入的节点和要替换的节点,要替换的节点将由这种方法返回并从文档树中删除

//替换第一个子节点

var retuenNode=someNode.replaceChild(newNode,someNode.firstChild);

//替换最后一个子节点

var returnNode=somNode.replaceChild(newNode,someNode.lastChild);

//使用removeChild()方法删除一个子节点

var formerFirstNode=someNode.removeChild(someNode.firstNode);

//删除最后一个子节点

var lastNode=someNode.removeChild(someNode.lastNode);

//parentNode属性

。。。

//其它方法

cloneNode():用于创建调用这种方法的节点的全然一样的一个副本

CloneNode()接受一个布尔值用于运行是否深度复制,在參数为true时。运行深度复制

也就是复制节点和整个子树节点,在參数为FALSE时。仅仅复制本身

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

var deepList=Mylist.clondNode(true);

alert(deeplist.childNodes.length);

//查找元素

对于document对象来说,提供了两个方法

getElementById();

getElementsByTagName();

var images=document.getElementsByTagName("img");

alert(images.length);

alert(images.item(0).src);

alert(images[0].src);

//文档写入 write(),writeln(),open(),clost();

document.writeln("当前的时间是:"+new Date()+";");

//取得属性

var div=document.getElementById("div");

alert(div.getAttribute("id"));

alert(div.getAttribute("title"));

alert(div.getAttribute("class"));

alert(div.getAttribute("dir"));

//设置属性

div.setAttribute("id","someId");

div.setAttribute("class","someClass");

//创建元素

var dir=document.createElement("div");

//为元素的属性复制

dir.id="someId";

dir.class="someClass";

dir.height="200"+"px";

dir.width="200"+"px";

//将创建的元素加入到document.body元素中去

document.body.appendChilde(div);

var dir=document.createElement("<div...>");



-->

版权声明:本文博客原创文章。博客,未经同意,不得转载。

DOM笔记2的更多相关文章

  1. DOM笔记(十):JavaScript正则表达式

    一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...

  2. DOM笔记(七):开发JQuery插件

    在上一篇笔记本中,讲解了如何利用jQuery扩展全局函数和对象:DOM笔记(六):怎么进行JQuery扩展? 在这篇笔记本中,将开发一个简单的动画插件,名称是example-plugin,用其实现一个 ...

  3. DOM笔记(五):JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  4. DOM笔记(四):HTML 5 DOM复杂数据类型

    HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStri ...

  5. DOM笔记(三):Element接口和HTMLElement接口

    一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个 ...

  6. DOM笔记(二):Node接口

    所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName().document.getElementsByName()等均返回一个N ...

  7. DOM笔记(一):HTMLDocument接口

    操作HTML文档的第一步就是获取对文档元素的引用,每一个元素在DOM中就是一个节点,所有的元素在DOM中构成一个节点树. 用于获取元素节点定义的方法定义于HTMLDocument接口,window.d ...

  8. DOM笔记(十):JavaScript正則表達式

    一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表 ...

  9. DOM笔记(十三):JavaScript的继承方式

    在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承, ...

  10. DOM笔记(十二):又谈原型对象

    因为之前谢过一篇关于原型对象的笔记:浅谈JavaScript中的原型模式.现在我又重新看到这个话题,对原型有了进一步的理解,所以,又要谈谈原型对象. 一.理解原型对象 创建的每一个函数都有一个prot ...

随机推荐

  1. HttpURLConnection请求数据流的写入(write)和读取(read)

    URLConnection类给应用 程序 和web资源之间架设起了通信的桥梁,这些web资源通常是通过url来标记的,本文将讲述如何使用HttpURLConnection来访问web页面(发送数据流) ...

  2. php函数serialize()与unserialize() 数据序列化与反序列化

    php函数serialize()与unserialize()说明及案例.想要将已序列化的字符串变回 PHP 的值,可使用unserialize().serialize()可处理除了resource之外 ...

  3. 一篇哥们自己的写的IBM电话面试感想-@大国

    两天没写博了,还是没有养成一个习惯.前天和昨天休息,和哥们几个出去打球,运动一下,放松下脑子.今天就补一篇我哥们自己的写的关于他的IBM电话面试的感想,希望能帮到有需要的人. ------------ ...

  4. substance的使用示例(转)

    可以使用substance改变界面的皮肤和主题,让Java制作的界面“炫”起来 . 可以下载substance.jar文件 在代码中你可以用: static { try { try { UIManag ...

  5. hdu1011(树形背包)

    hdu1011 http://acm.hdu.edu.cn/showproblem.php?pid=1011 给定n个洞穴和m个士兵(每个士兵能消灭20个bugs) 然后给定每个洞穴的bugs数量(背 ...

  6. 关于Core Location-ios定位

    IOS中的core location提供了定位功能,能定位装置的当前坐标,同一时候能得到装置移动信息.由于对定位装置的轮询是非常耗电的,所以最好仅仅在非常必要的前提下启动. 当中,最重要的类是CLLo ...

  7. 怎么解决 ubuntu 装kde桌面遇到的汉化问题

    正在读取软件包列表... 完成正在分析软件包的依赖关系树 正在读取状态信息... 完成 现在没有可用的软件包 language-pack-kde-zh,但是它被其它的软件包引用了.这可能意味着这个缺失 ...

  8. openstack dhcp调试

    openstack的dhcpserver默认值dnsmasq软件实施,经ps -ef | grep dnsmasq 查看.当虚拟机启动过程启动dhcp求,日志可以是在主机系统日志: May 23 22 ...

  9. UVA 674 (入门DP, 14.07.09)

     Coin Change  Suppose there are 5 types of coins: 50-cent, 25-cent, 10-cent, 5-cent, and 1-cent. We ...

  10. android Animation动画的xml使用

    在Android应用程序,使用动画效果,能带给用户更好的感觉,做动画能够通过XML或Android代码来实现. Animation动画效果的实现能够通过两种方式进行实现,一种是tweened anim ...