Web API 基本认知

第一天

Web API 基本认知

作用：就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）

什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用
开发网页内容特效和实现用户交互

DOM树

DOM树是什么？

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

DOM对象（重要）

DOM对象：

浏览器根据html标签生成的 JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

DOM的核心思想

把网页内容当做对象来处理

document 对象

是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
网页所有内容都在document里面

获取DOM元素

其他获取DOM元素方法（了解）

能查找/获取DOM对象

查找元素DOM元素就是选择页面中标签元素

根据CSS选择器来获取DOM元素 (重点)

选择匹配的第一个元素

语法: document.querySelector('css选择器');

参数:包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。

1.div标签也会被浏览器自动生成一个dom对象

2.input 标签也会被浏览器自动生成一个dom对象

3.获取dom对象 document.querySelector();

4.输出打印 dom对象的时候，不再使用console.log(),使用console.dir();

    <script>


document.querySelector("获取哪个dom元素");

let divDom =document.querySelector('div');
//dom对象  {属性名:属性值}
//console.log(divDom);
console.dir(divDom);
 // 我想要获取一下 input标签的 dom对象
let inputDom = document.querySelector('div');// 找不到元素 输出 null 
 console.dir(inputDom);
  
   </script>

用 dom元素 .innerText修改内容

1想要获取页面的标签可以通过 document.querySelector(选择器);

2.querySelector 只能够获取第一个满足条件的标签

3.如果选择器找不到元素 querySelector 只会返回 null

使用 console.dir（);

动态修改dom元素的内容

下面的案例是随机选择一个同学，显示页面


   <h1>今天天气不错，我打算约下面的同学去旅游</h1>
    <h2>xxx</h2>
<script>
      /* 
      1 获取 输入框输入的同学的名称
      2 把名字 显示到 h2标签中 
        1 先获取h2标签对应的dom元素
        2 使用代码修改文本内容 
          dom元素.innerText = "修改的内容 "
       */

      let userName = prompt('请输入你想邀约的同学的名称');
		//获取dom的元素 
      let h2Dom = document.querySelector('h2');
	
      // h2标签中的文字 就等于 userName
      h2Dom.innerText = userName;
    </script>

用数组和随机数做

    <h1>今天天气不错，我打算约下面的同学去旅游</h1>
    <h2>xxx</h2>
    <script>
      // 1 同学姓名 存在一个数组中
      let userNames = ['恒达', '祺星', '增年', '永芳'];
      // 随机的从以上的同学中 抽出一位
      // 把这位同学的名字 显示到 h2标签中即可

      // 2 获取一个随机数 范围 0 - 3
      // let index =Math.round(Math.random()*(3-0)+0)
      let index = Math.round(Math.random() * 3);
      console.log(userNames[index]);

      // 3 获取h2标签 dom元素
      let h2=document.querySelector("h2");

      // 4 设置 h2标签的文本
      h2.innerText=userNames[index];


    </script>

2 选择匹配的多个元素

语法：

document.querySelectorAll('CSS选择器');

参数：包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的NodeList 对象集合

列如：

document.querySelectorAll('ul li');

得到的是一个伪数组：

有长度有索引号的数组

但是没有 pop() push() 等数组方法

想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。

注意事项

哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

1 querySelectorAll 特点

不管你的选择器写对与否，返回值都是数组

2.querySelector 特点

能找到返回 dom元素 dom对象

找不到了返回null

3.数组就可以和循环搭配

    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

    <div>123</div>
    
    
    
     <script>

      /* 
      querySelectorAll 不管你的选择器写对与否，返回值都是数组 
      querySelector  
        1 能找到 返回 dom元素 dom对象
        2 找不到了  返回null 
      
       */



      // querySelector 只能获取第一个符合要求的li标签
      let li = document.querySelector('li');
      // 获取所有的li标签 返回一个数组
      // let lis = document.querySelectorAll('li');
      for (let index = 0; index < lis.length; index++) {
     // lis[index]  dom元素

      //   // 文本
     lis[index].innerText = `这个是li标签 ` + index;
       }

       let divs = document.querySelectorAll('div');
   		 console.log(divs); // 输出什么 ？ 空数组！！ 
      console.log(divs); // 输出什么 [ div dom元素 ]  1个元素 


      console.log( document.querySelector("button") );
    </script>

其他获取dom元素的方式（了解）

html页面在body里面

    <div id="nav">id选择器</div>
    <p>这个是p标签</p>
    <div class="container">也是div container</div>

