DOM属性：


属性是节点（HTML 元素）的值，您能够获取或设置。 文档里的每个节点都有以下3个属性： nodeName,  nodeType,   nodeValue。更有一些常用属性：innerHTML，parentNode，childNodes ，attributes ，firstChild，lastChild， nextSibling， previousSibling， length


① nodeName


    nodeName:一个字符串，其内容是给定节点的名字。


    var name = node.nodeName;


           * 如果节点是元素节点，nodeName返回这个元素的名称


          * 如果是属性节点，nodeName返回这个属性的名称


           * 如果是文本节点，nodeName返回一个内容为#text 的字符串  


     注意：nodeName 是一个只读属性。


② nodeType


    nodeType：返回一个整数，这个数值代表着给定节点的类型。


    nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：


    Node.ELEMENT_NODE    --- 1      元素节点


    Node.ATTRIBUTE_NODE    --- 2      属性节点


    Node.TEXT_NODE    --- 3      文本节点


      注意：nodeType 是个只读属性


③nodeValue


    nodeValue：返回给定节点的当前值（字符串）
    如果给定节点是一个元素节点，返回值是 null


    如果给定节点是一个属性节点，返回值是这个属性的值。


    如果给定节点是一个文本节点，返回值是这个文本节点的内容。


      注意：nodeValue 是一个   读/写  属性，但不能对 元素节点的 nodeValue 属性设置值， 但可以为文本节点的 nodeValue 属性设置一个值。例如：


    var li = document.getElementById(“li”);


    if(li.firstChild.nodeType == 3)


    li.firstChild.nodeValue = “请叫我木丁西QQ1012421396”;








1 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


2 


<html>


3 


<head>


4 


<title>form.html</title>


5 


        

           6
          
         
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        

           7
          
         
<meta http-equiv="description" content="this is my page">
        

           8
          
         
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
        

           9
          
         
</head>
        

           10
          
         
        

           11
          
         
<body>
        

           12
          
         
        

           13
          
         
<form name="form1" action="test.html" method="post" >
        

           14
          
         
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_1"  id="tid_1"  ><br>
        

           15
          
         
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_2"  id="tid_2"  ><br>
        

           16
          
         
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_3"  id="tid_3"  ><br>
        

           17
          
         
<input type="button" name="ok" value="保存1"/>
        

           18
          
         
</form>
        

           19
          
         
        

           20
          
         
<select name="edu" id="edu">
        

           21
          
         
<option value="博士">博士^^^^^</option>
        

           22
          
         
<option value="硕士">硕士^^^^^</option>
        

           23
          
         
<option value="本科" selected="selected" >本科^^^^^</option>
        

           24
          
         
<option value="幼儿园">幼儿园^^^^^</option>
        

           25
          
         
</select>
        

           26
          
         
        

           27
          
         
<select name="job" id="job" >
        

           28
          
         
<option value="美容">美容^^^^^</option>
        

           29
          
         
<option value="IT">IT^^^^^</option>
        

           30
          
         
<option value="程序员">程序员^^^^^</option>
        

           31
          
         
<option value="建筑师">建筑师^^^^^</option>
        

           32
          
         
</select>
        

           33
          
         
        

           34
          
         
        

           35
          
         
<p id="pid" name="8888">
        

           36
          
         
请叫我木丁西 QQ1012421396
        

           37
          
         
</p>
        

           38
          
         
        

           39
          
         
</body>
        

           40
          
         
        

           41
          
         
<script language="JavaScript">
        

           42
          
         
        

           43
          
         
//元素节点  id="tid_1"  输出nodeName nodeType nodeValue
        

           44
          
         
var tid_1_obj =  document.getElementById("tid_1");
        

           45
          
         
var nodeName = tid_1_obj.nodeName;
        

           46
          
         
var nodeType = tid_1_obj.nodeType;
        

           47
          
         
var nodeValue = tid_1_obj.nodeValue;
        

           48
          
         
alert(nodeName + "#" + nodeType + "#" + nodeValue);
        

           49
          
         
        

           50
          
         
        

           51
          
         
//元素节点 id="pid"  输出nodeName nodeType nodeValue
        

           52
          
         
var pid_obj = document.getElementById("pid");
        

           53
          
         
alert(pid_obj.nodeName + "#" + pid_obj.nodeType + "#" + pid_obj.nodeValue);
        

           54
          
         
        

           55
          
         
//属性节点  id="pid" 中name这个属性节点  输出nodeName nodeType nodeValue
        

           56
          
         
