JavaScript(WebAPI)

写个堆排

已于 2023-03-31 18:40:19 修改

阅读量2.6k

点赞数 24

文章标签：前端 javascript

于 2022-04-25 20:38:46 首次发布

本文链接：https://blog.csdn.net/weixin_61518137/article/details/124379310

版权

1)要想写出实际的程序，光会语言是不够的，还需要掌握相关的生态或者框架

2)对于在浏览器上面运行的JS来说，最最核心的库就是DOM API，这是浏览器给JS提供的原生接口，基于这样子的接口，就可以针对页面上的元素进行操作了

3)DOM就是文档对象模型，HTML会把每一个HTML标签，都视为一个JS中可以进行操作的对象，操作这个对象就可以影响到界面的显示，JS操作对象，文档就会发生改变；

4)原生的DOM API是可以进行使用，但是并不方便，因此除了原生的DOM API之外，也存在大量的第三方库或者框架；

1)文档:一个页面就是一个文档，用document来表示；

2)元素:页面中的所有标签都可以成为元素，用element来表示；

3)节点:网页中的所有内容都可以称之为节点，比如说标签节点，注释节点，文本节点，属性节点，使用node来进行表示；

4)DOM树:本质上提供了一组一系列的函数，让我们可以操作网页内容，网页结构，网页样式，所以一个页面的结构是一个树形结构，称为DOM树；

所以说DOMAPI就是为了操作HTML页面中的各种元素，这里面有属性和方法；一个DOM树上有很多的对象，所以我们要先选中这个对象，然后再进行操作

一)获取元素:

要是想操作界面上的元素，那么首先必须先拿到对应的JS对象

当我们使用querySelector的参数的选择器的时候，匹配到了多个元素的时候，此时返回的对象，就是匹配结果中的第一个元素

获取元素:这两个类中的参数都是字符串类型，这个字符串是一个CSS选择器，对于他们的区别，例如在参数中加一个div

1)querySelector:就会返回多个被选元素中的第一个，也就是说第一个出现的div

2)querySelectorAll:就会把选中的所有带div的多个，以数组的形式全部返回回来

这两个方法都是基于document这个实例来调用的，得到的效果是相当于是在当前页面的全局中来查找符合要求的元素；

3)document是页面中的全局对象，当一个页面被加载好了，就会自动生成一个全局变量叫做document，这里面就有一些属性和方法，让我们操作界面元素的内容
 <div id="two">今天心情挺好</div>
  <script>
    let object=document.querySelector("#two");
    console.log(object.innerHTML);
  </script>
<body>
    <div class="father">
        <div class="child1">child1</div>
        <div class="child2">child2</div>
        <div class="child3">child3</div>
    </div>
    <script>
        //选中的结果是一个元素
        let a=document.querySelector("div");
        console.log(a);
        let b=document.querySelectorAll("div");
//这个b的类型就是一个数组
        console.log(b);
    </script>
准确的来说，querySelcorAll返回的并不是一个真正的原生数组，而是一个对象，，只不过说这个对象，有length，也是可以通过下标的方式来进行访问内部元素

1)事件:一些复杂的程序，往往要涉及到一些组件之间的通信，事件机制就是一种非常典型，也是一种非常常见的组件之间通信的机制，JS中的很多代码，大部分都是依靠用户操作产生的，事件就是浏览器对于用户的操作行为进行了一个统称，JS中的代码大部分是依靠页面产生的；

2)事件也是用户和程序之间交互的桥梁，当用户进行了某些操作时也会引发事件

JS干的一个主要工作就是在不同的事件中，进行不同的处理；

3)事件源：哪个HTML元素触发的事件；

4)事件类型：鼠标移动，鼠标点击，键盘事件，还是窗口大小改变事件

5)事件处理程序：当事件产生之后，JS代码进一步如何进行处理，往往是一个回调函数；

回调函数表示这个函数不会被立即调用，而是在合适的时机，被库或者是框架自动调用
 <input type="button" value="我是一个按钮">
   <script>
       let a=document.querySelector("input");
//事件的注册，绑定一个事件
//on 在xxx的时候
       a.onclick=function()
       {
           alert("hello");
       }
   </script>

1)所以当我们点击这个按钮的时候，就会触发这个点击事件，就会触发显示hello；
2)这里面的button就是事件源，click就是事件的类型；
3)通过onclick属性就可以关联到一个具体的事件处理函数，当button触发了click事件，就会自动调用onclick对应的函数；
      <div onclick="func()">请点我</div>
       <script>
        function func(){
            alert("点击啥");
        }
       </script>

二)操作元素内部内容

1)获取获取修改元素的内容:

2)最里面的，可能是一个文本，一个图片，还可能是一个链接，还可能是一个HTML片段；

3)需要用到的是对象的innerHTML()方法

1)注意一下这里面的innerHTML得到的是一个String类型，如果想要进行数字相加，就需要把字符串转化成整数，JAVA中的parseInt是把字符串转化成整数

2)但是JS中的parseInt相当于是一个全局的函数

