JavaScript基礎練習


  
    form.html
    
    
    
  
  
       
          
          
       
  
  <script language="JavaScript">
   //輸出 標簽value屬性的值
   var tidValue = document.getElementById("tid").value;
   alert(tidValue);



   //輸出 標簽type屬性的值
   var tidType = document.getElementById("tid").type;
   alert(tidType);
  </script>



  
    form.html

    
    
    
  

  
       
          





<script language="JavaScript"> //通過元素的name屬性獲取所有元素的引用 var tnameElements = document.getElementsByName("tname"); //測試該數據的長度 alert(tnameElements.length); //遍歷元素,輸出所有value屬性的值 for(var i = 0; i<tnameElements.length; i++){ var tnameValue = tnameElements[i].value; alert(tnameValue); } //為每個文本框()增加chanage事件,當值改變時,輸出改變的值 // 遍歷文本框 for(var i = 0; i<tnameElements.length; i++){ var tnameElement = tnameElements[i]; //增加onchange事件 tnameElement.onchange = function(){ //當值改變時,輸出改變的值 //this代表的是當前所操作的文本框 alert(this.value); } } </script>


  
    form.html

    
    
    
  
  
       
          


博士^^^^^ 碩士^^^^^ 本科^^^^^ 幼兒園^^^^^ 美容^^^^^ IT^^^^^ 程序員^^^^^ 建築師^^^^^ <script language="JavaScript"> /**************************************************************************************************/ //獲取所有的input元素,返回值是數組 var inputElements = document.getElementsByTagName("input"); alert(inputElements); //測試長度 alert(inputElements.length); //遍歷輸出value的值 for(var i = 0; i<inputElements.length; i++){ alert(inputElements[i].value); } /**************************************************************************************************/ //輸出type="text"中 value屬性的值 不包含按鈕(button) for(var i = 0; i<inputElements.length; i++){ var inputElement = inputElements[i]; if(inputElement.type == "text"){ alert(inputElement.value); } } /**************************************************************************************************/ /** 博士^^^^^ 碩士^^^^^ 本科^^^^^ 幼兒園^^^^^ */ //輸出所有下拉選 id="edu" 中option標簽中value屬性的值 var eduElement = document.getElementById("edu"); var optionElements = eduElement.getElementsByTagName("option"); //輸出所有下拉選內容 for(var i = 0; i<optionElements.length; i++){ alert(optionElements[i].value); } /**************************************************************************************************/ //輸出下拉選選中的值 var eduElement = document.getElementById("edu"); alert(eduElement.value); </script>


  
    form.html
    
    
    
  

  

       
          


博士^^^^^ 碩士^^^^^ 本科^^^^^ 幼兒園^^^^^ 美容^^^^^ IT^^^^^ 程序員^^^^^ 建築師^^^^^ <script language="JavaScript"> //查看id="edu"的節點是否含有子節點 var eduElement = document.getElementById("edu"); alert(eduElement.hasChildNodes); //查看id="tid_1"的節點是否含有子節點 var tidElement = document.getElementById("tid_1"); alert(tidElement.hasChildNodes()); </script>


  
    form.html

    
    
    
  

  

       
          


博士^^^^^ 碩士^^^^^ 本科^^^^^ 幼兒園^^^^^ 美容^^^^^ IT^^^^^ 程序員^^^^^ 建築師^^^^^

明天上課

<script language="JavaScript"> /** * DOM 屬性 -- nodeName:一個字符串,其內容是給定節點的名字 * 如果節點是元素節點,nodeName返回這個元素的名稱 * 如果是屬性節點,nodeName返回這個屬性的名稱 * 如果是文本節點,nodeName返回一個內容為#text 的字符串 * ---------------------------------------------------------- * DOM 屬性 -- nodeType:返回一個整數,這個數值代表著給定節點的類型 * Node.ELEMENT_NODE ---1 -- 元素節點 * Node.ATTRIBUTE_NODE ---2 -- 屬性節點 * Node.TEXT_NODE ---3 -- 文本節點 * ---------------------------------------------------------- * DOM 屬性 -- nodeValue:返回給定節點的當前值(字符串) * 如果給定節點是一個屬性節點,返回值是這個屬性的值 * 如果給定節點是一個文本節點,返回值是這個文本節點的內容 * 如果給定節點是一個元素節點,返回值是 null */ //元素節點 id="tid_1" 輸出nodeName nodeType nodeValue var tidElement = document.getElementById("tid_1");//元素節點 alert(tidElement.nodeName);//INPUT alert(tidElement.nodeType);//1 alert(tidElement.nodeValue);//null //文本節點 id="pid" 輸出nodeName nodeType nodeValue var pidElement = document.getElementById("pid");//文本節點 alert(pidElement.nodeName);//#text alert(pidElement.nodeType);//3 alert(pidElement.nodeValue);//明天上課 //屬性節點 id="pid" 中name這個屬性節點 輸出nodeName nodeType nodeValue var nameElement = pidElement.getAttributeNode("name"); //屬性節點 alert(nameElement.nodeName);//name alert(nameElement.nodeType);//2 alert(nameElement.nodeValue);//8888 </script>


  
    form.html

    
    
    
  

  

       
          


您喜歡的城市:
  • 北京
  • 上海
  • 重慶
您喜歡的遊戲:
  • 反恐

    精英

  • 魔獸
  • 傳奇
