DOM节点操作

  1. .访问节点   
  2. document.getElementById(id);  
  3. 返回对拥有指定id的第一个对象进行访问  
  4.   
  5. document.getElementsByName(name);  
  6. 返回带有指定名称的节点集合  
  7.  注意:Elements  
  8.   
  9. document.getElementsByTagName(tagname);  
  10. 返回带有指定标签名的对象集合  
  11.  注意：Elements  
  12.   
  13. document.getElementsByClassName(classname);  
  14. 返回带有指定class名称的对象集合  
  15. 注意：Elements  
  16.   
  17. 2.生成节点  
  18.   
  19. document.createElement(eName);  
  20. 创建一个节点  
  21.   
  22. document.createAttribute(attrName);  
  23. 对某个节点创建属性  
  24.   
  25. document.createTextNode(text);  
  26. 创建文本节点  
  27.    
  28. 3.添加节点  
  29. document.insertBefore(newNode,referenceChild);  
  30. 在某个节点前插入节点  
  31.   
  32. parentNode.appendChild(newNode);  
  33. 给某个节点添加子节点  
  34.   
  35. 4.复制节点  
  36. cloneNode(true | false);  
  37. 复制某个节点  
  38.  参数：是否复制原节点的所有属性  
  39.   
  40. 5.删除节点  
  41. parentNode.removeChild(node)  
  42. 删除某个节点的子节点  
  43. node是要删除的节点  
  44. 注意：IE会忽略节点间生成的空白文本节点(例如，换行符号)，而Mozilla不会这样做。在删除指定节点的时候不会出错，但是如果要删除最后一个子结点或者是第一个子结点的时候，就会出现问题。这时候，就需要用一个函数来判断首个子结点的节点类型。  
  45.  元素节点的节点类型是 1，因此如果首个子节点不是一个元素节点，它就会移至下一个节点，然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法，我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。  
  46.   
  47. 6.修改文本节点  
  48. appendData(data);  
  49. 将data加到文本节点后面  
  50.   
  51. deleteData(start,length);  
  52. 将从start处删除length个字符  
  53.   
  54. insertData(start,data)  
  55. 在start处插入字符,start的开始值是0;  
  56.   
  57.  replaceData(start,length,data)  
  58. 在start处用data替换length个字符  
  59.   
  60. splitData(offset)  
  61. 在offset处分割文本节点  
  62.   
  63. substringData(start,length)  
  64. 从start处提取length个字符  
  65.   
  66. 7.属性操作  
  67. getAttribute(name)  
  68. 通过属性名称获取某个节点属性的值  
  69.   
  70. setAttribute(name,value);  
  71. 修改某个节点属性的值  
  72.   
  73. removeAttribute(name)  
  74. 删除某个属性  
  75.    
  76. <html>  
  77.  <head>  
  78.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  79.     <title>HTML DOM</title>  
  80.    <script type=text/javascript>  
  81.     function   Load_message()  
  82.     {  
  83.      var oimg=document.getElementById("a");  
  84.         alert(oimg.getAttribute("border"));  
  85.      oimg.setAttribute("alt","DOM Test");  
  86.     }  
  87.     </script>  
  88.  </head>  
  89.  <body onload="Load_message();">  
  90.     <img border="0" width="100" height="150" id="a"/>  
  91.  </body>  
  92.  </html>  
  93.   
  94. 8.查找节点  
  95. parentObj.firstChild  
  96. 如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用  
  97. parentObj.firstChild.firstChild.....  
  98.   
  99.  parentObj.lastChild  
  100. 获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用  
  101. parentObj.lastChild.lastChild.....  
  102.   
  103.  parentObj.childNodes  
  104. 获得节点的所有子节点，然后通过循环和索引找到目标节点  
  105.   
  106. 9.获取相邻的节点  
  107. neborNode.previousSibling :获取已知节点的相邻的上一个节点  
  108. nerbourNode.nextSlbling: 获取已知节点的下一个节点  
  109.   
  110. 10.获取父节点  
  111. childNode.parentNode:得到已知节点的父节点  
  112.    
  113. 11替换节点 方法replace(new,old)  
  114.   
  115. <html>  
  116.  <head>  
  117.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  118.        <title>HTML DOM</title>  
  119.    <script type=text/javascript>  
  120.        function replaceMessage()  
  121.        {  
  122.         var oNewp=document.createElement("p");  
  123.         var oText=document.createTextNode("World Hello");  
  124.         oNewp.appendChild(oText);  
  125.         var oOldp=document.body.getElementsByTagName("p")[0];  
  126.         oOldp.parentNode.replaceChild(oNewp,oOldp);  
  127.        }  
  128.        </script>  
  129.  </head>  
  130.  <body onload="replaceMessage();">  
  131.        <p>hello world!</p>  
  132.  </body>  
  133.  </html>  
posted @ 2017-01-11 16:29  天涯海角路  阅读(90)  评论(0)    收藏  举报