var nameAttribute = pid_obj.getAttributeNode("name");
        

           57
          
         
alert(nameAttribute.nodeName + "#" + nameAttribute.nodeType + "#" + nameAttribute.nodeValue);
        

           58
          
         
        

           59
          
         
//文本节点 id="pid"  输出nodeName nodeType nodeValue
        

           60
          
         
var textObj = pid_obj.firstChild;
        

           61
          
         
alert(textObj.nodeName + "#" + textObj.nodeType + "#" + textObj.nodeValue);
        

           62
          
         
        

           63
          
         
</script>
        

           64
          
         
</html>
   
   
④innerHTML（重点）
    作用：设置或获取位于对象起始和结束标签内的HTML

 
    
          
        
 
        
 
         
        
 
         
 
        

             1
           
 
          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
         

             2
           
 
          
<html>
 
         

             3
           
 
          
<head>
 
         

             4
           
 
          
<title>form.html</title>
 
         

             5
           
 
          
 
         

             6
           
 
          
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 
         

             7
           
 
          
<meta http-equiv="description" content="this is my page">
 
         

             8
           
 
          
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
         

             9
           
 
          
</head>
 
         

             10
           
 
          
<body>
 
         

             11
           
 
          
<div id="city"></div>
 
         

             12
           
 
          
</body>
 
         

             13
           
 
          
<script language="JavaScript">
 
         

             14
           
 
          
//在div层中插入 <h1>今天</h1>
 
         

             15
           
 
          
var city_node = document.getElementById("city");
 
         

             16
           
 
          
city_node.innerHTML = "<h1>今天</h1>";
 
         

             17
           
 
          
</script>
 
         

             18
           
 
          
 
         

             19
           
 
          
</html>
 
    
 
    
 
    
 
     
 
⑤parentNode
 
   作用：parentNode 属性以 Node 对象的形式返回指定节点的父节点。
 
如果指定节点没有父节点，则返回 null。    
 
⑥childNodes
 

    
  
 作用：childNodes 属性返回节点的子节点集合，以 NodeList 对象。
 
 

    
  
 注意：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。
 
 
⑦attributes
 

    
  
 作用：attributes 属性返回指定节点的属性集合，即 NamedNodeMap。
 
 

    
  
 注意：您可以使用 length 属性来确定属性的数量，然后您就能够遍历所有的属性节点并提取您需要的信息。
 
 
⑧firstChild
 

    
  
 作用：firstChild 属性返回指定节点的首个子节点，以 Node 对象。
 
 

    
  
 注意：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。
 
 
⑨lastChild
 

    
  
 作用：lastChild 属性返回被选节点的最后一个子节点。
 如果选定的节点没有子节点，则该属性返回 NULL。
 
⑩nextSibling
 

    
  
 作用：nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。
 被返回的节点以 Node 对象返回。
 
    注意：
 如果没有 nextSibling 节点，则返回值为 null。
 
 
⑪previousSibling
 

    
  
 作用：previousSibling 属性返回选定节点的上一个同级节点（在相同树层级中的前一个节点）。
 如果不存在这样的节点，则该属性返回 null。
 
⑫length
 

    
  
 作用：
 length 属性可返回集合中节点的数目。在遍历节点集合的时候容易出问题，需注意
 
    注意：length属性将返回一个元素所有可能的节点书数目。
    例如： 
 
       

 
          
 
               
 
               
 
               
 
                
               
 
                
 
               

                    1
                  
 
                 
<select name="first" size="10" multiple="multiple" class="td3" id="first">
 
                

                    2
                  
 
                 
<option value="选项1">选项1</option>
 
                

                    3
                  
 
                 
<option value="选项2">选项2</option>
 
                

                    4
                  
 
                 
<option value="选项3">选项3</option>
 
                

                    5
                  
 
                 
<option value="选项4">选项4</option>
 
                

                    6
                  
 
                 
<option value="选项5">选项5</option>
 
                

                    7
                  
 
                 
<option value="选项6">选项6</option>
 
                

                    8
                  
 
                 
<option value="选项7">选项7</option>
 
                

                    9
                  
 
                 
<option value="选项8">选项8</option>
 
                

                    10
                  
 
                 
</select>
 
           
 
           
 
           
 
            
     一个select下有8个option项，document.getElementById("first").childNodes.length=16，而不是8，
 document.getElementById("first").getElementsByTagName("option").length=8才是正确的。