<script language="JavaScript"> //點擊北京節點, 將被反恐節點替換 /***********方法一*************/ document.getElementById("bj").onclick = function(){ //1 獲取北京節點 var bjElement = document.getElementById("bj"); //2 獲取反恐節點 var fkElement = document.getElementById("fk"); //3 獲取北京節點的父節點 var parentElement = bjElement.parentNode;//parentNode與parentElement效果一樣的 //4 替換 parentElement.replaceChild(fkElement, bjElement); } //5 測試 /***********方法二*************/ document.getElementById("bj").onclick = function(){ //1 獲取反恐節點 var fkElement = document.getElementById("fk"); //2 獲取北京節點的父節點 //this代表的是document.getElementById("bj") var parentElement = this.parentNode;////parentNode與parentElement效果一樣的 //3 替換 parentElement.replaceChild(fkElement,this); } //4 測試 </script>


  
    form.html

    
    
    
  

  

       
          


您喜歡的城市:
  • 北京
  • 上海
  • 重慶
您喜歡的遊戲:
  • 反恐
  • 魔獸
  • 星際爭霸
<script language="JavaScript"> //
  • 星際爭霸
  • 節點的id屬性的值 //1 獲取對應標簽 var xjElement = document.getElementById("xj"); //2.獲取對應屬性 alert(xjElement.getAttribute("id")); </script>

    
      
        form.html
    
        
        
        
      
    
      
    
          您喜歡的城市:
    • 北京
    • 上海
    • 重慶
    您喜歡的遊戲:
    • 反恐
    • 魔獸
    • 星際爭霸
    <script language="JavaScript"> //給這個節點增加 name屬性
  • 星際爭霸
  • //1 增加前獲取屬性 var xjElement = document.getElementById("xj"); //2 增加屬性 xjElement.setAttribute("name","xingjizhengba"); //3 增加後獲取屬性 alert(xjElement.getAttribute("name")); </script>

    
      
        form.html
    
        
        
        
      
    
      
           
              博士^^^^^
              碩士^^^^^
              本科^^^^^
              幼兒園^^^^^
           
    
      
      <script language="JavaScript">
       //增加節點大專^^^^^
            //1 創建大專^^^^^
            //1.1 
            var optionElement = document.createElement("option");//創建元素節點createElement(),傳入的是標簽名
            //1.2 設置屬性
            optionElement.setAttribute("value","大專");
            //1.3 創建一個文本節點
            var textElement = document.createTextNode("大專^^^^^");//創建文本節點createTextNode(),傳入的是文本內容
            //1.4 文本節點插入到option標簽,大專^^^^^
            optionElement.appendChild(textElement);//插入子元素,appendChild(傳入子元素內容)
            //2 獲取id="edu"節點  獲取select標簽
            var eduElement = document.getElementById("edu");
            //3 添加
            eduElement.appendChild(optionElement);
      </script>
    
    

    
      
        insertBefore.html
        
        
        
        <!---->
      
      
           
    • 北京
    • 上海
    • 重慶
    <script language="JavaScript"> // 插入新的節點
  • 天津
  • // 在
  • 重慶
  • 的前面 //1 創建
  • 天津
  • //1.1
  • var liElement = document.createElement("li"); //1.2 設置屬性 liElement.setAttribute("id","tj"); liElement.setAttribute("name","tianjin"); //1.3 創建文本節點 var textElement = document.createTextNode("天津"); //1.4.插入 liElement.appendChild(textElement); //2 獲取重慶
  • 重慶
  • var cqElement = document.getElementById("cq"); //3 獲取重慶節點的父節點 var parentElement = cqElement.parentNode; //4 插入 parentElement.insertBefore(liElement,cqElement); </script>

    
      
        insertBefore.html
        
        
        
        <!---->
      
      
           
    • 北京
    • 上海
    • 重慶
    <script language="JavaScript"> // 插入新的節點
  • 天津
  • // 在
  • 上海
  • 的後面 //1 創建
  • 天津
  • var tjElement = document.createElement("li"); tjElement.setAttribute("id","tj"); tjElement.setAttribute("name","tianjin"); var textElement = document.createTextNode("天津"); tjElement.appendChild(textElement); //2 獲取上海節點 var shElement = document.getElementById("sh"); //3 獲取上海節點的下一個兄弟節點
  • 重慶
  • var cqElement = shElement.nextSibling; //4 獲取上海節點的父節點 var parentElement = shElement.parentNode; //5 添加到上海節點的下一個兄弟節點
  • 重慶
  • 的前面 parentElement.insertBefore(tjElement,cqElement); </script>

    
      
        insertBefore.html
        
        
        
        <!---->
      
      
           
    • 北京
    • 上海
    • 重慶
    <script language="JavaScript"> //刪除
    • 北京
    • 這個節點
    //獲取子節點 var bjElement = document.getElementById("bj"); //獲取父節點 var parentElement = bjElement.parentNode; //刪除 parentElement.removeChild(bjElement); //測試 </script>

    
      
        form.html
    
        
        
        
      
      
          

    <script language="JavaScript"> //在p層中插入

    今天

    //方法一 // //1 創建

    今天

    // var h1Element = document.createElement("h1"); // var textElement = document.createTextNode("今天"); // h1Element.appendChild(textElement); // // //2 獲取p // var pElement = document.getElementById("city"); // // //3 插入 // pElement.appendChild(h1Element); //方法二 document.getElementById("city").innerHTML = "

    今天

    "; </script>

    發佈留言