getElementsByTagName()

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

getElementsByClassName()
返回文档中所有指定类名的元素集合,作为 NodeList 对象。
自定义 getElementsByClassName 方法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript">
    window.onload =function (argument) {
      var oUl1 = document.getElementById('ul1');
      console.info(oUl1)
      var aLi = getElementsByClassName(oUl1,'li','box');

      //设置 aLi 背景色
      for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.background = 'red';
      }
      alert(aLi.length);


  //自定义getElementsByClassName方法
  function getElementsByClassName(parent,tagName,className){

    var aEls = parent.getElementsByTagName(tagName);
    var arr = [];

    for (var i = 0; i < aEls.length; i++) {

      var aClassName = aEls[i].className.split(' ');

      console.log(aClassName.length);

      for (var j = 0; j < aClassName.length; j++) {

        if (aClassName[j] == className) {
          arr.push(aEls[i]);
          //class="box box" 出于各种原因,出现这种情况
          //用break只向 arr 添加第1个 box
           break;
        }
      }


      // if (aEls[i].className == className) {
      //  arr.push(aEls[i]);
      // }
    }
    return arr;
  }


}
</script></head>
<body>
  <ul id ="ul1">
    <li>1111111</li>
    <li class="box box">2222222</li>
    <li class="box1">3333333</li>
    <li class="box box2">4444444</li>
  </ul>
    <ul id="ul2">
    <li>1111111</li>
    <li class="box box">2222222</li>
    <li class="box1">3333333</li>
    <li class="box box2">4444444</li>
  </ul>
  <p class="box"></p>
</body>
</html> 

1.1
表格应用

   tHead :表格头
    tBodies:表格正文   //数组
    tFoot:表格尾    
    rows:行                //数组
    cells :列              //数组
  <table id="tab1" width="80%" border="1px">
    <thead>

    <tr>      
    <th>编号</th>
      <th>Name</th>
      <th>Sex</th>
      <th>操作</th>        
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Li Lei</td>
        <td>男</td>
        <td>
          <a href="javascript:;">删除</a>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>Han MeiMei</td>
        <td>女</td>
        <td>
          <a href="javascript:;">删除</a>
        </td>
      </tr>
    </tbody>
  </table> 
JS方法
      /*
        tHead     :表格头
        tBodies   :表格正文
        tFoot   :表格尾
          rows  :行
          cells   :列
        */
        console.log("tHead:");
        console.log(oTable.tHead);   //<tHead>..</tHead>
        console.log("tBodies:");
        console.log(oTable.tBodies);  //[tbody]
        console.log("tFoot:");
        console.log(oTable.tFoot);  //null
        console.log("rows:");
        console.log(oTable.rows); //[tr,tr,tr]
        console.log("cells:");
        console.log(oTable.cells);  // undefined

      //console.info(oTable.children[1].children[1].children[1].innerHTML) //Han MeiMei
        console.info(oTable.tBodies[0].rows[1].cells[1].innerHTML)  //Han MeiMei 
1.2
示例

表格的创建
数据添加
隔行变色
删除一行
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<script type="text/javascript">
  window.onload =  function (argument) {
    var data = [
    {id:1,username:'leo',sex:'男'},
    {id:2,username:'xiaomei',sex:'女'},
    {id:3,username:'wangliang',sex:'男'},
    {id:4,username:'telly',sex:'女'}
    ];

    var oTab = document.getElementById('tab1');
    var oTbody = oTab.tBodies[0];


    for (var i = 0; i < data.length; i++) {
      
      var oTr = document.createElement('tr');

      //编号
      var oTd  =document.createElement('td');
      oTd.innerHTML = data[i].id;
      oTr.appendChild(oTd);

      //姓名
       oTd  =document.createElement('td');
       oTd.innerHTML = data[i].username;
       oTr.appendChild(oTd);

       //性别
       oTd  =document.createElement('td');
       oTd.innerHTML = data[i].sex;
       oTr.appendChild(oTd);

       //删除
       oTd  =document.createElement('td');
       var oA = document.createElement('a');
       oA.innerHTML ='删除';
       oA.href ='javascript:;';
       
       oA.onclick =function (){     
      //删除一行
      oTbody.removeChild(this.parentNode.parentNode);

        //重新渲染
        for (var i = 0; i < oTbody.rows.length; i++) {
          if (i%2) {
            oTbody.rows[i].style.background="gray";
          }else{
            oTbody.rows[i].style.background="white";
          }
        }
      };
      oTd.appendChild(oA);
      oTr.appendChild(oTd);

      /*
       * 隔行变色
       */
       if (i%2) {
        oTr.style.background="gray";
       }

      oTbody.appendChild(oTr);
    }
  }