3)对于input这样的单标签来说，想要获取到里面的内容，就需要通过value属性来进行获取
<div class="one">hello</div>
<input type="button" value="点击按钮，修改文本">
<script>
//选中button元素，和字体的元素，因为我们要点击的是按钮，我们就可以为按钮注册一个点击事件
let button=document.querySelector('input');
//这里面的内容只可以写input，不可以写成button，因为这里面这可以是选择器
button.onclick=function(){
    let text=document.querySelector('.one');
    text.innerHTML="<a href=http://www.baidu.com>点击跳转到百度首页</a>>";
}
  </script>

一)基于JS来实现一个简单的计数器:

<style>
 /* justfy-content和align-items必须在display:flex的搭配情况下使用，他的写法一般放到父亲级别的元素中使用 */
        .father{
            background-color:grey;
            width:400px;
            height:300px;
            margin:0 auto;
            /* align-items:center; */
/* 父类元素是整个浏览器，子元素是.parent margin是控制整个.father在浏览器水平方向上居中 */
        }
      .number{
          /* background-color:green; */
          height:150px;
          width:150px;
          /* 父亲元素是.father这个是控制number控制的背景元素在在水平上居中 */
           margin:0 auto; 
          text-align:center;
          font-size:150px;
          line-height:150px;
      }
 /* 这时把+和-全部放到一个背景颜色中进行操作 */
      .ctrl{
          /* 让这个背景区中的元素变成行内块元素，既可以水平排列，又可以调制大小 */
          display:flex;
          /* 控制它在水平方向上之间来一个打空格 */
          justify-content:space-between;
          align-items:center;
         /* 控制它在垂直方向上居中 */
          margin:0 auto;
          /* 让这个加号和减号操作的背景水平居中 */
          background-color:blue;
          width:200px;
          height:150px;
          
      }
      .add,.sub{
          height:50px;
          width:50px;
          font-size:50px;
          text-align: center;
          line-height:50px;
      }
    </style>
</head>
<body>
    <div class="father">
        <div class="number">0</div>
        <div class="ctrl">
    <button class="add">+</button>
     <button class="sub">-</button>
     </div>
  <script>
         let addbutton=document.querySelector(".add");
         let subbutton=document.querySelector(".sub");
         let number=document.querySelector(".number");
         addbutton.onclick=function(){
        let count=number.innerHTML;
        count++;
        number.innerHTML=count;
         }
         subbutton.onclick=function(){
         count=number.innerHTML;
        count--;
        number.innerHTML=count;
         }
     </script>   
<body>

三)修改元素属性:

一)修改img元素标签的属性

1)HTML中的指定的属性，最终都会体现在JS中，所以说HTML中的元素在JS中会有一个对应的对象，通过queryselector()可以把这个对象获取出来，这个对象包含了很多很多的属性，通过.就可以访问这里面的属性；如果直接修改JS中的属性，就会影响到HTML页面中的展示效果；

2)操作元素属性:通过Dom对象.属性名就可以进行操作了

3)一个HTML标签里面，能写哪些属性，就同样可以通过JS中的DOM对象来获取一样的属性，可以通过console.dir(对象名)可以打印出Dom对象全部的属性和值

4)判断一下如果当前的img是男孩子的图片，就把他转换成女孩子，反之则把它转换成男孩子；在JS中，如果想要比较两个字符串是否相等，就用==号；
 <img src="郭宇泽.png" title="生命在于运动" alt="生命在于运动">
   <script>
       let img=document.querySelector("img");
       //打印这个元素具体的属性
       console.dir(img);
       console.log(img.src);
       console.log(img.title);
       console.log(img.alt);
   </script>
二)修改表单元素标签的属性

1)value:input标签里面的值；

input具有一个重要的属性value，这个value决定了表单元素的内容，如果是输入框，value表示输入框的内容，修改这个值可能会影响到页面显示，在界面上修改这个值也会影响代码的属性，如果是按钮，那么value表示按钮的内容，通过这个来实现按钮中文本的替换
2)disabled:禁止使用；
3)checked:复选框会使用；
4)selected:下拉框会进行使用；
5)type:input的文本类型,文本，密码，按钮，文件
<body>
    <img src="郭宇泽.png" title="这是个傻逼" alt="这是个好人">
    <script>
        let img=document.querySelector("img");
        img.onclick=function(){
       if(img.alt=="这是个好人")
       {
           img.src="张智超.png";
           img.title="这是个聪明人";
           img.alt="这是个聪明人";
       }else{
           img.src="郭宇泽.png";
           img.alt="这是个好人";
           img.title="这是个好人";
       }
    }
    </script>

实例1:对一个按钮实现暂停和播放操作:

  <input type="button" value="播放">
    <script>
        let button=document.querySelector("input");
        button.onclick=function(){
            if(button.value=="播放")
            {
                button.value="暂停";
            }else{
                button.value="播放";
            }
        }
    </script>

示例2):实现全选，复选框按钮，时间复杂度是O(N)

