前端三刺客---JS(WebAPI)

来源：华佗小知识

什么WebAPI?

上篇文章中有提到, JS分为三个部分:

获取元素

querySelector

使用querySelector可以更精确快捷的获取到元素的对象.

<body>
    <div id="first">hello</div>
    <script>
      let div = document.querySelector("#first");
      console.log(div);
    </script>
</body>

querySelectorAll

使用querySelectorAll可以选中符合条件的所有元素

<body>
    <div id="first">hello</div>
    <div class="h">nihao</div>
    <script>
      let div = document.querySelectorAll("div");
      console.log(div);
    </script>
</body>

事件

用户对于页面的一些操作(选择, 修改, 查询等)操作都会再浏览器中产生一个个事件, 这些事件会被JS获取到, 从而可以进行交互操作

事件三要素

事件源: 哪个元素触发的
事件类型: 是点击,选择,还是修改
事件处理程序: 如何处理对应的事件, 往往是一个回调函数
eg:

<body>
    <button class="btn">点击我</button>
    <script>
      let button = document.querySelector(".btn")
      button.onclick = function() {
        alert("hello");
      }
    </script>
</body>

1.button就是事件源头
2.点击就是事件的类型
3.function这个匿名函数就是事件的处理程序
4. button.onclick = function() 这个操作称为注册事件/绑定事件

<body>
    <button class="btn" onclick="f()">点击我</button>
    <script>

       function f() {
        alert("hello");
      }
    </script>
</body>

操作元素

操作就是获取并修改元素
我们可以修改元素的内容, 元素属性, 和样式属性.

获取修改元素的内容

1.innerText
通过元素的innerHtml属性来实现
innerHtml属性表示一个节点及其后代的“渲染”文本内容

获取:

<body>
    <div id="screen">hello world</div>
    <button id="btn">这是一个按钮</button>
    <script>
      let btn = document.querySelector("#btn");
      btn.onclick = function () {
        let screen = document.querySelector("#screen");
        console.log(screen.innerText);
      };
    </script>
</body>

<body>
    <div id="screen">hello world</div>
    <button id="btn">这是一个按钮</button>
    <script>
      let btn = document.querySelector("#btn");
      btn.onclick = function () {
        let screen = document.querySelector("#screen");
        screen.innerText = "nihao"
        console.log(screen.innerText);
      };
    </script>
</body>

<body>
    <div>
        <span>hello world</span>
        <span>hello world</span>
    </div>
      <script>
        var div = document.querySelector('div');
        // 读取 div 内部内容
        console.log(div.innerText);
        // 修改 div 内部内容, 界面上就会同步修改
        div.innerText = 'hello js <span>hello js</span>';
      </script>
</body>

我们可以看到, div内部的文本内容发生了变化

<body>
    <div>
        <span>hello world</span>
        <span>hello world</span>
    </div>
      <script>
        var div = document.querySelector('div');
        // 读取页面内容
        console.log(div.innerHTML);
        // 修改页面内容
        div.innerHTML = '<span>hello js</span>'
      </script>
</body>

操作元素的属性

通过querySelector操作元素的属性
我们来实现点击图片切换图片的功能:

<body>
    <img src="..\image\a5107469714be407dcd267fda2f0e77c.jpeg" alt="" id="img">
    <script>
      let img = document.querySelector("#img");
      img.onclick = function() {
        console.log(img.src);
        if(img.src.indexOf("a5107469714be407dcd267fda2f0e77c") >= 0){
          img.src = '..\\image\\afd421e401275a37fc15f9f77805f530.jpeg';
        }else if(img.src.indexOf("afd421e401275a37fc15f9f77805f530") >= 0){
          img.src = "..\\image\\a5107469714be407dcd267fda2f0e77c.jpeg";
        }
      }
    </script>
  </body>

未点击照片之前:

实现全选功能

点击全选实现checkbox全选的功能

<body>
    <input type="checkbox" id="all">小孩子才做选择, 我全都要<br>
    <input type="checkbox" class="checks"> 草莓味<br>
    <input type="checkbox" class="checks"> 芒果味<br>
    <input type="checkbox" class="checks"> 苹果味<br>
    <input type="checkbox" class="checks"> 荔枝味<br>

    <script>
      let all = document.querySelector("#all");
      let checks = document.querySelectorAll(".checks");

      all.onclick = function () {
            for (let i = 0; i < checks.length; i++) {
                checks[i].checked = all.checked;
            }
        }

        for (let i = 0; i < checks.length; i++) {
          checks[i].onclick = function () {
                all.checked = checkCh(checks);
            }
        }

        function checkCh(checks) {
            //判断是不是所有的 ch 都被选中
            for (let i = 0; i < checks.length; i++) {
                if (!checks[i].checked) {
                    //只要有一个没被选中，就让 all 是未选中状态
                    return '';
                }
            }
            //遍历一圈，发现都被选中了，就让 all 也是选中状态
            return 'checked';
          }
   </script>
</body>

点击第一项就能实现全选

操作元素样式

<body>
    <div style="color: red;">文本内容</div>
    
    <script>
      let div = document.querySelector("div");
      div.onclick = function() {
        div.style.color = "green"; 
      }
    </script>    
  </body>

这是我们点击文本, 就可以实现颜色的改变

实现开关灯

<body>
    <style>
      .light {
        background-color: white;
        color: black;
      }

      .dark {
        background-color: black;
        color: white;
      }
    </style>

    <div class="light">文本显示</div>
    <button>闭灯</button>

    <script>
      let div = document.querySelector("div");
      let button = document.querySelector("button");
      button.onclick = function() {
        if(div.className == "light"){
          div.className = "dark";
          button.innerText = "开灯";
        }else if(div.className == "dark"){
          div.className = "light";
          button.innerText = "闭灯";
        }
      }
    </script>

操作节点

此处讲新增/删除节点,HTML 页面是显示的 DOM 树的内容. 在创建完节点之后, 要挂在 DOM 树上才可以显示. 通过 appendChild 来挂到树上:

新增节点

使用appendChild新增节点

创建元素节点
讲元素节点添加到DOM树中

<body>
    <div class="container"></div>
    <script>
      //1.创建新的节点
      let newDiv = document.createElement('div');
      newDiv.className = "one";
      newDiv.innerText = "hello";
      console.log(newDiv);
      //2. 把节点挂在dom树上
      let container = document.querySelector(".container");
      container.appendChild(newDiv);
    </script>
  </body>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文