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中对节点的操作及案列

猜你喜欢