javascript DOM_javascript dom指的是?-CSDN博客

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&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代码   
    
  
 <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>  

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

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

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