1)这两次点击按钮都是针对全选框按钮来说的，当我们点击全选按钮之后，我们要进行循环扫描别的按钮，并将所有的按钮状态都设置成all按钮的状态。这是实现了点击all按钮实现了全部选择框选中

2)我们首先使用一层循环，来循环遍历除了all选框的所有按钮，创建回调函数，当我们进行点击每一个小按钮的时候，都要进行判断，再次循环遍历每一个按钮，如果说有一个按钮为未被选中，那么all这个按钮就是不可以被选中的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="father">你想要未来哪一个人给你当老婆</div><br>
    <input type="checkbox" class="all" id="0" onclick="func()"><label for="0" >全都要</label>
    <input type="checkbox" class="person" id="1" onclick="sub()"><label for="1">小乔</label>
    <input type="checkbox" class="person" id="2" onclick="sub()"><label for="2">安琪拉</label>
    <input type="checkbox" class="person" id="3" onclick="sub()"><label for="3">妲己</label>
    <input type="checkbox" class="person" id="4" onclick="sub()"><label for="4">西施</label>
    <script>
         let all=document.querySelector(".all");
         let checkboxs=document.querySelectorAll(".person");
         function func(){
            console.log(checkboxs);
            for(let i=0;i<checkboxs.length;i++){
                 checkboxs[i].checked=all.checked;
            }
        }
        function sub(){
            for(let i=0;i<checkboxs.length;i++){
                    if(checkboxs[i].checked==false){
                        all.checked=false;
                        return;
                    }
            }
               all.checked=true;
        }
    </script>
    
</body>
</html>

<body>
  <div class="father">
      <h3>你想要哪个人来给你当老婆</h3>
      <input type="checkbox" class="person" id="1"><label for="1">妲己</label><br>
      <input type="checkbox" class="person" id="2"><label for="2">安琪拉</label><br>
      <input type="checkbox" class="person" id="3"><label for="3">小乔</label><br>
      <input type="checkbox" class="person" id="4"><label for="4">阿轲</label><br>
      <input type="checkbox" class="person" id="5"><label for="5">西施</label><br>
      <input type="checkbox" class="all" id="6"><label for="6">我全都要</label>
  </div>
  <script>
      //1 先把要用到的元素全部取出来
      let persons=document.querySelectorAll(".person");
      let all=document.querySelector(".all");
      //2当我全都要这个选项被点击后，就要把所有的选框都要自动勾选
      all.onclick=function(){
      for(let i=0;i<persons.length;i++)
      {
        persons[i].checked=all.checked;
      }
      //3根据person的各种元素的状态来选中all的值,当所有的persons的值都被选中之后，就会把all.checked的值设成true
      //只要有一个person没有被选中，那么就把all.checked设成false
      //没当我们点击一个事件时，就要检查所有的元素的点击情况
    }
    for(let j=0;j<persons.length;j++)
    {
        persons[j].onclick=function()
        {
                all.checked=checkperson();
        }
    }
    function checkperson()
    {
//遍历所有的person超看他们的checked状态
//如果所有的checked都是true,那么最终返回true，也就是把all.checked设成true
//只要有一个person checked是false,namejoufanhuifalse
for(i=0;i<persons.length;i++)
{
   if(!persons[i].checked)
   {
       return false;
   }
}
return true;
    }
  </script>
</body>

三)获取修改样式属性:

相关的属性有两个：

1))style属性，影响了行内样式，他是直接嵌入到html元素中的样式；

2))className属性，给元素设置一个CSS类名；

注意:CSS中的属性，是带有-的，但是我们在JS中获取元素时可以用驼峰命名法；

例如background-color可以转换成backgroundColor

示例一: 我们设定：每次点击文字的时候，就让他的字体进行放大

parseInt再进行转换的时候，会从前向后进行转换

如果遇到非数字字符，那么就直接转换停止
<body>
    <div style="font-size:20px">李佳伟真帅</div>
    <script>
        let div=document.querySelector("div");
        div.onclick=function()
        {   //1.先获取元素的字体大小
            console.log(div.style.fontSize);
            //这样得到的div.style.fontSize是一个字符串，首先要把他转化成整数
            //2.parseInt有一个特点，当她遇到px的时候，就不会进行转化
            let number=parseInt(div.style.fontSize);
            number+=10;
            div.style.fontSize=number+"px";
        }
    </script>
</body>
<div style="font-size:20px" id="o" onclick="func()">李佳伟真帅</div>
<script>
     let element=document.querySelector("#o");
     function func(){
       let size=parseInt(element.style.fontSize);
       size=size+10;
       element.style.fontSize=size+"px";
     }
</script>
面试的时候，你的职责就是回答问题，而不是提出问题，是由抬杠的嫌疑的，也许这一回合你抬赢了，但是赢了也是输了；

1)让面试官介绍一下他们团队负责的业务，突显出你的兴趣，而且这个问题面试官也非常好发挥，再面试官说的时候不经意间就发动狂舔技能，技术含量真高，好厉害优；

2)让面试官介绍一下公司的新人培养机制；

其他问题一概不问，比如说公司加不加班，你公司工资是多少，你觉得你们团队好不好

