WebApi第三天

一、节点查找
1、父元素 => parentNode
2、子元素 => children // 是一个伪数组集合
3、firstElementChild 第一个孩子
4、lastElementChild 最后一个孩子
5、nextElementSibling=>下一个兄弟元素
6、previousElementSibling=>上一个兄弟元素
二、创建节点
1、document.createElement('标签名称')=> 返回的是一个新创建出来的标签 默认都是在内存里面存放这
说明：但凡是有创建节点, 必定就有添加节点
           如果该标签是事件里面创建出来的, 无法在外部获取.
三、添加节点
1、 appendChild
      语法：parent.appendChild(child)
      parent: 调用者，父节点来调用
      child:需要添加的那个孩子。
       作用：把child添加到parent的孩子的最后面。
2、insertBefore
      语法：parent.insertBefore(child, refChild);
      parent:必须要父节点来调用
      child：需要添加的那个节点
      refChild:添加到哪一个节点的前面。
      细节: 如果refChild找不到 则insertBefore会以appendChild形式追加
      添加的那个节点还可以是页面上已经存在的 => 剪切
四、克隆节点 

         语法：let newNode = 目标节点.cloneNode(deep)
         功能：在内存中克隆一份节点
         参数：deep 布尔值
         - false：默认值：是浅复制，只会复制标签，节点本身，不会复制节点的孩子。
         - true: 深度复制，会复制标签，还会复制标签的所有内容 --- 常用
         返回值: 返回一个一模一样的新节点 在内存中存在 如果需要显示在页面上,就需要配合添加节点操作
         克隆出来的新节点和原模板节点没有任何关系
五、事件对象
       document.onclick = function (event) {
        console.log(event);
      };
六、键盘对象
1、 键盘按下
       document.onkeydown = function (e) {
         console.log('按下键盘');
       };
        在键盘按下的值落到表单之前触发咯，获取的是上一次表单的结果
2、 键盘抬起
      document.onkeyup = function (e) {
         console.log('键盘抬起');
         console.log(e.keyCode);
           if (e.keyCode === 13) {
               console.log('你按下了回车键');
            }
         };
        在键盘按下的值落到表单之后触发咯，获取的是这次表单的结果
七、补充
       字符串.trim()=>去掉首尾空格
       将字符串左右的空格去掉
       返回值: 返回去掉首尾空格的新字符串