javascript DOM

最新推荐文章于 2025-08-22 23:25:37 发布

最新推荐文章于 2025-08-22 23:25:37 发布 · 151 阅读

文章标签：

#JavaScript #IE #Firefox #CSS #浏览器 #ViewUI

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍JavaScript操作DOM的基本方法，包括节点的属性与方法、元素与文档的操作方式。涵盖节点的增删改查、属性设置与获取等内容。

[align=center][size=x-large]javascript操作DOM[/size][/align] w3c把文档表示为树。我们先从dom的继承来说起：当浏览器解析完文档后，每个节点并非就是一个简单的Element对象实例，而是继承了很多东西。看下面的图[img]http://dl.iteye.com/upload/picture/pic/49577/9ad21169-d7d5-3f69-859f-94f6af41ee24.jpg[/img]
从上图可以看出，w3c定义的根是Node节点，Document、Elements都继承自Node节点，而下面的又扩展了HTMLDocument和HTMLElement，其实不但有HTML的内容，还有xml的扩展。
[color=indigo][b]一、先看一下核心Node所具有的属性和方法：
[/b][/color][color=red].childNodes [/color][color=blue]//[/color][color=green]返回节点的所有的子节点数组。是NodeList类型。在循环遍历时，取出一个子节点用item()来取。[/color]


<script>
var node = document.getElementById"nodeId"); 
for(var i = 0;i<node.childNodes.length;i++)
{
     node.childNodes.item(i);//取出每一个子节点 
}

[color=red].firstChild [/color][color=blue]//[/color][color=green]第一个子节点[/color]
[color=red].lastChild [/color][color=blue]//[/color][color=green]最后一个子节点[/color]
[color=red].attributes [/color][color=blue]//[/color][color=green]所有的属性的集合。在遍历属性时，IE中所有的属性都能遍历到，即使属性值为null;而在firefox中只遍历有值的属性，无值的是遍历不到的。在遍历些属性时，取其中一个也是使用item()。[/color]
[color=red].nextSibling [/color][color=blue]//[/color][color=green]下一个兄弟节点[/color]
[color=red].previousSibling [/color][color=blue]//[/color][color=green]上一个兄弟节点[/color]
[color=red].parentNode[/color] [color=blue]//[/color][color=green]父节点[/color]
[color=red].nodeType[/color] [color=blue]//[/color][color=green]节点类型[/color] [b]节点如下：[/b]
[table]
|常见类型|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
[/table]
注：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>

