JS入门

来源：互联网发布：创意工作证设计软件编辑：程序博客网时间：2024/04/28 00:18

1.getElementById

<body>     <form name="form1" action="test.html" method="post" >       <input type="text" name="username" value="reed"  id="tid" >  <input type="button" name="ok" value="保存1"/>     </form>  </body>  <script language="JavaScript"> var tidElement = document.getElementById("tid");//获取对应标签的value属性alert(tidElement.value);       //属性的值   alert(tidElement.type);     </script>

将弹出ok和txt

-----------------------------------------------------------------------------------------------------------------------------------

2.getElementsByName

<body>     <form name="form1" action="test.html" method="post" >  <input type="text" name="tname" value="reed1"  id="tid_1" ><br>  <input type="text" name="tname" value="reed2"  id="tid_2" ><br>  <input type="text" name="tname" value="reed3"  id="tid_3" ><br>  <input type="button" name="ok" value="保存1"/>     </form>  </body>    <script language="JavaScript">   //通过元素的name属性获取所有元素的引用      var tnameElements = document.getElementsByName("tname");      //遍历元素,输出所有value属性的值   for(var i=0;i<tnameElements.length;i++){   var tnameElement = tnameElements[i];alert(tnameElement.value);  }     </script>

依次弹出reed1 reed2 reed3

3.getElementsByTagName

<body>   <form name="form1" action="test.html" method="post" >       <input type="text" name="tname" value="reed_1"  id="tid_1"  ><br>  <input type="text" name="tname" value="reed_2"  id="tid_2"  ><br>  <input type="text" name="tname" value="reed_3"  id="tid_3"  ><br>  <input type="button" name="ok" value="保存1"/>     </form>      <select name="edu" id="edu">     <option value="博士">博士^^^^^</option>  <option value="硕士">硕士^^^^^</option>  <option value="本科" selected="selected" >本科^^^^^</option>  <option value="幼儿园">幼儿园^^^^^</option>   </select>      <select name="job" id="job" >     <option value="美容">美容^^^^^</option>  <option value="IT">IT^^^^^</option>  <option value="程序员">程序员^^^^^</option>  <option value="建筑师">建筑师^^^^^</option>   </select>     </body>    <script language="JavaScript">/**************************************************************************************************/       //获取所有的input元素,返回值是数组     <input type="text" name="tname" value="reed_1"  id="tid_1"  ><br>  <input type="text" name="tname" value="reed_2"  id="tid_2"  ><br>  <input type="text" name="tname" value="reed_3"  id="tid_3"  ><br>  <input type="button" name="ok" value="保存1"/> var inputElements = document.getElementsByTagName("input");    //测试长度alert(inputElements.length);    //遍历输出value的值for(var i=0;i<inputElements.length;i++){var inputElement = inputElements[i];alert(inputElement.value);}//弹出 4 reed_1 reed_2 reed_3 保存1/**************************************************************************************************/ //输出type="text"中 value属性的值 不包含按钮(button)for(var i=0;i<inputElements.length;i++){var inputElement = inputElements[i];if(inputElement.type=="text"){alert(inputElement.value);}}  //弹出  reed_1 reed_2 reed_3 /**************************************************************************************************/    //输出所有下拉选 id="edu" 中option标签中value属性的值    /*    * <select name="edu" id="edu">     <option value="博士">博士^^^^^</option>  <option value="硕士">硕士^^^^^</option>  <option value="本科" selected="selected" >本科^^^^^</option>  <option value="幼儿园">幼儿园^^^^^</option>   </select>    */var eduElement = document.getElementById("edu");var optionElements = eduElement.getElementsByTagName("option");      //输出所有下拉选内容    for(var i=0;i<optionElements.length;i++){   var optionElement = optionElements[i];alert(optionElement.value);   }    //  依次弹出博士 硕士  本科  幼儿园/**************************************************************************************************/    //输出下拉选选中的值   var eduElement = document.getElementById("edu");   alert(eduElement.value);     // 弹出本科  </script>

4.hasChildNodes

 <script language="JavaScript">  //查看id="edu"的节点是否含有子节点  var eduElement = document.getElementById("edu");  alert(eduElement.hasChildNodes());  // true    //查看id="tid_1"的节点是否含有子节点  //<input type="text" name="tname" value="传智播客5周年_1"  id="tid_1"  >  var tidElement = document.getElementById("tid_1");    alert(tidElement.hasChildNodes());    //false  </script>

0 0