示例二: 夜间模式的切换

黑天显示背景颜色A，字体颜色为B；

白天显示背景颜色为B，字体颜色为A；

  *{
          margin:0;
          padding:0;
          box-sizing:border-box;
      }
      .light{
          background-color:black;
          color:red;
      }
      .dack{
          background-color:green;
          color:blue;
      }
      .father{
          height:300px;
          width:300px;
          margin:0 auto;
          text-align:center;
          line-height:300px;
      }
      .one{
          display:flex;
          /* padding也需要放在父亲元素里面 */
          padding:10px;
      }
      button{
          margin:0 auto;
          height:50px;
          width:100px;
          border-radius:20px;
          
      }
      button:active{
          background-color:blue;
      }
    </style>
</head>
<body>
    <div class="father light">
        你敢点我吗
    </div>
    <div class="one">
    <button>点我切换模式</button>
    </div>
    <script>
        let div=document.querySelector("div");
        let button=document.querySelector("button");
        button.onclick=function(){
            if(div.className.indexOf("light")!==-1)
            {
                div.className="father dack";
                div.innerHTML="你在点一个试试";
            }else{
                div.className="father light";
                div.innerHTML="你敢点我吗";
            }
        }
    </script>

四)进行操作节点

上面的针对元素操作，本质上就是在操作元素的属性，但是元素本身并没有发生改变，针对于节点操作，本质上就是在新增节点，删除节点，移动节点

一)新增节点：

1)创建出一个节点，调用document.createElement(标签名加上双引号)，接下来还可以对这个标签对象设置多个属性；

2)把这个节点给挂到DOM树上

1))parent.append(child)，创建出child元素，选中页面中已有的parent，把child加到parent里面，如果parent已经有了一组child，就把新的child放到最后面；

2))parent.insertBefore(newchild，oldchild)，这是就把新的newchild插入到parent的子元素中，oldchild的前面；
 <div class="father">
        <div class="one">我叫李家伟</div>
        <div class="two">我拿到了字节的offer</div>
    </div>
    <script>
        let div=document.createElement("div");
        div.id="MYDIV";
        div.className="three";
        div.innerHTML="helloworld";
        console.log(div);
        //第一种插入方式
        //先获取到父类的元素
        //再调用appendchild()方法把最新的元素放在最后面；
        let father=document.querySelector(".father");
        father.appendChild(div);
        //第二种插入方式
        //先获取到父类的元素；和要插入在那个元素后面的元素
        father=document.querySelector(".father");
        let oldchild=document.querySelector(".one");
        father.insertBefore(div,oldchild);
    </script>
二)删除节点：

oldchild=element.removeChild(child);

1)先拿到父亲节点

2)再拿到要删除的子节点

注意:这里面被删除的节点只是从dom树里面被剔除了，但是此时仍然在内存中，可以随时加到dom树中的其他位置

那么什么时候他被彻底的删除了呢？

当没有这个引用指向这个对象的时候，JS中也是有垃圾回收机制的；例如说当一个引用在函数里面，这个函数的调用已经结束了，那么这个引用肯定也已经凉凉了；

示例一:正常的页面上显示：李佳伟真帅，然后有一个按钮，里面的内容是请说实话，点击后，显示为李佳伟确实很帅；
 <div class="father">
       <div class="one">李佳伟</div>
       <div class="two">是真的帅</div>
       <input type="button" value="请说实话">
   </div>
   
   <script>
let button=document.querySelector("input");
button.onclick=function(){
    let father=document.querySelector(".father");
    let one=document.querySelector(".one");
    let two=document.querySelector(".two")
    let dele=father.removeChild(two);
//先删除是真的帅
    let newchild=document.createElement("div");
//在创建出一个新的元素，并添加到DOM树上
    newchild.innerHTML="确实很帅";
    father.insertBefore(newchild,button);

}
   </script>
示例二:猜数字界面:

1)在JS中Math.random()得到的是[0,1)随机的整数，(Math.random()*100)+1

2)Math.floor()进行向下取整

3)location.reload()是控制页面刷新，location和document是并列关系的对象，location是用来控制页面的来链接或者是地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father1{
            display:flex;
        }
        .father2{
            display:flex;
        }
        .father3{
            display:flex;
        }
    </style>
</head>
<body>
<input type="button" value="请点击重新开始一局游戏" class="resetbutton">
<div class="father1">
<div>请输入你想要猜的数字:</div><input type="text" class="number">
<input type="button" value="点击按钮请开猜" class="start">
</div>
<div class="father2">
<div>已经猜的次数:</div>
<div class="count">0</div>
</div>
<div class="father3">
    <div>结果是:</div>
    <div class="result"></div>