</script>
</head>
<body>
  <table id="tab1" width="80%" border="1px">
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>
</html> 
2.1
表单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript">
    window.onload = function(argument) {
      var oForm = document.getElementById('form1');

      /*
       * 查找表单下的控件(使用name)
       * 表单.控件name
       * alert(oForm.text1.value)  //文本框
       */

      /*
       *【onchange】 :当值发生改变的时候触发
       *  text : 当光标离开的时候如果内容有变化就触发 
       *  radio/checkbox: 标准下值变了就触发
       *      非标准下焦点离开的时候如果值变了就会触发
       */

      oForm.city.onchange = function() {
        //alert(this.value)
      }

      oForm.button.onclick = function() {

        //性别radio
        if (oForm.sex[0].checked) {
          console.log('性别:男');
        } else {
          console.log('性别:女');
        }

        //多选checkbox
        var content = "";
        for (var i = 0; i < oForm.checkbox.length; i++) {
          if (oForm.checkbox[i].checked) {
            content += oForm.checkbox[i].value + ' ';
          }
        }
        console.log(content);

        //地区select
        console.log(oForm.city.options[oForm.city.selectedIndex].value)
      }
    }
  </script>
</head>
<body>
  <form id="form1">
    <div>
      <input type="text" name="text1" value="文本框"></div>
    <div>
      <input type="radio" name="sex" value="男" checked>   
      <input type="radio" name="sex" value="女">女</div>
    <div>
      <input type="checkbox" name="checkbox" value="html">    
      html
      <input type="checkbox" name="checkbox" value="css">   
      css
      <input type="checkbox" name="checkbox" value="js">js</div>
    <div>
      <select name="city" id="mySelect">
        <option value="">请选择</option>
        <option value="北京">北京</option>
        <option value="重庆">重庆</option>
        <option value="上海">上海</option>
      </select>
    </div>
    <input type="button" value="提交" name="button">
  </form>
</body>
</html> 

JS中级 - 02:表单、表格的更多相关文章

  1. js动态控制表单表格

    js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <met ...

  2. JS、jqueryie6浏览器下使用js无法提交表单的解决办法

    -----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...

  3. js/jquery/插件表单验证

    媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...

  4. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  5. 通过JS模拟select表单,达到美化效果[demo][转]

    转自: http://www.cnblogs.com/dreamback/p/SelectorJS.html 通过JS模拟select表单,达到美化效果 Demo ------------------ ...

  6. JS 提交form表单

    源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...

  7. 通过JS模拟select表单,达到美化效果[demo]

    .m-form{background:#fff;padding:50px;font-family:12px/1.5 arial,\5b8b\4f53,sans-serif;} .m-form ul,. ...

  8. 表单验证—js循环所有表单验证

    [封装为表单验证的专用js,所有表单页面都可以调用] 1.表单 <form id="regForm" method="post" action=" ...

  9. js重置form表单

      CreateTime--2017年7月19日10:37:11Author:Marydon js重置form表单 需要使用的方法:reset() 示例: HTML部分 <form id=&qu ...

  10. js验证form表单示例

    js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下:   <script type="text/javascript& ...

随机推荐

  1. 关于js css html加载顺序整理

    1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...

  2. 语义化HTML

    一.怎样语义化html结构 语义化是指用合理HTML标签以及其特有的属性去格式化文档内容. 正确语义化----结构(html)才是重点,样式(css)是用来修饰结构的.所以要先确定html,确定标签, ...

  3. web.xml 模板和Servlet版本

    最近没事干,写自己小项目(项目周期无限长.开发效率无限低)的时候,遇到web.xml的dtd声明不正确,这里罗列下从Eclipse里新建项目时,自动生成的web.xml,供以后遇到类似问题的时候进行参 ...

  4. Windows8笔记

    一.WIN8 硬盘变为可弹出设备 如果电脑使用的是nforce芯片组的主板和串口硬盘.在系统中安装好所有的硬件驱动程序后,会出现这种情况.这是nforce芯片组在安装了IDE-SW主板驱动以后,系统会 ...

  5. Caffe学习系列(8):solver及其配置

    solver是caffe的核心. net: "examples/mnist/lenet_train_test.prototxt" test_iter: 100 test_inter ...

  6. Android 数据存储之 SQLite数据库存储

    ----------------------------------------SQLite数据库---------------------------------------------- SQLi ...

  7. Android自定义标题栏

    预览一下效果: 素材: 新建一个布局title_bar.xml,代码如下: <?xml version="1.0" encoding="utf-8"?&g ...

  8. wav转aac

    //调用neroAacEnc.exe STARTUPINFO si={}; PROCESS_INFORMATION pi={};//隐藏窗口 si.cb=sizeof(si); si.dwFlags= ...

  9. 在Navicat for MySQL中打开视图时,提示视图没有主键的问题

    一直把视图理解为一个select语句而已,视图一般就是用于查询,不会通过视图来更新表或视图本身的数据,所以视图根本不需要什么主键.今天自己建了一个视图view_test: drop view if e ...

  10. java导出生成word

    最近做的项目,需要将一些信息导出到word中.在网上找了好多解决方案,现在将这几天的总结分享一下. 目前来看,java导出word大致有6种解决方案: 1:Jacob是Java-COM Bridge的 ...