javascript操作DOM
w3c把文档表示为树。我们先从dom的继承来说起: 当浏览器解析完文档后,每个节点并非就是一个简单的Element对象实例,而是继承了很多东西。看下面的图
从上图可以看出,w3c定义的根是Node节点,Document、Elements都继承自Node节点,而下面的又扩展了HTMLDocument和HTMLElement,其实不但有HTML的内容,还有xml的扩展。
一、先看一下核心Node所具有的属性和方法:
.childNodes //返回节点的所有的子节点数组。是NodeList类型。在循环遍历时,取出一个子节点用item()来取。
<script>
var node = document.getElementById"nodeId");
for(var i = 0;i<node.childNodes.length;i++)
{
node.childNodes.item(i);//取出每一个子节点
}
.firstChild //第一个子节点
.lastChild //最后一个子节点
.attributes //所有的属性的集合。在遍历属性时,IE中所有的属性都能遍历到,即使属性值为null;而在firefox中只遍历有值的属性,无值的是遍历不到的。在遍历些属性时,取其中一个也是使用item()。
.nextSibling //下一个兄弟节点
.previousSibling //上一个兄弟节点
.parentNode //父节点
.nodeType //节点类型 节点如下:
常见类型 | nodeType常量 | nodeType值 |
Element | Node.ELEMENT_NODE | 1 |
Attr | Node.ATTRIBUTE_NODE | 2 |
Text | Node.TEXT_NODE | 3 |
Comment | Node.COMMENT_NODE | 8 |
Document | Node.DOCUMENT_NODE | 9 |
DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 |
注:IE中对这些常量不支持,所以在IE中使用这些常量要进行定义,代码如下:
<script>
if(!window.Node){
var Node = {
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
COMMENT_NODE:8,
DOCUMENT_NODE:9,
DOCUMENT_FRAGMENT_NODE,11
}
}
</script>
.nodeName //节点的名字,对于不同类型的节点,它们的名字是不一样的,下面表中是给出的常见的类型及返回值
节点类型 | 取值 |
Element对象.nodeNode | 返回标签我名字并转换成大写 |
Text对象.nodeName | #text 这个值是不变的 |
Attr对象.nodeName | 返回属性名 |
Document对象.nodeName | #document |
Comment对象.nodeName | #comment |
.nodeValue //节点的取值,对天不同类型的节点,它们的取值有可能是文本内容,也有可能是null
节点类型 | 节点值 |
Element对象.nodeValue | null |
Attr对象.nodeValue | 返回属性的值 |
Text对象.nodeValue | 返回文本的内容 |
Document对象.nodeValue | null |
Comment对象.nodeValue | 注释的文本内容 |
.ownerDocument //节点所在的根文档,即document实例
.appendChild( newChild ) //追加一个子节点
.insertBefore( newChild,refChild ) //在某一个子节点前插入一个节点,refChild是要在这个子节点之前插入.注意:IE与Firefox中的区别,因为关系到空白换行的节点有无,所以取节点时一定要注意。
.replaceChild( newChild,oldChild ) //替换子节点
.removeChild( oldChild ) //删除并返回指定的子节点
.cloneNode( true/false ) // 复制当前节点及其所有子孙节点,如果参数为true,cloneNode()会复制所有的子孙节点,如果为fasle,它只复制节点自身
二、看一下核心Element所具有的属性和方法:
从开始的图中看出,Element是继承自Node的,所以Node所具有的属性和方法,Element也同样具有。下面是Element自己的扩展:
.getAttribute( name ) //根据属性名获取一个属性值
.setAttribute( name , value) //为一个Element设置属性
.removeAttribute( name ) //根据一个属性名删除一个属性
.getElementsByTagName( name ) //获得指定标签名所有的节点,返回NodeLise集合,用item()来取某一个对象。注:该方法只包含Element节点,而不包含Attr、Text等其它节点
三、看一下核心Document所具有的属性和方法:
Document是继承自Node的,所以Node所具有的属性和方法,Document也同样具有。下面是Document自己的扩展:
.documentElement // 返回文档根元素,对于html文档,返回的是<html>标签
.createAttribute( name ) //创建一个属性节点,name为属性名
.createElement( name ) // 创建一个Element节点,name为标签名.createTextNode( data ) //创建一个Text节点,data为文本内容
.getElementById( id ) //查找ID指定的节点,如果有多个相同的ID,则返回第一个Element
.getElementsByTagName( name ) //查找指定的元素,返回标签名为name的集合,是NodeList类型,取出其中一个,用item()方法
四、看一下HTMLDocument所具有的属性和方法:
HTMLDocument是继承自Document的,所以Document和Node所具有的属性和方法,HTMLDocument也同样具有。我们所说的window.document文档对象,其实就是HTMLDocument实例。下面是HTMLDocument自己的扩展:
.title //<title>标签中的内容
.referrer //链接到当前页面的前一页面的URL
.domain //链接到当前站点的域名
.URL //当前页的URL
.images //所有<img>标签的数组
.applet //所有java applet标签的数组
.links //所有链接标签的数组
.forms //包含所有表单节点的数组
.anchors //锚链接的数组
.write( data ) //把数据data写到文档中
.writeln( data ) //把数据data写到文档中,并加一个换行
.getElementsByName( name ) // 根据名字取节点对象,在IE中只适用于input输入域根据name取节点对象
五、看一下HTMLElement所具有的属性和方法:
HTMLElement是继承自Element的,所以Element和Node所具有的属性和方法,HTMLElement也同样具有。下面是HTMLDocument自己的扩展:
.id // 属性值
.title //title内容
.className //class的值,即一个css的class名
六、几个说明:
1、在firefox中是完全遵守w3c的,它的标记后的空白换行也作为一个Text子节点
在IE中不是完全遵守w3c的,它的标记后的空白换行不作为节点。添加、删除节点时一定要注意
2、一个添加的小例子:
<script>
var child = document.createElement("li");//创建一个节点
var textChild = document.createTextNode("内容");//创建一个Text节点
child.appendChild( textChild );//将文本节点添加到节点中
</script>
3、需要注意的是:document.getElementById()返回的是对象的引用,而不是一个副本,一定要记住
4、复制和移动节点
var copyNode = document.getElementById().cloneNode(true);//复制一个节点
如果想移动节点,只需用getElementById()取行节点后,再找到合适的地方插入即可。因为得到节点对象后,是获得了一个引用,是对对象本身进行操作的。如果想复制一个对象,只能用cloneNode(true)的方式。
分享到:
相关推荐
JavaScript DOM编程艺术 --全
JavaScriptDOM编程艺术(第2版)PDF版本下载
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
JavaScript DOM编程艺术,高清资源,无比经典,值得拥有
JavascriptDOM基本操作 dom 精品操作
JavaScriptDOM编程艺术.中文版.完整书签 本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书...
JavaScript DOM编程艺术 第2版.zip.002 由于上传文件大小的限制,故分成两个压缩卷,请查找对应的第一部分 学习Javascript用《JavaScript DOM编程艺术》来入门最好不过了,老老实实看两遍,看完了你就会对JS有一个...
教程名称:Javascript DOM编程视频教程(17讲) 课程目录:【】1.JavascriptDOM编程_在什么位置编写JS代码【】10.JavascriptDOM编程_删除节点【】11.JavascriptDOM编程_添加删除节点的实验...
JAVA、PHP、JS(JAVASCRIPT DOM)、HTML、XML、CSS、W3C、正则表达式、WEB开发人员必备CHM工具手册大全打包下载.rar 这里是我个人在WEB开发7年来,收集的CHM工具手册中精选出来的,每个都是精品中的精品,个人认为...
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...
javascript dom2 源码及pdf
JavaScript DOM编程艺术
JavaScript DOM编程艺术 第2版 及源码 JavaScript DOM编程艺术 第2版 及源码
javascript DOM 编程艺术源码 很详细 每一课都有
JavaScriptDom编程艺术,一本很好的前端书籍,有兴趣的可以看看
JavaScript DOM编程艺术 第2版
JavaScript DOM编程艺术 经典书籍
JavaScript Dom编程艺术源代码,包括所有素材。
《javascript DOM高级程序设计》的源码,亲测可用,内容最全。
javascript dom编程艺术 第2版 源码