</div>
<script>
//1先把用的元素获取到
let resetbutton=document.querySelector(".resetbutton");
let inputnumber=document.querySelector(".number");
let result=document.querySelector(".result");
let inputcount=document.querySelector(".count");
let startbutton=document.querySelector(".start");
//2 生成一个随机的整数，范围是1-100;
let guessnumber=Math.floor(Math.random()*100)+1;
console.log(guessnumber);
//3给startbutton注册一个点击事件
startbutton.onclick=function(){
//4 点击之后，先更新猜的次数的显示
let count=inputcount.innerHTML;
count++;
inputcount.innerHTML=count;
//5再进行比较，将用和输入框中的内容和生成的随机数进行比较，最后返回结果是猜大了还是猜小了
let number=parseInt(inputnumber.value);
//注意input标签中的内容是用元素.value来获取到的
       if(number>guessnumber)
       {
           result.innerHTML="你猜大了";
           result.style.color="red";
       }else if(number==guessnumber)
       {
           result.innerHTML="你猜对了";
           result.style.color="blue"
       }else{
           result.innerHTML="你猜小了";
           result.style.color="green";
       }
}
resetbutton.onclick=function()
{
//1重新生成随机数
//2把猜的次数设回0
//3把输入框的内容清空
//4把猜的结果的情况删除
guessnumber=Math.floor(Math.random()*100)+1;
result.innerHTML="";
inputnumber.value="";
inputcount.innerHTML=0;
//或者这么写，location和document一样，都是JS提供的全局变量
//document是控制DOM树上的操作的，location是控制页面跳转的
location.reload();
}

</script>
</body>

</html>

示例三：表白墙：

显示结果：

1)每一行中的标签都用div标签来包裹，况且类名都是line，而每一行的div标签用整体包含在一个大的div标签中；

把每一行中的元素全部变成行内块元素，来实现水平布局和调控大小

2)想要控制文字之间对齐，输入框之间对齐，就要让每一个span标签，每一个input标签，的高度和宽度是相同的，况且span标签的宽度和input标签的宽度之和要等与父亲元素的宽度

3)我们要向控制输入框和文字之间的距离，可以调整文字与输入框的宽度来进行调整

4)我们发现margin:0 auto如果不能调整button按钮水平居中的话，直接套上一层div标签，先办法把它变成行内块元素，在来实现水平布局；

5)当input输入框变大的时候，里面的文字也想要变大，就可以设置里面的font-size属性

 *{
        padding:0;
        margin:0 auto;
        box-sizing:border-box
    }
    h3{
        text-align:center;
        font-size:70px;
        padding-top:10px;
    }
    p{
        text-align: center;
        font-size:30px;
        padding:10px;
    }
    .father{
        height:500px;
        width:600px;
        background-color:green;
        margin:0 auto;
    }
    .line{
        /* background-color:red; */
        height:100px;
        width:450px;
        /* 水平方向专用 */
        display:flex;
        justify-content:center;
        align-items:center;
       
    }
    span{
   font-size:20px;
   width:100px;
   height:30px;
    }
    input{
        height:30px;
        width:350px;
    }
 .but{
    display:flex;
    justify-content:center;
 }

 button{
    height:40px;
    width:200px;
    border:5px ridge blue;
    background-color:orange;
 }
 button:active{
    background-color:black;
    color:red;
 }
 input{
    font-size:20px;
 }
</style>
<body>
<div class="father">
    <h3>表白墙</h3>
    <p>输入后点击提交,会将信息显示在表格中</p>
    <div class="line">
        <span>谁</span>
        <input type="text">
    </div>
    <div class="line">
        <span>对谁说</span>
        <input type="text">
    </div>
    <div class="line">
        <span>说什么</span>
        <input type="text">
    </div>
    <div class="but">
        <button>提 交</button>
    </div>
    </div>
    <script>
        let submitbutton=document.querySelector(".but");
        submitbutton.onclick=function(){
        //1先进进行选中对应的输入框
        let arr1=document.querySelectorAll("input");
        let from=arr1[0].value;
        let to=arr1[1].value;
        let message=arr1[2].value;
        if(from==null||to==null||message==null)
        {
            alert("当前输入框中缺少元素,请补全你的输入框");
            return;
        }
       //2.进行拼接
        let father=document.querySelector(".father");
        let newnode=document.createElement("div");
        newnode.innerHTML=from+"对"+to+"说"+message;
        // newnode.className="line";
      //3.进行清空三个按钮里面的内容
        father.appendChild(newnode);
        for(let i=0;i<arr1.length;i++)
        {
            arr1[i].value="";
        }

        }
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="father">
    <h1>表白墙</h1>
    <p>输入点击后提交，结果将显示在墙上</p>
    <div class="line">
    <span>谁</span><input type="text">
</div>
    <div class="line">
<span>对谁说</span><input type="text">
    </div>
    <div class="line">
        <span>说什么</span>
        <input type="text">
       </div>
    <div class="but">
        <button>提交</button>
    </div>