在

1.根据id来获取一个dom

let nav = document.getElementById("nav");

2.根据标签名称来获取dom元素一组dom元素

 let ps=document.getElementsByTagName("p");

3.根据类名来获取元素一组元素

let divs = document.getElementsByClassName("container");

现在最常用的两种方法

//获取一个
document.querySelector("#nav")
document.querySelector("p")
document.querySelector(".container")
//获取一组
document.querySelectorAll();

两者的区别是什么？
querySelector()  只能选择一个元素， 可以直接操作
querySelectorAll()  可以选择多个元素，得到的是伪数组，需要遍历
注意事项
小括号里面写css选择器
必须是字符串，也就是必须加引号

设置/修改DOM元素内容

3种实现在标签中写动态设置文本

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。就是操作对象使用的点语法。

1.document.write （）方法只能在body标签的中写以后不常使用它

		只能将文本内容追加到 </body> 前面的位置

文本中包含的标签会被解析

2.innerText 只能设置文本不能解析 html 字符串

将文本内容添加/更新到任意标签位置

文本中包含的标签不会被解析

3 innerHTML 可以设置文本也可以解析字符串

        // 以后就很少用 了  功能弱  document.wrie();
 document.querySelector("li:nth-child(2)").innerText="<button>按钮</button>";
		//   会解析字符串
document.querySelector("li:nth-child(2)").innerHTML="<button>按钮</button>";
 document.querySelector('li:nth-child(3)').innerHTML ='<button>随便修改</button> 

三者的区别是什么？
document.write() 方法   只能追加到body中
元素.innerText 属性   只识别内容，不能解析标签
元素.innerHTML 属性     能够解析标签
如果还在纠结到底用谁，你可以选择innerHTML

页面刷新随机更换图片


    <img src="./images/1.png" alt="">
    <script>
        // 一定要去找  和之前类似 或者 实现过的案例
        let imgStr=[
        './images/1.png',
        './images/2.png',
        './images/3.png',
        './images/4.png']
    //   let num =Math.round(Math.random()*(imgStr.length-1));
        let num =Math.round(Mathi.random()*(imgStr.length-1));
    //   获取元
      let img =document.querySelector("img");
    //   输出图片路径
      img.src=`${imgStr[num]}`;

    </script>

设置/修改元素样式属性

1.通过style 属性操作css

语法：对象.style.样式属性 =值

注意：

1.修改样式通过style属性引出

2.如果属性有-连接符需要小驼峰

3.赋值的时候，需要的时候不要忘记加css单位

4.因为我们是样式属性，一定别忘记，大部分数组后面都需要加单位。

案例

随机抽取的名字显示到指定的标签内部

需求：将名字放入span 盒子内部

①：获取span 元素 ②：得到随机的名字 ③：通过innerText 或者 innerHTML 讲名字写入元素内部

    <script>

           let userName =['留言','同学','目录']
        // let answer =Math.round((Math.random()*(max-min))+min);
        // 随机数
        let num =Math.round((Math.random()*(2-1))+1);
            // dow获取元素
            let h2Dom=document.querySelector("h2");
            let inputDom=document.querySelector("input");
            // 获取h2
            h2Dom.innerText=userName[num];
            console.log(userName[num]);
    </script>

设置/修改DOM元素属性

设置/修改元素常用属性

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片

最常见的属性比如： href、title、src 等

语法: 对象.属性 = 值

页面刷新，页面随机更换背景图片

需求：当我们刷新页面，页面中的背景图片随机显示不同的图片

①：随机函数

②： css页面背景图片 background-image

③：标签选择body，因为body是唯一的标签，可以直接写 document.body.style



<script>
	//第一种方法
        function getRandomColor(min,max){
            return Math.round(Math.random()*(max-min)+min)
        }
        // 随机数1  0-255
        let color1 = getRandomColor(0,255);
        // 随机数1  0-255
        let color2 = getRandomColor(0,255);
       // 随机数1  0-255
        let color3 = getRandomColor(0,255);
        // let color4;
        document.body.style.backgroundColor=`rgb(${color1},${color2},${color3})`;




	//第二种方法

           // 数组
     let colorStr=['green','red','blue','pink','block','#ccc','#999','#eee','#000'];
        // console.log(colorStr);
        let num =Math.round(Math.random()*(colorStr.length-1));
        // console.log(num);

       let bodyDom =document.querySelector('body');
      bodyDom.style.backgroundColor=colorStr[num];
        // 2 方式 背景颜色 rgb(0-255);
        // 随机数1 0-255

    </script>

