DOM笔记2
<!--
节点类型检查
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的更多相关文章
- DOM笔记(十):JavaScript正则表达式
一.RegExp ECMAScript通过RegExp类型类支持正则表达式,语法和Perl类似: var exp = /pattern/flags; patternb部分是任何简单的或复杂的正则表达式 ...
- DOM笔记(七):开发JQuery插件
在上一篇笔记本中,讲解了如何利用jQuery扩展全局函数和对象:DOM笔记(六):怎么进行JQuery扩展? 在这篇笔记本中,将开发一个简单的动画插件,名称是example-plugin,用其实现一个 ...
- DOM笔记(五):JavaScript的常见事件和Ajax小结
一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...
- DOM笔记(四):HTML 5 DOM复杂数据类型
HTML 5 DOM定义了一下集合.列表等复杂的数据类型用于实现便捷的操作.相对于HTML 4 DOM,HTML 5 DOM增加了HTMLCollection.DOMTokenList.DOMStri ...
- DOM笔记(三):Element接口和HTMLElement接口
一.Element接口 Element接口表示一个元素,该接口扩展自Node接口,自然继承了Node接口的属性和方法,也有一套针对元素的属性和方法. Element接口常见的属性比较少,常用的就是一个 ...
- DOM笔记(二):Node接口
所有的节点都使用Node接口来表示,可以使用很多方法去获取节点,如document.getElementsByTagName().document.getElementsByName()等均返回一个N ...
- DOM笔记(一):HTMLDocument接口
操作HTML文档的第一步就是获取对文档元素的引用,每一个元素在DOM中就是一个节点,所有的元素在DOM中构成一个节点树. 用于获取元素节点定义的方法定义于HTMLDocument接口,window.d ...
- DOM笔记(十):JavaScript正則表達式
一.RegExp ECMAScript通过RegExp类型类支持正則表達式,语法和Perl类似: var exp = /pattern/flags; patternb部分是不论什么简单的或复杂的正則表 ...
- DOM笔记(十三):JavaScript的继承方式
在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承, ...
- DOM笔记(十二):又谈原型对象
因为之前谢过一篇关于原型对象的笔记:浅谈JavaScript中的原型模式.现在我又重新看到这个话题,对原型有了进一步的理解,所以,又要谈谈原型对象. 一.理解原型对象 创建的每一个函数都有一个prot ...
随机推荐
- Asp.Net2.0下C#环境 Login控件实现用户登录
原文:Asp.Net2.0下C#环境 Login控件实现用户登录 一.前台显示效果 二.前台代码 <asp:Login ID="Login1" run ...
- ArcGIS For Flex报错
1.错误描写叙述 2.错误原因 3.解决的方法
- Eclipse关闭检查
有没有发现每次操作Eclipse过后,都会有build Workspace的操作一直在后台执行,JS校验一直validate,非常卡非常受不了有木有? 有木有?以下是我个人成功的步骤,曾经试过非常多次 ...
- ASP.NET Core环境并运行 继续跨平台
ASP.NET Core环境并运行 继续跨平台 无需安装mono,在Linux(Ubuntu)下搭建ASP.NET Core环境 继续.NET跨平台 上一篇:使用VS Code开发ASP.NET Co ...
- UVa 988 - Many Paths, One Destination
称号:生命是非常多的选择.现在给你一些选择(0~n-1),和其他选项后,分支数每一次选择,选择共求. 分析:dp,图论.假设一个状态也许是选择的数量0一个是,代表死亡,计数的路径数将达到所有死亡可以去 ...
- crm采用soap删除记录
//抽样 function demo() { //操作记录id var targetId = "A8A46444-BA10-E411-8A04-00155D002F02&qu ...
- Linux使用快捷键,who命令,rm命令,ps命令,cd,命令kill命令,find命令,grep命令,tar命令(gz、tar、bz2),用户管理,vim配置的一部分,相关命令
1.进入Ubuntu开场后的终端窗口的快捷键是: ctrl + alt+t:通过这个命令能够打开终端. ctrl + alt+t:通过这个命令能够打开终端. 再开一个tab选项卡式 ...
- Case learning
bad case: <?php foreach($user_detail AS $val) { if(!empty($val->portrait)) { //假设这个循环从来没有到达过 $ ...
- 使用HTML5 Canvas做些什么
百分比圆环进度条 // ----------------------------------------------------------- 柱状排行榜统计图 // ------------ ...
- Scala---For语句段
For语句段 语法: Expr1 ::= „for‟ („(‟ Enumerators „)‟ | „{‟ Enumerators „}‟) {nl} [„yield‟] Expr Enumerato ...