javascript操作DOM
w3c把文档表示为树。我们先从dom的继承来说起:当浏览器解析完文档后,每个节点并非就是一个简单的Element对象实例,而是继承了很多东西。看下面的图
从上图可以看出,w3c定义的根是Node节点,Document、Elements都继承自Node节点,而下面的又扩展了HTMLDocument和HTMLElement,其实不但有HTML的内容,还有xml的扩展。
一、先看一下核心Node所具有的属性和方法:
.childNodes //返回节点的所有的子节点数组。是NodeList类型。在循环遍历时,取出一个子节点用item()来取。
Javascript代码
- <script>
- var node = document.getElementById"nodeId");
- for(var i = 0;i<node.childNodes.length;i++)
- {
-
node.childNodes.item(i);//取出每一个子节点
- }
<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中使用这些常量要进行定义,代码如下:
Javascript代码
- <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>
<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、一个添加的小例子:
Javascript代码
- <script>
-
var child = document.createElement("li");//创建一个节点
-
var textChild = document.createTextNode("内容");//创建一个Text节点
-
child.appendChild( textChild );//将文本节点添加到节点中
- </script>
<script>
var child = document.createElement("li");//创建一个节点
var textChild = document.createTextNode("内容");//创建一个Text节点
child.appendChild( textChild );//将文本节点添加到节点中
</script>
3、需要注意的是:document.getElementById()返回的是对象的引用,而不是一个副本,一定要记住
4、复制和移动节点
Javascript代码
-
var copyNode = document.getElementById().cloneNode(true);//复制一个节点
var copyNode = document.getElementById().cloneNode(true);//复制一个节点
如果想移动节点,只需用getElementById()取行节点后,再找到合适的地方插入即可。因为得到节点对象后,是获得了一个引用,是对对象本身进行操作的。如果想复制一个对象,只能用cloneNode(true)的方式。
分享到:
相关推荐
javascript_DOM,javascript_DOM,javascript_DOM,javascript_DOM
JavaScript和DOM操作-第10周 第10周研究:列出并说明使我们能够从DOM中选择元素JavaScript方法。 什么是文件对象? 没有从DOM中选择元素的文档对象上还有哪些其他可用方法? 您本周学到的最喜欢的东西是什么? ...
Javascript系列-DOM操作(理论) Javascript系列-DOM操作(理论)Javascript系列-DOM操作(理论)
Javascript操作XML Dom学习资料
javascript-dom-dom-document对象模型的操作 Laurence Svekis对Dom文档对象模型课程的Java语言操作
javascript_DOM操作.rar
js-dom详解:javascript操作dom的介绍文档。
Javascript标准DOM_Range操作 - 百度文库.doc
Polymer 的 dom-repeat 也是这个级别的东西。 在 Polymer 中,一切都是 Directive 的概念。dom-module 用于定义模块,它本身也是一个 Directive。dom-repeat 也是,但它不是一个标签,而是一个基于 template 标签...
JavascriptDOM基本操作 dom 精品操作
JavaScript中Dom操作实例详解.docx
mkdir assignment--dom-manipulations-basics cd assignment--dom-manipulations-basics 3-下载.zip文件并解压缩: curl ...
belajar-javascript-dasar-dom-lanjutan 包括 Javascript达萨尔 论点 大批 数组操作 声明表达式 否则,如果 如果别的 为了 功能 目的 操作员 重构 Rekursif 转变 这 多变的 可变范围 Javascript Dom 起泡 大事记 ...
1.访问相关的节点 2.检测节点类型(nodeType) 3.处理特性 4.访问指定节点 5.创建和操作节点
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
Ajax-dom-js.zip,dom js是dom本地api的一个扩展,它可以方便、简单、高效地操作dom元素。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中...
JavaScript家庭作业-JavaScript和DOM操作背景唤醒羊! 地球外的威胁已经到了地球,我们在ALIENS-R-REAL收集了所有我们可以证明的目击者的报道! 我们现在要做的就是把这些信息放到网上让全世界看到,然后这件事最终...
JavaScript 操作 DOM
本教程是有关Web开发的更大系列教程的一部分,该存储库仅关注DOM,您将学习如何从网站中选择元素并使用Javascript进行操作(更改样式,添加事件侦听器,以编程方式删除元素,更改您的整个网站,而无需刷新)。...