js - DOM编程核心

DOM Core常用部分:

DOM方法
创建节点:createElement(),createTextNode()
复制节点:cloneNode()
插入节点:appendChild(),insertBefore
删除节点:removeChild()
替换节点:replaceChild()
查找节点:getAttribute(),getElementById(),getElementsByTagName,hasChildNodes
设置节点属性:setAttribute()


DOM属性
节点的属性:nodeName,nodeType,nodeValue
遍历节点 树:childNodes,firstChild,lastChild,nextSibling,parentNode,previousSibling


下面给出这部分的简要用法,做个索引似帮助文档 
1.document.createElement("节点名"):新建一个节点

2.document.createTextNode("文本内容"):新建一个文本节点

3.节点.cloneNode(true|false):复制该节点,参数true则连同子结点一同复制,false则不复制子结点

4.节点.appendChild(子节点):在节点下添加子结点

5.父节点.insertBefore(新节点,参照点):在该父节点下的参照点前面插入新节点.通常父节点这样写:参照点.parentNode

6.父节点.removeChild(子结点):删除该父节点下指定的子结点,该子结点下的所有嵌套子结点都将被删除

7.父节点.replaceChild(新节点,旧节点):把该父节点下的指定子结点替换为新节点

8.节点.getAttribute("属性名"):搜索指定节点的属性名,返回该属性的属性值

9.document.getElementById("id名"):搜索文档中指定id名的节点,返回该节点对象

10.document.getElementsByTagName("标签名"):搜索文档中指定标签名的节点,返回一个节点对象列表(数组), 基数从0开始,具有length属性,表示数组长度

11.节点.hasChildNodes:该节点是否具有子结点,有,返回true,没有子结点返回false(比如文本节点和属性节点)

12.节点.setAttribute("属性名","属性值"):为该节点添加属性,若该属性已经存在则刷新属性值

13.节点.nodeName:根据节点类型区分
    元素节点:返回标签名(相当于tagName属性)
    文本节点:返回#text
    属性节点:返回属性名

14.节点.nodeType:返回节点类型,常用有一下三种:
    元素节点:返回1
    属性节点:返回2
    文本节点:返回3

15.节点.nodeValue:返回节点当前的值,根据节点类型区分:
    元素节点:返回null
    属性节点:返回属性值
    文本节点:返回文本内容

16.节点.childNodes:返回该节点下的所有一级子结点(前面有具体介绍过,这个属性在不同浏览器有不同解释)

17.节点.firstChild:返回该节点下的第一个子结点

18.节点.lastChild:返回该节点下的最后一个子结点

19.节点.nextSibling:返回该节点的下一个兄弟节点对象

20.节点.parentNode:返回该节点的父节点(肯定是一个元素节点,document节点的父节点为null)

21.节点.previousSibling:和nextSibling相对,返回该节点的上一个兄弟节点对象

DOM js插入与追加新结点

<html>  
<head>  
<title>js DOM插入与追加</title>  
<script type="text/javascript">
   /*使用appendChild创建结点*/  
   function CreateNode(str)    
   {  
      //创建新div  
      var NewDiv = document.createElement("div");   
      //对div设置 id属性  
        NewDiv.id = "dd";   
      //创建div内加入的内容  
      var NewText = document.createTextNode(str);  
      //追加一个新的子结点  
        NewDiv.appendChild(NewText);  
      //返回新创建结点数据  
      return NewDiv;                                  
   }  
   //向指定结点前插入新结点函数  
   function AppBefore(nodeId, str)                      
   {  
      var node = document.getElementById(nodeId);  
      var newNode = CreateNode(str);  
      //如果存在双亲结点  
      if(node.parentNode)                                
      {  
         //insertBefore(newchild,refchild)  说明:newchild(插入的新结点) refchild(将新结点插入到此结点前)  
         node.parentNode.insertBefore(newNode, node);  
      }  
   }  
   //向指定结点内插入新结点函数  
   function insertWithin(nodeId, str)    
   {    
      //指定结点 id  
      var node = document.getElementById(nodeId);  
      var newNode = CreateNode(str);  
      //追加一个新的结点  
      node.appendChild(newNode);  
   }  
   //向指定结点后插入新结点函数  
   function AppAfter(nodeId, str)      
   {  
      var node = document.getElementById(nodeId);  
      var newNode = CreateNode(str);  
      //如果存在上一级结点  
      if(node.parentNode)      
      {  
         //如果存在下一子结点  
         if(node.nextSibling)    
         {  
            // 在下一子结点前插入子结点  
            node.parentNode.insertBefore(newNode, node.nextSibling);  
         }else{  
            // 如果没有下一子结点向后追加子结点  
            node.parentNode.appendChild(newNode);  
         }  
      }  
   }  
</script>  
</head>  
<body>  
<h1><center> DOM JS 插入与追加</center></h1>  
<hr>  
<div style="background-clolor: #66ff00;" mce_style="background-clolor: #66ff00;">  
   <div id="appendChild" style="background-color:#ffcc00;" mce_style="background-color:#ffcc00;"></div>  
</div>  
<hr>  
<!--/star-->  
<form id="form" name="form" action="#" method="get">  
    <input type="text" id="files" name="files">  
    <input type="button" value="指定结点前插入新结点" onclick="AppBefore('appendChild', document.form.files.value);">  
    <input type="button" value="指定结点中插入新结点" onclick="insertWithin('appendChild', document.form.files.value);">  
    <input type="button" value="指定结点后插入新结点" onclick="AppAfter('appendChild', document.form.files.value);">  
</form>  
<!--/enf-->  
</body>  
</html>

标签: var, div, 结点, 插入, str