</body>
   
    <style>
        .father{
            background-color:green;
            width:60%;
            margin:0 auto;
            box-sizing:border-box;
        }
        h1{
            /* 这里把h2标签当成一个字体，让字体水平居中，就要用到text-align */
            text-align: center;
            /* 这是设置内边距，也就是说设置字体和背景颜色顶部的距离 */
            padding:5px 0;
        }
        p{
            /* 控制P标签里面的字水平居中 */
            text-align:center;
            padding:5px 0;
        }
        .line{
            /* 设置每一行的元素，水平居中，垂直居中 */
            height:50px;
            display:flex;
            justify-content:center;
            align-items:center; 
        }
        span{
            font-size:25px;
            width:120px;
        }
        input{
            height:25px;
        }
        .but{
            display:flex;
        }
        button{
            margin:0 auto;
            width:200px;
        }
    </style>
    <script>
    let button=document.querySelector(".but");
    button.onclick=function()
    {
//1 先获取到框内元素，每一个输入框里面的内容是一个edits的元素；
        let arr1=document.querySelectorAll("input");
        console.log(arr1);
//2 把谁说的话具体分出来，然后再具体进行字符串的拼接
let from=arr1[0].value;
let to=arr1[1].value;
let message=arr1[2].value;
console.log(from+"对"+to+"说"+message);
//3 判断输入框内容是否合法
if(from==""||to==""||message==""){
    return;
}
//4创建出一个新的节点
let newnode=document.createElement("div");
newnode.className="line";
newnode.innerHTML=from+"对"+to+"说"+message;
console.log(newnode);
//5添加到DOM树上
let father=document.querySelector(".father");
father.appendChild(newnode);
//6 清空输入框
for(let i=0;i<arr1.length;i++)
{
    arr1[i].value="";
    console.log(1);
}
    }
    </script>
</body>
</html>

1)注意：表白墙这样的程序，所提交的数据，只是暂时保存在当前的网页中，一旦数据刷新/关闭了，存的东西就啥也不在了；这样的数据不具有持久性；核心办法就是把这些数据提交到服务器上面，然后服务器把这些数据存到文件里或者是数据库中；

2)刚才写的表白墙程序，是通过div.row来保存我们提交的信息，这些div.row是保存在DOM树上面的，就是在内存里面，是很容易失去的

示例四:任务编辑框

这题的大致的页面形式是这样的：在外边的那层框是浏览器的边框

先写一部分代码：这页面有2个部分，最大的边框是一个浏览器的背景，最上面是一块背景区域，下面有是一块背景区域，下面的背景区域再次分成两部分；一部分存放未完成的工作，一部分存放完成的工作；

1)我们想要实现最下面的两个背景区域实现弹性布局，保证两个背景区域实现紧挨着的效果(因为div标签是独占一行的，所以我们要设置成弹性布局)

2)如何让按钮和输入框是紧挨在一起的？

将按钮和输入框设置成高度是一样的，然后因为是水平排列的，所以要实现弹性布局，然后再次调用justfy-content:flex-start，这样就可以实现两个标签紧挨着在最左边了

3)删除按钮是如何跑到中间去的？也就是说是如何跑到左侧导航览的最左边

我们看似删除按钮是在中间，实质上我们把按钮写在左边的导航连里面就可以了

我们在这里使用的是借物发力，我们每一行都要用一个div标签(我们可以用line属性来进行标识)，每一个div标签里面都有选增框<span>标签来进行保存内容，还有一个删除按钮，要想实现删除按钮在最左边，就需要调整span标签的宽度，把按钮挤在最左边

4)已完成和未完成的背景区域是如何展示出来的？

直接在h3标签里面去设置背景高度，背景宽度和left(父亲元素的高度是相同的)

5)让文字与复选框之间有一定的距离，我们可以调整内边距上下为0,左右有一定距离；

我们要实现的功能有下面两种：

1)当我们在最上面的输入框里面加入新建任务之后，会现在左边弹出一个左边的行(在左边的未完成事件)

2)当我们进行选中输入框的时候，事件会跑到右边，当我们进行取消输入框的时候，事件会回到输入框的左边；

3)此时我们想要实现删除操作的时候，节点可能在左边，节点也是可能在右边的，此时我们要向进行删除操作，必须要找到父亲元素，此时我们是应该选中left,还是应该选中right呢？

没有必要，我们可以直接调用一个方法:可以直接通过parentnode(获取到某个元素的父亲元素)

 <style>
  .father1{
    background-color:green;
    height: 50px;
    width:100%;
  }
  .father2{
    display:flex;
  }
  .left{
    background-color:red;
    height:600px;
    width:50%;
  }
  .right{
    background-color:purple;
    height:600px;
    width:50%;
  }
    </style>
</head>
<body>
    <div class="father1">
        <input type="text" class="text">
        <input type="button" class="button" value="点击我新创建创建一个任务">
    </div>
    <div class="father2">
        <div class="left"></div>
        <div class="right"></div>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
  .father1{
    /* background-color:green; */
    height: 50px;
    width:100%;
    display:flex;
    justify-content:flex-start;
  }
  .father2{
    display:flex;
  }
  .left{
    /* background-color:red; */
    height:600px;
    width:50%;
  }
  .right{
    /* background-color:purple; */
    height:600px;
    width:50%;
  }
  .text{
   height:30px;
  }
  .addbutton{
  height:35px;
  background-color:orange;
  border:3px ridge purple;
  }
  .addbutton:active{
    background-color:black;
    color:red;
  }
  h2{
    text-align:center;
    line-height:100px;
    height:100px;
    width:100%;
    background-color:grey;
    color:rgb(255,255,255);
  }
  span{
    display:inline-block;
    width:300px;

  }
  .box{
    margin:0 5px;
  }
    </style>