[color=red].nodeName [/color] [color=blue]//[/color][color=green]节点的名字，对于不同类型的节点，它们的名字是不一样的，下面表中是给出的常见的类型及返回值[/color]
[table]
|节点类型|取值
|Element对象.nodeNode|返回标签我名字并转换成大写
|Text对象.nodeName|#text 这个值是不变的
|Attr对象.nodeName|返回属性名
|Document对象.nodeName|#document
|Comment对象.nodeName|#comment
[/table]
[color=red].nodeValue[/color] [color=blue]//[/color][color=green]节点的取值，对天不同类型的节点，它们的取值有可能是文本内容，也有可能是null[/color]
[table]
|节点类型|节点值
|Element对象.nodeValue|null
|Attr对象.nodeValue|返回属性的值
|Text对象.nodeValue|返回文本的内容
|Document对象.nodeValue|null
|Comment对象.nodeValue|注释的文本内容
[/table]
[color=red].ownerDocument[/color] [color=blue]//[/color][color=green]节点所在的根文档，即document实例[/color]
[color=red].appendChild( newChild )[/color] [color=blue]//[/color][color=green]追加一个子节点[/color]
[color=red].insertBefore( newChild,refChild ) [/color][color=blue]//[/color][color=green]在某一个子节点前插入一个节点，refChild是要在这个子节点之前插入.注意：IE与Firefox中的区别，因为关系到空白换行的节点有无，所以取节点时一定要注意。[/color]
[color=red].replaceChild( newChild,oldChild ) [/color] [color=blue]//[/color][color=green]替换子节点[/color]
[color=red].removeChild( oldChild ) [/color][color=blue] //[/color][color=green]删除并返回指定的子节点[/color]
[color=red].cloneNode( true/false )[/color] [color=blue]//[/color] [color=green]复制当前节点及其所有子孙节点，如果参数为true，cloneNode()会复制所有的子孙节点，如果为fasle，它只复制节点自身[/color]
[color=indigo][b]二、看一下核心Element所具有的属性和方法：[/b][/color]
[b]从开始的图中看出，Element是继承自Node的，所以Node所具有的属性和方法，Element也同样具有。下面是Element自己的扩展：[/b]
[color=red].getAttribute( name )[/color] [color=blue]//[/color][color=green]根据属性名获取一个属性值[/color]
[color=red].setAttribute( name , value) [/color][color=blue]//[/color][color=green]为一个Element设置属性[/color]
[color=red].removeAttribute( name )[/color] [color=blue]//[/color][color=green]根据一个属性名删除一个属性[/color]
[color=red].getElementsByTagName( name ) [/color] [color=blue]//[/color][color=green]获得指定标签名所有的节点，返回NodeLise集合，用item（）来取某一个对象。注：该方法只包含Element节点，而不包含Attr、Text等其它节点 [/color]
[color=indigo][b]三、看一下核心Document所具有的属性和方法：[/b][/color]
[b]Document是继承自Node的，所以Node所具有的属性和方法，Document也同样具有。下面是Document自己的扩展：[/b]
[color=red].documentElement[/color] [color=blue]//[/color] [color=green]返回文档根元素，对于html文档，返回的是<html>标签[/color]
[color=red].createAttribute( name )[/color] [color=blue]//[/color][color=green]创建一个属性节点，name为属性名[/color]
[color=red].createElement( name )[/color] [color=blue]//[/color] [color=green]创建一个Element节点，name为标签名[/color][color=red].createTextNode( data )[/color] [color=blue]//[/color][color=green]创建一个Text节点，data为文本内容[/color]
[color=red].getElementById( id )[/color] [color=blue]//[/color][color=green]查找ID指定的节点，如果有多个相同的ID，则返回第一个Element[/color]
[color=red].getElementsByTagName( name )[/color] [color=blue]//[/color][color=green]查找指定的元素，返回标签名为name的集合，是NodeList类型，取出其中一个，用item()方法[/color]
[color=indigo][b]四、看一下HTMLDocument所具有的属性和方法：[/b][/color]
[b]HTMLDocument是继承自Document的，所以Document和Node所具有的属性和方法，HTMLDocument也同样具有。我们所说的window.document文档对象，其实就是HTMLDocument实例。下面是HTMLDocument自己的扩展：[/b]
[color=red].title [/color][color=blue]//[/color][color=green]<title>标签中的内容[/color]
[color=red].referrer[/color] [color=blue]//[/color][color=green]链接到当前页面的前一页面的URL[/color]
[color=red].domain [/color][color=blue]//[/color][color=green]链接到当前站点的域名[/color]
[color=red].URL [/color][color=blue]//[/color][color=green]当前页的URL[/color]
[color=red].images [/color][color=blue]//[/color][color=green]所有<img>标签的数组[/color]
[color=red].applet [/color][color=blue]//[/color][color=green]所有java applet标签的数组[/color]
[color=red].links [/color][color=blue]//[/color][color=green]所有链接标签的数组[/color]
[color=red].forms [/color][color=blue]//[/color][color=green]包含所有表单节点的数组[/color]
[color=red].anchors [/color][color=blue]//[/color][color=green]锚链接的数组[/color]
[color=red].write( data )[/color] [color=blue]//[/color][color=green]把数据data写到文档中[/color]
[color=red].writeln( data )[/color] [color=blue]//[/color][color=green]把数据data写到文档中，并加一个换行[/color]
[color=red].getElementsByName( name ) [/color][color=blue]//[/color][color=green] 根据名字取节点对象，在IE中只适用于input输入域根据name取节点对象[/color]
[color=indigo][b]五、看一下HTMLElement所具有的属性和方法：[/b][/color]
[b]HTMLElement是继承自Element的，所以Element和Node所具有的属性和方法，HTMLElement也同样具有。下面是HTMLDocument自己的扩展：[/b]
[color=red].id [/color] [color=blue]//[/color] [color=green]属性值[/color]
[color=red].title [/color] [color=blue]//[/color][color=green]title内容[/color]
[color=red].className [/color] [color=blue]//[/color][color=green]class的值，即一个css的class名[/color]
[color=indigo][b]六、几个说明：[/b][/color]
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)的方式。