DOM常用API、属性、方法、函数

来源：互联网发布：淘宝双12报名入口编辑：程序博客网时间：2024/06/16 21:55

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>DOM常用属性和方法</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

</HEAD>

<BODY id="bb">
<table id="tab" border=1>
  <thead id="Thead">
  <tr>
   <th onClick="sortTable('tab',0,'int')" style="cursor:pointer">ID</th>
   <th onClick="sortTable('tab',1)" style="cursor:pointer">姓名</th>
   <th onClick="sortTable('tab',2,'int')" style="cursor:pointer">年龄</th>
   <th onClick="sortTable('tab',3,'date')" style="cursor:pointer">出生日期</th>
  </tr>
  </thead>
  <tbody id="Tbody">
  <tr id="tr1">
   <td width=100 id="ID">1</td>
   <td id="name" width="100">张三</td>
   <td id="age" width="100">25</td>
   <td id="date" width="100">1970-9-9</td>
  </tr>
  <tr id="tr2">
   <td width=100 id="ID">3</td>
   <td id="name" width="100">李四</td>
   <td id="age" width="100">18</td>
   <td id="date" width="100">1980-9-9</td>
  </tr>
  <tr id="tr3">
   <td width=100 id="ID">2</td>
   <td id="name" width="100">王五</td>
   <td id="age" width="100">19</td>
   <td id="date" width="100">1990-9-9</td>
  </tr>
  <tr id="tr4">
   <td width=100 id="ID">6</td>
   <td id="name" width="100">续写</td>
   <td id="age" width="100">22</td>
   <td id="date" width="100">1965-9-9</td>
  </tr>
  <tr id="trr" name="rr">
   <td width=100 id="ID1">5</td>
   <td id="name" width="100">经典</td>
   <td id="age" width="100">30</td>
   <td id="date" width="100">1950-9-9</td>
  </tr>
  </tbody>
</table>
<div id="textDiv">测试</div>
<div id="txt"></div>
<div id="removeDiv">removeDiv</div>
<div id="txtDiv">aaa</div>
<form name="form1"></form>
<form name="form2"></form>
<a href="#" name="a1">超链接一</a>
<a href="#" name="a2">超链接二</a>

</BODY>
<script type="text/javascript" >
  //返回指定id的元素节点
  function $(id){
   return id ? document.getElementById(id) : id ;
  }
