webapi中对节点的操作及案列

1.查找节点:

孩子节点:children 所有的子元素

firstElementChild 第一个子元素

lastElementChild 最后一个子元素

firstChild  第一个子节点

lastChild最后一个节点

实际中一般不会用系欸但,主要是对元素进行操作

兄弟节点:  previousElementSibling  上一个兄弟元素

                 nextElementSibling   下一个兄弟元素

父节点:parentNode

2.添加节点

parent.append() 往父节点内容的最后面添加

parent.insertBefore(a,y)  往任意指定位置y的前面添加a

两个参数必须写,当第二个参数为null,undefined 时,效果和appendChild一样

如果对于页面中已有的元素,就是剪切的效果

3.克隆节点

cloneNode(deep)

deep是布尔类型,为true,表示深拷贝,标签+内容,如果有id值,需要重新设置,页面中id值是唯一的

如果值为false,表示浅拷贝,只复制标签

注意:拷贝出来的和原来之间的修改是互不影响的

4.删除节点

parent.removeChild() 父元素调用

5.创建节点

1.document.write() 只能往页面中写,页面加载产生文档流存在覆盖问题

2.innerHTML  可以识别标签,慎用,也会存在覆盖问题

3.document.createElement(tagName)

(1)创建出来的元素是存储在内存中

 (2) 需要手动添加到页面中

 (3) 参数:字符串类型的标签名

事件-----概念:触发-----响应的机制

三要素:事件源,事件名称,事件处理程序

注册事件:事件源 on + 事件名称 = function() {...}

    事件触发了才会执行函数

    函数不需要带哦用,浏览器帮我们调用执行

 

表单属性-------常用的有:type name value checked selected disabled

布尔类型的有: checked  selected   disabled

具体说明: 在标签中,只要有这个属性,就能起到作用,dom对象属性值是布尔类型(true,false)

 

例题:实现全选

页面结构:

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="j_cbAll" />
          </th>
          <th>菜名</th>
          <th>饭店</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>红烧肉</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>西红柿鸡蛋</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>红烧狮子头</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>日式肥牛</td>
          <td>田老师</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

js的代码

 <script>

    var all = document.getElementById(‘j_cbAll‘);
    var tbody = document.getElementById(‘j_tb‘);
    var inps = tbody.getElementsByTagName(‘input‘);
    //首先给头部的全选添加点击事件,让下面所有的input的checked属性和全选一致
    all.onclick = function () {
      var checked = this.checked;
      for (var i = 0; i < inps.length; i++) {
        inps[i].checked = checked;
      }
    };

    //给下面的每一个input添加点击事件
    for (var i = 0; i < inps.length; i++) {
      inps[i].onclick = function () {
        //假设成立法
        //假设所有的都是被选中的
        //推翻结论,找是否有没有被选中的
        //假设所有的input都被选中了
        var flag = true;
        //遍历每一个input,判断是否有没被选中的
        for(var i = 0; i< inps.length ; i++){
          if(inps[i].checked === false){
            flag = false;
            break;
          }
        }

        //最后判断flag的值给全选设置checked值
        all.checked = flag ;
      }
    }


  </script>

这个题目中主要用到的一种思想就是假设成立法,假设一个结论,然后去推翻结论的过程。

 

webapi中对节点的操作及案列

上一篇:Windows安装Apache


下一篇:一秒钟升级你的 dialog 到Android L风格