设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。

点击按钮可以滚动图片，这是移动的图片的位置 left 等等

1.通过 style 属性操作CSS

语法：对象.style.样式属性 =值

注意：

修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位

		  div.style.fontSize="100px";
      div.style.color="yellow";
      div.style.backgroundColor="pink";
      div.style.height="300px";
      div.style.width="400px";

2.操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

语法：元素.className ='active';

注意:

由于class关键字，所以使用className去代替。

className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

元素.className ='active'；

    <div ></div>   
<script>  

    /* 
    className 
    会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类 

    如果想要同时设置多个 class  以空格做分割即可 
    
     */


      // js的方式来动态添加上这个class
      let div = document.querySelector('div');
      // 通过 className 来设置类名即可

      // 同时设置两个类上去 
      div.className = 'box redCls';
    </script>

3. 通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

代码

    <script>
        // 添加一个class
        let div =document.querySelector('div');
        // div
        // classList 添加
        // div.classList.add("d2","d3");
        div.classList.remove("d2");
        // 切换
        div.classList.toggle("d4");
    </script>

背景图片随机显示


  <script>


    let pics = ['d1', 'd2', 'd3', 'd4'];

    let index = Math.round(Math.random() * (pics.length - 1));

    document.body.classList.add(pics[index]);
  </script>

使用 className 有什么好处？

可以同时修改多个样式

使用 className 有什么注意事项？直接使用 className 赋值会覆盖以前的类名

3.设置/修改表单元素属性

    <input type="text" name="" class="username"  id=""/>
    <input type="checkbox" name="" class="isarg"  id=""/>
     <button class="code"> 发送验证码</button>
     <select name="" id="" class="sel">
         <option value="">泰国</option>
         <option value="">印度</option>
         <option value="">阿富汗</option>
         <option value="">非洲</option>
     </select>

     <textarea name="" id="" cols="30" rows="10">
         <h1>e</h1>
     </textarea>

    <script>
/* 
    1.设置普通的输入框  input.value ="表单的值";
    2.设置 按钮的禁用
    button.disabled =true;
    button.disabled =false;
    3.设置单选框或者复选框
    radio.checked=true
    radio.checked=false;  
    4.设置下拉列表 select
    option.selected=true;  
    5.文本域
     
*/
        // let username = document.querySelector('.username');
        // console.log(username);
        // let  isarg =document.querySelector('.isarg');
        // let code =document.querySelector('.code');

        // 设置文本内容
        // username.value ='我的';
        // isarg.checked=false;
        // isarg.checked = true;

        // code.disabled=true;
        // code.disabled=false;

        // let option =document.querySelector('option:nth-child(3)');

        // option.selected =true;
        // option.selected =false;
    // 属于表单元素  又是双标签
    // 获取 文本域标签
        // let textarea = document.querySelector('textarea');

        // let a =textarea.value;
        // textarea.value =123;//设置value的值
        

        // console.log(textarea.value);//获取
        // console.log(textarea.innerText);  //获取
        // console.log(textarea.innerHTML);  //获取  ok

        let textarea = document.querySelector('textarea');

// 在html想要设置  文本域的内容 直接在标签内写即可
// <textarea>  你好 </textarea>

// 获取文本域中的值

      // value   有区别  innerHTML
      // 设置 textarea 里面文本的内容的时候
      // 可以选择 在标签内写文本即可
      // 想要获取 内容
      // .value  原样获取内容
      // .innerHTML 获取的内容如果包含html 会转移


console.log(textarea.value=`dasf`); // 获取 OK <h1>你好</h1>
 console.log(textarea.innerText='231'); // 获取  不OK
console.log(textarea.innerHTML='ewfwf'); // 获取   OK  &lt;h1&gt;你好&lt;/h1&gt;
        
        //value  有区别  innerHTML
        //value  有区别  innsrHTML
        textarea.innerHTML='ss'
        textarea.value=`dasf`
        // textarea.innerHTML='ewfwf'
        // textarea.value=`<h1>标题</h1>`;  //  ok
      // textarea.innerText=`<h1>标题</h1>`; //  ok
      // textarea.innerHTML=`<h1>标题</h1>`;  //  ok
    </script>

定时器-间歇函数

定时器函数可以开启和关闭定时器

开启定时器

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒
```
setIntval(函数,间隔时间);
```

