JavaScrip 學習筆記

Java常用DOM方法:

（1） document.getElementById(elementId) 注意:如果頁面上含有多個相同id的節點，那麼只返回第一個節點

（2） document.getElementsByName(elementName)

          在HTML中checkbox和radio都是通過相同的name屬性值

（3） document.getElementsByTagName(tagName)

通過父節點獲取：
（1） parentObj.firstChild  可以遞歸使用的 也就是支持

          parentObj.firstChild.firstChild.firstChild獲得更深層次的節點
（2） parentObj.lastChild

（3） parentObj.childNodes  獲取已知節點的子節點數組

          注意 ：IE7上獲取的是直接子節點的數組，

                     Firefox2.0.0.11上獲取的是所有子節點即包括子節點的子節點。
（4） parentObj.children ：獲取已知節點的直接子節點數組。
          IE7上，和childNodes效果一樣

          Firefox2.0.0.11不支持

（5） parentObj.getElementsByTagName(tagName)

 通過臨近節點獲取：
     （1）neighbourNode.previousSibling ：獲取已知節點（neighbourNode）的前一個節點
     （2）neighbourNode.nextSibling ：獲取已知節點（neighbourNode）的下一個節點

 通過子節點獲取：
     （3）childNode.parentNode ：獲取已知節點的父節點。

 

動態添加頁面元素簡單例子:爲一個表格動態添加單元格及元素

function addRow(){  
  
  var datetype=document.getElementById("date_type_table");
     var newline=datetype.insertRow(-1);
     newCell=newline.insertCell(-1);
     newCell.innerHTML='<select id="startYear" name="startYears" οnchange="yearChanged (this,/'start/')">

           <c:forEach   var="year" items="${dateTimeYear}">

                 <option value="${year}"><c:out value="${year}"/></option>

           </c:forEach></select> /

           <select id="startMonth"  name="startMonths"   οnchange="monthChanged(this,/'start/')">

                    <c:forEach var="month" items="${dateTimeMonth}">

                        <option value="${month}"><c:out value="${month}"/></option>

                    </c:forEach>

           </select> /

           <select id="startDay" name="startDays">

                     <c:forEach var="day" items="${dateTimeDay}">

                          <option value="${day}"><c:out value="${day}"/></option>

                     </c:forEach>

           </select>';
  
       newCell2=newline.insertCell(-1);
       newCell2.innerHTML='-';
  
       newCell3=newline.insertCell(-1);
       newCell3.innerHTML='<select id="endYear" name="endYears" οnchange="yearChanged(this,/'end/')">

              <c:forEach  var="year" items="${dateTimeYear}"><option value="${year}">

                     <c:out value="${year}"/></option>

              </c:forEach></select> /

              <select id="endMonth" name="endMonths"   οnchange="monthChanged(this,/'end/')">

                    <c:forEach var="month" items="${dateTimeMonth}"><option value="${month}">

                          <c:out value="${month}"/></option>

                    </c:forEach>

              </select> /

              <select id="endDay" name="endDays">

                     <c:forEach var="day" items="${dateTimeDay}">

                           <option value="${day}"><c:out value="${day}"/></option>

                     </c:forEach>

               </select>';
  
          newCell4=newline.insertCell(-1);
          newCell4.className="list_right";
          newCell4.innerHTML='<input type="button" value="Delete" class="normalbutton" οnclick="delRow(event)"/>';
 }
  

 

function delRow(evt){
           evt = evt ? evt : (window.event ? window.event : null);
           if(navigator.appName=="Netscape")
                   document.getElementById("date_type_table").deleteRow(evt.target.parentNode.parentNode.rowIndex);  
           else 
           document.getElementById("date_type_table").deleteRow

           (evt.srcElement.parentElement.parentElement.rowIndex);  

}