</head>
<body>
    <div class="father1">
        <input type="text" class="text">
        <input type="button" class="addbutton" value="点击我新创建创建一个任务">
    </div>
    <div class="father2">
        <div class="left">
            <h2>未完成</h2>
            <!-- <div class="row">
                <input type="checkbox" class="box"><span>吃饭</span>
                <input type="button" class="delete" value="删除">
            </div> -->
         
        </div>
        <div class="right">
            <h2>已完成</h2>
        </div>
    </div>
    <script>
         let addbutton=document.querySelector(".addbutton");
         let father1=document.querySelector(".father1");
         let father2=document.querySelector(".father2");
         let left=document.querySelector(".left");
         let right=document.querySelector(".right");
        //1实现新增任务,在最上面的输入框里面输入任务，那么此时后会在未完成的区域里面新增任务
         addbutton.onclick=function(){
            let input=document.querySelector(".text");
            let inputvalue=input.value;
            if(inputvalue=="")
            {
                alert("当前内容为空");
                return;
            }
            let newdiv=document.createElement("div");
            newdiv.className="row";
            let checkbox=document.createElement("input");
            checkbox.type="checkbox";
            checkbox.className="box";
           
            newdiv.appendChild(checkbox);
            let span=document.createElement("span");
            span.innerHTML=inputvalue;
            newdiv.appendChild(span);
            let deletebutton=document.createElement("input");
            deletebutton.type="button";
            deletebutton.className="delete";
            deletebutton.value="删除";
            newdiv.appendChild(deletebutton);
            left.appendChild(newdiv);
            input.value="";
            //不能重复向dom树上面添加元素，如果说原来已经存在，那么第二次则会更新
            //如果说若干次都对同一个节点进行相同的新增操作，那么只有第一次是有效的
            checkbox.onclick=function()
            {
                if(checkbox.checked)
                {
                     right.appendChild(newdiv);
                }else{
                    left.appendChild(newdiv);
                }
            }
            deletebutton.onclick=function()
            {   let parentnode=newdiv.parentNode;
                parentnode.removeChild(newdiv);
            }
         }
         


    </script>
</body>
</html>

这个页面一共有三个部分
<body>
  <!-- 最上面的部分，输入框+新建任务按钮 -->
  <div class="header1">
      <input type="text">
      <input type="button" value="点击我新建一个任务">
  </div>
  <!-- 下面包含了左右两部分的区域 -->
左右两个部分各占下面总区域的一半一半
  <div class="container">
  <div class="left"> </div>
  <div class="right"> </div>
  </div>
  <style>
      .header1{
          background-color:red;
          height:200px;
          
      }
      .container{
          background-color:blue;
          height:400px;
          display:flex;
          
      }
      .left{
          background-color:brown;
          width:50%;
          height:400px;
      }
      .right{
          background-color:black;
          width:50%;
          height:400px;
      }
  </style>
</body>

完整代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <!-- 最上面的部分，输入框+新建任务按钮 -->
  <div class="header1">
      <input type="text" class="child1">
      <input type="button" value="点击我新建一个任务" class="child2">
  </div>
  <!-- 下面包含了左右两部分的区域 -->
  <div class="container">
  <div class="left">
      <h3>未完成</h3>
      <!-- 左右两部分都包含两行，上部分是完成未完成 下部分是待办事项 -->
      <div class="father1">
        <!-- 添加具体的日志和删除按钮 -->
        <input type="checkbox" class="box">
        <span>吃饭</span>
        <!-- span不会独占一行,而div会独占一行 -->
        <input type="button" value="删除" class="button">
    </div>
  </div>

  <div class="right">
      <h3>已完成</h3>
  </div>
  </div>
  <style>
      .father1
      {
          /* 给第一个部分设置背景色，改变它的布局方式，让他水平居中和垂直方向上居中 */
        height:50px;
        display:flex;
        align-items:center;
      }
      *{
          margin:0;
          padding:0;
          box-sizing:border-box;

      }
      .header1{
          /* background-color:red; */
          height:150px;
          display:flex;
          align-items:center;
          
      }
      .container{
          /* background-color:blue; */
          height:400px;
          display:flex;
          
      }
      .left{
          /* background-color:brown; */
          width:50%;
          height:400px;
      }
      .right{
          /* background-color:yellow; */
          width:50%;
          height:400px;
      }
      h3{
          /*设置已完成未完成和已完成两个字的展示效果的的那个界面，这两个字用一个大的背景颜色来搞*/
          background-color:grey;
          height:100px;
          font-size:50px;
          color:azure;
          text-align:center;
          line-height:100px;
/* 这是主要设置字体大小的颜色，以及控制文字在我们指定的背景颜色中水平垂直居中 */
      }
    .father1 .box{
        margin:0 10px;
    }
     span{
        width:300px;
        /* 这里通过给字体吃饭设置一个背景宽度，把按钮挤到边界去了 */
    }
   .father1 .button{
        height:30px;
        width:40px;
        background-color:blue;
    }
    /* 任务中的输入框 */
    .header1 .child1{
        height:50px;
        width:300px;
        font-size:25px;
    }
    .header1 .child2{
        height:50px;
        width:200px;
        background-color:orange;
        /* button元素会默认实现一个小的黑色边框 如果想要去除就写上border:none */
    }
  </style>
  <script>
