当前位置: 代码迷 >> JavaScript >> javascript操作DOM-转
  详细解决方案

javascript操作DOM-转

热度:544   发布时间:2012-09-09 09:27:54.0
javascript操作DOM-------转

javascript操作DOM

w3c把文档表示为树。我们先从dom的继承来说起:当浏览器解析完文档后,每个节点并非就是一个简单的Element对象实例,而是继承了很多东西。看下面的图


从上图可以看出,w3c定义的根是Node节点,DocumentElements都继承自Node节点,而下面的又扩展了HTMLDocumentHTMLElement,其实不但有HTML的内容,还有xml的扩展。
一、先看一下核心Node所具有的属性和方法:
.childNodes //返回节点的所有的子节点数组。是NodeList类型。在循环遍历时,取出一个子节点用item()来取。

Javascript代码

  1. <script> ??
  2. var?node?=?document.getElementById"nodeId");? ??
  3. for(var?i?=?0;i&lt;node.childNodes.length;i++) ??
  4. { ??
  5. ?????node.childNodes.item(i);//取出每一个子节点? ??
  6. }???

<script>

var node = document.getElementById"nodeId");

for(var i = 0;i&lt;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代码

  1. <script> ??
  2. ???if(!window.Node){ ??
  3. ??????var?Node?=?{ ??
  4. ??????????ELEMENT_NODE:1,? ??
  5. ??????????ATTRIBUTE_NODE:2,? ??
  6. ??????????TEXT_NODE:3,? ??
  7. ??????????COMMENT_NODE:8,? ??
  8. ??????????DOCUMENT_NODE:9,? ??
  9. ??????????DOCUMENT_FRAGMENT_NODE,11 ??
  10. ????????} ??
  11. ???} ??
  12. </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是要在这个子节点之前插入.注意:IEFirefox中的区别,因为关系到空白换行的节点有无,所以取节点时一定要注意。
.replaceChild( newChild,oldChild ) //
替换子节点
.removeChild( oldChild ) //
删除并返回指定的子节点
.cloneNode( true/false ) //
复制当前节点及其所有子孙节点,如果参数为truecloneNode()会复制所有的子孙节点,如果为fasle,它只复制节点自身
二、看一下核心Element所具有的属性和方法:
从开始的图中看出,Element是继承自Node的,所以Node所具有的属性和方法,Element也同样具有。下面是Element自己的扩展:
.getAttribute( name ) //
根据属性名获取一个属性值
.setAttribute( name , value) //
为一个Element设置属性
.removeAttribute( name ) //
根据一个属性名删除一个属性
.getElementsByTagName( name ) //
获得指定标签名所有的节点,返回NodeLise集合,用item()来取某一个对象。注:该方法只包含Element节点,而不包含AttrText等其它节点
三、看一下核心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的,所以DocumentNode所具有的属性和方法,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的,所以ElementNode所具有的属性和方法,HTMLElement也同样具有。下面是HTMLDocument自己的扩展:
.id?? ????? //
属性值
.title ???? //title
内容
.className //class
的值,即一个cssclass
六、几个说明:
1
、在firefox中是完全遵守w3c的,它的标记后的空白换行也作为一个Text子节点
??
IE中不是完全遵守w3c的,它的标记后的空白换行不作为节点。添加、删除节点时一定要注意
2
、一个添加的小例子:

Javascript代码

  1. <script> ??
  2. ????var?child?=?document.createElement("li");//创建一个节点 ??
  3. ?????var?textChild?=?document.createTextNode("内容");//创建一个Text节点 ??
  4. ?????child.appendChild(?textChild?);//将文本节点添加到节点中 ??
  5. </script>??

<script>

??? var child = document.createElement("li");//创建一个节点

???? var textChild = document.createTextNode("内容");//创建一个Text节点

???? child.appendChild( textChild );//将文本节点添加到节点中

</script>


3
、需要注意的是:document.getElementById()返回的是对象的引用,而不是一个副本,一定要记住
4
、复制和移动节点

Javascript代码

  1. var?copyNode?=?document.getElementById().cloneNode(true);//复制一个节点??

var copyNode = document.getElementById().cloneNode(true);//复制一个节点


如果想移动节点,只需用getElementById()取行节点后,再找到合适的地方插入即可。因为得到节点对象后,是获得了一个引用,是对对象本身进行操作的。如果想复制一个对象,只能用cloneNode(true)的方式。

  相关解决方案