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);  

}