有两种写法

    <script>
        //第一种写法
			// 函数 负责 定时执行的业务
          function repeat(){
            console.log('前端程序员，头发多');
         }

        setInterval(repeat,1000);

	//第二种写法
    setInterval(function(){
        console.log("头发没有啦");
    },1000);

    </script>

清除定时器

    <script>
      let index = 0;
      // 创建定时器的同时 返回了定时器id
      let timeId = setInterval(function () {
        index++;
        console.log('开始追了', index);
        // 判断是否满足条件了
        if (index === 30) {
          // 放弃 没有缘分
          clearInterval(timeId);
        }
      }, 100);
    </script>

注意：

函数名字不需要加括号定时器返回的是一个id数字

关闭定时器``

let 变量名 =setInterval(函数,间隔实际)
clearInterval(变量名)
一般不会刚创建就停止，而是满足一定条件再停止

、

综合案例

1用户计时器

    <span id="time">60</span>
    <script>
        function daojishi () {
            // 设置60秒
            let time = 60;
            // 
            let interval = setInterval(function  () {
                // 获取id为span的元素
                document.querySelector("#time").innerHTML=time;
                //每秒
                time--;
                // 
                if(time=== -1){
                    time =60;
                }
            },1000)
        }
          daojishi();
     
    </script>

网页轮播图效果

需求：每隔一秒钟切换一个图片

①：获取元素（图片和文字） ②：设置定时器函数设置一个变量++ 更改图片张数更改文字信息 ③：处理图片自动复原从头播放如果图片播放到最后一张就是第9张则把变量重置为0 注意逻辑代码写到图片和文字变化的前面

    <img src="./images/1.png" alt="">
    <script>
        let index =1;
        let arr =['./images/1.png',
                  './images/2.png',
                  './images/3.png',
                  './images/4.png']
        let imgDom =document.querySelector("img");
         setInterval(function(){
            imgDom.src =`${arr[index]}`;
            index++;
            if(index === 4){
                index =1;
            }
        },1000);
    </script>

设置/修改DOM元素属性

设置/修改表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框正常的有属性有取值的跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值

案例

  <!DOCTYPE html>

<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>01-全选商品</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

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

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

      .allCheck {
        width: 80px;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" id="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input  type="checkbox" name="check" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>
  </body>
  
  <script>
    /* 
    1 获取全选按钮和 一组 商品复选按钮
    2 给全选按钮绑定点击事件
    3 给一组商品 绑定点击事件 
     */
    let checkAll =document.querySelector("#checkAll");
    let checkboxList =document.querySelectorAll(".ck");
 
    checkAll.addEventListener('click',function(){

      for(let index=0;index< checkboxList.length;index++){

          checkboxList[index].checked = checkAll.checked;
      }
    });
    // 
      for(let index=0; index<checkboxList.length;index++){

          checkboxList[index].addEventListener('click',function(){
            let checked =isAllChecked();
            checkAll.checked=checked;
          });

        }

    function isAllChecked(){
      let checkedNum =0;
      for(let index =0;index<checkboxList.length;index++){
        // 判断为true
        if(checkboxList[index].checked){
            checkedNum++;
        }
      }
      if(checkedNum ===checkboxList.length){
          
        return true;
      }else{
        return false;
      }
    }
  </script>

Web API 基本认知第一天

Web API 基本认知

第一天

Web API 基本认知

什么是DOM

DOM树

DOM树是什么？

DOM对象（重要）

获取DOM元素

其他获取DOM元素方法（了解）

能查找/获取DOM对象

根据CSS选择器来获取DOM元素 (重点)

选择匹配的第一个元素

参数:包含一个或多个有效的CSS选择器 字符串

返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。

用 dom元素 .innerText修改内容

2 选择匹配的多个元素

注意事项

1 querySelectorAll 特点

2.querySelector 特点

3.数组就可以和循环搭配

设置/修改DOM元素内容

3种 实现在标签中 写 动态设置文本

页面刷新 随机更换图片

设置/修改元素样式属性

案例

随机抽取的名字显示到指定的标签内部

设置/修改DOM元素属性

设置/修改元素常用属性

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片

页面刷新，页面随机更换背景图片

设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。

2.操作类名(className) 操作CSS

3. 通过 classList 操作类控制CSS

定时器-间歇函数

设置/修改DOM元素属性

参数:包含一个或多个有效的CSS选择器字符串

3种实现在标签中写动态设置文本

页面刷新随机更换图片

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片