//新建任务
//1.1实现新建任务功能，首先获取到新增按钮
let startbutton=document.querySelector(".child2");
//1.2给新增按钮设置一个点击事件
startbutton.onclick=function(){
//1.3获取到输入框中的内容,首先获取到输入框，在获取到内容
let inputbox=document.querySelector(".child1");
let text=inputbox.value;
if(text=="")
{
    alert("当前输入框里面的内容为空，不可以新创建元素");
    return;
}
//1.4根据输入框中的内容，创建元素,里面要包含一个button,span标签
let father1 =document.createElement("div");
father1.className="father1";
let box=document.createElement("input");
box.type="checkbox";
box.className="box"
let spantext=document.createElement("span");
spantext.innerHTML=text;
let deletebutton=document.createElement("input");
deletebutton.type="button";
deletebutton.value="删除";
deletebutton.className="button";
//1.5把这些元素挂到DOM树上
father1.appendChild(box);
father1.appendChild(spantext);
father1.appendChild(deletebutton);
let left=document.querySelector(".left");
let right=document.querySelector(".right");
left.appendChild(father1);
//1.6把输入框顺便清空了
inputbox.value=null;

//2 实现已完成功能
box.onclick=function()
{
    //操作.father1这个对象，看他是把这个任务放到已完成里面还是未完成里面，可以根据方框的选中状态进行判断
   
    if(!box.checked)
    { right.appendChild(father1);
//选中状态，放到right里面
    }else{
        right.appendChild(father1);
//没选中，放到左边      
    }
}//3 实现删除功能，针对删除按钮增加一个点击事件,但是首先要知道她的父元素是谁
//他的父元素left，也有可能是right
deletebutton.onclick=function()
{  let parent=father1.parentNode;
   parent.removeChild(father1);
}
}



  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father1{
            height:300px;
            width:1500px;
            /* background-color:orange; */
            display:flex;
            justify-content:flex-start;
            align-items:flex-end;
        }
        .inputtext{
            width:500px;
            height:75px;
            font-size:50px;
        }
        .submitbutton{
            width:200px;
            height:80px;
            background-color: grey;
        }
        .submitbutton:active{
        background-color: orange;
        }

        .father2{
            height:900px;
            width:1500px;
            display:flex;
        }
        .left{
            height:900px;
            width:750px;
            background-color: 750px;

        }
        .right{
            height:900px;
            width:750px;
            background-color: 750px;

        }
        h3{
        background-color:grey;
        height:100px;
        width:750px;
        font-size:50px;
        line-height:100px;
      text-align:center;
        }
        .row{
            height:60x;
            width:650px;

        }
        span{
            padding-right:500px;
        }
        .box{
          margin-right:10px;
        }

    </style>
</head>
<body>
<div class="father1">
    <input type="text" class="inputtext">
    <input type="button" value="点击我新添加一个任务" class="submitbutton" onclick="func1()">
</div>
<div class="father2">
    <div class="left">
        <h3>已完成</h3>
        <!-- <div class="row">
            <input type="checkbox" class="box"><span>吃饭</span>
            <input type="button" class="delete" value="删除此事项">
        </div> -->

    </div>
    <div class="right">
        <h3>未完成</h3>
    </div>
</div>
<script>
    let inputtext=document.querySelector(".inputtext");
    let leftdiv=document.querySelector(".right");
    let rightdiv=document.querySelector(".left");
    function func1(){
        let text=inputtext.value;
        if(text==""){
            return;
        }
        let rowdiv=document.createElement("div");
        rowdiv.className="row";
        let inputCheckbox=document.createElement("input");
        inputCheckbox.type="checkbox";
        inputCheckbox.className="box";
        let span=document.createElement("span");
        span.innerHTML=text;
        let inputButton=document.createElement("input");
        inputButton.type="button";
        inputButton.className="delete";
        inputButton.value="删除此事项";
        leftdiv.appendChild(rowdiv);
        rowdiv.appendChild(inputCheckbox);
        rowdiv.appendChild(span);
        rowdiv.appendChild(inputButton);
        inputCheckbox.value="";
        inputCheckbox.onclick=function(){
            if(!inputCheckbox.checked){
                leftdiv.appendChild(rowdiv);
            }else{
                rightdiv.appendChild(rowdiv);
            }

        }
        inputButton.onclick=function(){
           let parent= rowdiv.parentNode;
           parent.removeChild(rowdiv);

        }
    }
</script>
</body>
</html>