本文介绍了javascript内置对象中的dom文档对象模型,在DOM中,文档有节点组成,节点的类型主要是包括元素节点,属性节点,文本节点,元素的属性不是元素的子节点。
DOM(document object modle )是指W3C定义的标准的文档对象模型。
在DOM中,文档有节点组成,节点的类型主要是包括元素节点,属性节点,文本节点。元素的属性不是元素的子节点
 
Node节点类型
Document         文件阶层中的根节点
Element           一个元素
Attr              一个属性,注意与其他节点类型不同,因为它们不是同一父节点的子节点
processingInstruction  处理命令
Comment           注释
Text              处于一个元素或一个属性中的文本内容(字符数据)
CDATASection      一块包含字符的文本区
Entity            实体
Node对象常用属性
Attributes        如果该节点是一个element,则以NamedNodeMap形式返回该元素的属性
childNodes        以node[]形式存放当前节点的子节点。   
firstChild         以node[]形式放回当前节点的第一个子节点。没有则null
lastChild         以node[]形式放回当前节点的最后一个子节点。 没有则null
nextSibling       以node[]形式放回当前节点兄弟下一个子节点。  没有则null
nodeName        节点的名字,element节点则代表element的标记名称
nodeType         代表当前节点类型
parentNode       以node的形式返回当前节点的父节点
previousSibling    以node的形式返回紧凑当前节点,位于它之前的兄弟节点
Node对象常用方法
 
appendChild()    通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点
cloneNode(0     复制当前节点,或者复制当前节点以及它的所有子孙节点
hasChildNodes()  是否有子节点
insertBefore()    给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除再插入到它的位置
removeChild()    从文档树中删除并返回指定的子节点
replaceChild()     从文档树中删除并返回指定的子节点,用另一个节点替换它
访问文档中的对象
1.getElementsByTagName()方法
返回一个节点列表,可以通过使用方括号标记或使用item()方法来逐个访问这些节点
2.getElementsById()方法
3.getElementsByName()方法
创建节点
 
复制代码 代码示例:
createAtrribute()       用指定的名字创建新的Atrr节点
createComment()            comment节点 
CreateElement()             element节点
createTextNode()             textNode 节点
插入和添加节点
 
复制代码 代码示例:
appendChild()    通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点
insertBefore()    给文档树插入一个节点,位置在当前节点的指定子节点之前。
insertData()      在现有的文本节点中插入一个字符串
删除和替换节点
删除
removeChild()     
deleteData()    ---》从文本节点中删除指定范围的字符
替换
replaceChild()  
replaceData()      替换一个文本节点的数据
对属性进行操作
 
复制代码 代码示例:
createAtrribute() 
setAtrribute()
getAtrribute
removeAtrribute()
例子:
 
复制代码 代码示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>
javascript dom对象演示实例-www.jb200.com</title>  
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="this is my page">  
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
     </head>  
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    <body>  
   <script language="javascript">  
    table =document.createElement("table");  
    thbody=document.createElement("tbody");  
    for(var i=0;i<3;i++){  
      tr=document.createElement("tr");    
      for(var j=0;j<3;j++){  
        td=document.createElement("td");  
        textcell=document.createTextNode("line ="+i+" column="+j);  
        td.appendChild(textcell);  
        tr.appendChild(td);  
      }  
      thbody.appendChild(tr);  
    }  
    table.appendChild(thbody);  
    document.body.appendChild(table);  
    table.setAttribute("border",2);  
   </script>  
  </body>  
</html>