/* */
  var oHtml = document.documentElement; //得到<html>元素
  alert("节点名称："+oHtml.nodeName);
  alert("节点类型："+oHtml.nodeType);

  //获取<head> 元素的几种方法，效果一样
  var oHead = document.head;
  oHead = oHtml.firstChild;
  oHead = oHtml.childNodes.item(0);
  oHead = oHtml.childNodes[0];
  oHead = oHtml.children.item(0);
  oHead = oHtml.children[0];

  //获取 <body>元素的几种方法，效果一样
  var oBody = document.body;
  oBody = oHtml.lastChild;
  oBody = oHtml.childNodes.item(1);
  oBody = oHtml.childNodes[1];
  oBody = oHtml.children.item(1);
  oBody = oHtml.children[1];

  alert(oHead.parentNode == oHtml); //head节点的父节点是html节点，返回 true
  alert(oBody.parentNode == oHtml); //body节点的父节点是html节点，返回 true
  alert(oBody.previousSibling == oHead); //body节点的上一个兄弟节点是head节点，返回 true
  alert(oHead.nextSibling == oBody);//head节点的下一个兄弟节点是body节点，返回 true
  alert(oHead.ownerDocument == document); //判断head节点的根元素是否指向Document，返回 true
  alert(oBody.ownerDocument == document); //判断body节点的根元素是否指向Document，返回 true

  var tdArray = document.getElementsByTagName("td"); //得到一个td标签的集合
  for(var i=0;i<tdArray.length;i++){ //遍历集合，输出所有标签的内容
   alert(tdArray[i].innerHTML);
  }

  var node = $("textDiv");
  alert(node.innerHTML);

  //创建一个div元素节点
  var div = document.createElement("div");
  alert(div.nodeType);
  //创建一个文本节点
  var text = document.createTextNode("创建的文本节点");
  alert(text.nodeType);
  var txtNode = $("txt");
  txtNode.appendChild(text); //将创建的文本节点添加到指定的元素内
  alert(txtNode.innerHTML); //输出文本节点的内容

  //为元素设置属性值
  //div.id = "myID";
  div.setAttribute("id","myID"); //效果同上，为创建的div设置id属性
  alert("div的属性id的值是："+div.getAttribute("id")); //获取div的属性id的值，如果属性不存在，返回null

  //设置div中的内容
  div.innerHTML = "<p>续写经典</p>";

  //将创建的div加入到body中
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(div);

  //通过id查找元素
  div = $("myID");
  alert(div.innerHTML); //访问id为“myID”的元素的内容

  //获得表格的集合
  var arr = new Array();
  arr = document.getElementById("tab").rows; //获得id为“tab”的表格的集合
  alert("表格的行数为："+arr.length);
  //删除表格中指定的一行数据
  document.getElementById("tab").deleteRow(arr.length-1);

  var han = {
   //获取子节点的集合（ie，ff通用）
   getChildNodes:function(node){
    var arr = [];
    var nodes = node.childNodes;
    for(var i in nodes){
     if(nodes[i].nodeType == 1){ //查找元素节点
      arr.push(nodes[i]);
     }
    }
    return arr;
   },
   //获取第一个元素子节点（ie，ff通用）
   getFirstElementChild : function(node){
    return node.firstElementChild ? node.firstElementChild : node.firstChild ;
   },
   //获取最后一个元素子节点（ie，ff通用）
   getLastElementChild : function(node){
    return node.lastElementChild ? node.lastElementChild : node.lastChild ;
   },
   //获取上一个相邻节点（ie，ff通用）
   getPreviousSibling : function(node){
    //找到上一个节点就返回节点，没找到就返回null
    do{
     node = node.previousSibling;
    }while(node && node.nodeType!=1)
    return node;
   },
   //获取下一个相邻节点（ie，ff通用）
   getNextSibling : function(node){
    //找到下一个节点就返回节点，没找到就返回null
    do{
     node = node.nextSibling;
    }while(node && node.nodeType!=1)
    return node;
   },
   //将元素插入到指定的node节点后面
   insertAfter : function(newNode,targetNode){
    if(newNode && targetNode){
     var parent = targetNode.parentNode;
     var nextNode = this.getNextSibling(targetNode);
     if(nextNode && parent){
      parent.insertBefore(newNode,nextNode);
     }else{
      parent.appendChild(newNode);
     }
    }
   }
  };
  //创建一个div元素节点
  var newDiv = document.createElement("div");
  newDiv.innerHTML = "一二三四";
  var div1 = $("textDiv");
  //将元素插入到指定节点后面
  han.insertAfter(newDiv,div1);

  //创建一个div元素节点
  var newDiv2 = document.createElement("div");
  newDiv2.innerHTML = "五六七八";
  var div2 = $("textDiv");
  //将元素插入到指定节点前面
  div2.parentNode.insertBefore(newDiv2,div2);

  //获取子节点的个数（ie，ff通用）
  var a2 = han.getChildNodes(Tbody);
  alert("body子节点长度："+a2.length);

  //获取首个子节点的内容（ie，ff通用）
  var firstNode = han.getFirstElementChild(tab).innerHTML;
  alert("tab的首个子节点内容是："+firstNode);

  //获取最后一个子节点的内容（ie，ff通用）
  var lastNode = han.getLastElementChild(tab).innerHTML;
  alert("tab的最后一个子节点内容是："+lastNode);

  alert("tab的父节点名字是："+tab.parentNode.nodeName); //获取父节点名字
  alert("tab的父节点类型是："+tab.parentNode.nodeType); //获取父节点类型
  alert("tab的父节点值是："+tab.parentNode.nodeValue); //获取父节点值

  var node = document.getElementById("Tbody");
  var myNextSibling;
  if(han.getNextSibling(node)){
   myNextSibling = han.getNextSibling(node);
   alert("Tbody的下一个相邻的节点名字是："+myNextSibling.nodeName);
  }else{
   alert("已经是最后一个节点");
  }

  var node1 = document.getElementById("Thead");
  var myPreviousSibling;
  if(han.getPreviousSibling(node1)){
   myPreviousSibling = han.getPreviousSibling(node1);
   alert("Thead的上一个相邻的节点名字是："+myPreviousSibling.nodeName);
  }else{
   alert("已经是第一个节点");
  }

  //克隆函数,参数为true时：克隆并包括所有子对象；参数为false时：克隆但不包括所有子对象
  var cloneNode = textDiv.cloneNode(true);
  txtDiv.appendChild(cloneNode);

//检测是否包含有网页元素( HTML Elements )或 TextNodes 对象。返回boolean类型的值
alert(tr3.hasChildNodes());

//删除一个子节点，所有子对象将被一起删除
var remove = bb.removeChild(removeDiv);

  //替换一个子对象，被替换时，所有与之相关的属性内容都将被移除
  var newDIV = document.createElement("div");
  newDIV.innerHTML = "一生经典";
  //var replace = bb.replaceChild(newDIV,$("textDiv")); //方法一
  var replace = $("textDiv").replaceNode(newDIV); //方法二，两种效果一样

  //forms:当前文档中的所有表单集合
  alert("<form>表单的个数："+document.forms.length); //获取集合的长度
  for(var i=0;i<document.forms.length;i++){ //遍历集合,输出每一个元素
   alert(document.forms[i].name);
  }
  //links:当前文档中所有超链接元素的集合
  alert("<a>元素的个数："+document.links.length); //获取集合的长度
  for(var i=0;i<document.links.length;i++){   //遍历集合，输出每一个元素
   alert(document.links[i]);
  }

</script>
</HTML>