Dom 学习总结以及实例的使用介绍(3)


getElementByName
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>getElementByName的例子</title>
     <script type="text/javascript">
         function btnClick() {
             var radios = document.getElementsByName("gender");
             /*//在JS中for(var r in radios)不像C#中的foreach,并不会遍历每个元素,而是遍历的key
             for (var r in radios) {
             alert(r.value);
             }*/
             for (var i = 0; i < radios.length; i++) {
                 var radio = radios[i];
                 alert(radio.value);
             }
         }
         function btnClick2() {
             var inputs = document.getElementsByTagName("input");
             for (var i = 0; i < inputs.length; i++) {
                 var input = inputs(i);
                 input.value = "welcome to my room";
             }
         }
     </script>
 </head>
 <body>
     <input type="radio" value="男" />男
     <input type="radio" value="女" />女
     <input type="radio" value="保密" />保密
     <input type="button" value="click" />
     <br />
     <input type="text" /><br />
     <input type="text" /><br />
     <input type="text" /><br />
     <input type="text" /><br />
     <input type="text" /><br />
     <input type="button" value="bytagname" />
 </body>
 </html>


案例3:

复制代码 代码如下:


getElementByTagName
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>getElementByTagName</title>
     <script type="text/javascript">
         function initEvent() {
             var inputs = document.getElementsByTagName("input");
             for (var i = 0; i < inputs.length; i++) {
                 var input = inputs[i];
                 input.onclick = btnClick;
             }
         }
         function btnClick() {
             var inputs = document.getElementsByTagName("input");
             for (var i = 0; i < inputs.length; i++) {
                 var input = inputs[i];
                 //window.event.srcElement//取得引发事件的控件
                 if (input == window.event.srcElement) {
                     input.value = "哈哈"; //以下五个按钮,点到的那个就变为“哈哈”,其余都为“呜呜”,点“呜呜”就变为“哈哈”
                 }
                 else {
                     input.value = "呜呜";
                 }
             }
         }
     </script>
 </head>
 <body>
     <input type="button" value="欢迎进入" />
     <input type="button" value="欢迎进入" />
     <input type="button" value="欢迎进入" />
     <input type="button" value="欢迎进入" />
     <input type="button" value="欢迎进入" />
 </body>
 </html>


案例4:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgfxj.html