JavaScript内置对象之DOM学习

发布时间:2020-05-27编辑:脚本学堂
本文介绍了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>