WebAPI基础1

一、WebAPI基本认知

操作网页DOM或者浏览器BOM的一套接口方法。

1、作用分类

2、DOM

把文档当作对象看待，可以做一些更好玩的效果。

3、DOM树

整个文档当作一个对象documnet -html -head、body(div(id、哇哈哈)、a) 倒过来就是树状图

直观的体现标签与标签的关系，可以叫对象亦可以叫节点（元素、属性、文本）

由标签映射过来的节点：元素节点

4、DOM对象

二、获取DOM对象

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

1、根据CSS选择器来获取DOM元素

获取单个元素

如果有多个相同标签，默认选择第一个

找不到元素即为null

document.querySelector()可以直接修改

<div>111</div>
<div id='box'>222</div>
<div>
    <p>333</p>
</div>
<p>444</p>
<script>
    let d = document.querySelector('div')
    console.log(d)
    let b = document.querySelector('.box')
    console.log(b)
    let c = document.querySelector('p:nte-child(2)')
    console.log(c)
</script>

<div>111</div>
<div>111</div>
<div>111</div>
<div id='box'>222</div>
<script>
    //用它获取的都是伪数组
    let a = document.querySelectorAll('div')//[div,div,div]
    console.log(a)
    //伪数组 不是某一个标签，是个整体 具有数组索引值、length,但不能使用数组
    for(let i=0;i<a.length;i++){
        console.log(a[i])
    }
</script>

2、其他获取DOM元素方法

<div>哇哈哈</div>
<div id="box">123</div>
<div class="c1">1</div>
<div class="c1">2</div>
    <script type="text/javascript">
        // 记住：
        // body元素
        // console.log( document.body );
        // html元素
        console.log( document.documentElement );
​
        // 理解知道
        // id选择器：
        // let d = document.getElementById('box');
        // console.log(d);
        // 获取多个元素：类名
        // let ds = document.getElementsByClassName('c1');
        // console.log(ds);
        // 获取多个元素：标签名
        // let ds = document.getElementsByTagName('div');
        // console.log(ds);
​
        // webAPIs:DOM、BOM
        // DOM：文档对象模型
        // 获取元素：
            // document.querySelector('选择器')
            // document.querySelectorAll('选择器')
            // body：document.body
            // html：document.documentElement
        
        // 操作元素内容：
            // innerText
            // innerHTML
    </script>

三、设置/修改DOM元素内容

文本属性

1、document.write()

设置内容到文档上，只能在body前

2、innerText属性

3、innerHTML属性

<div id="box" class="c1">哇哈哈aaa</div>
    <script type="text/javascript">
        // 操作元素：
            // 内容
            // 属性
        // innerText：
        // 获取元素
        let div = document.querySelector('div');
        // 区别：
        // innerText：不管是获取还是设置，只识别文本
        // innerHTML：不管是获取还是设置，识别文本和标签
        // div.innerText = '<h1>標題</h1>';
        div.innerHTML = '<h1>標題</h1>';
        // 修改内容
        // 语法：标签.innerText = 值;
        // div.innerText = 'abcadsada';
        // 获取内容
        // 语法：标签.innerText
        // console.log( div.innerText );
        
        // innerHTML：
        // 设置：元素.innerHTML = 值;
        // div.innerHTML = '新的内容把车打肯定是卡萨划分第三空间啊';
        // 获取：元素.innerHTML
        // console.log( div.innerHTML );
        // 设置内容：到文档上
        // document.write('<b>哇哈哈</b>');
    </script>

案例

<span>名字</span>
<script type="text/javascript">
    // 思路：
        // 先得到数组的随机的值
        // 获取元素
        // 设置元素内容把数组随机的值放到span中即可
        
    let arr = ['张飞', '关羽', '赵云', '吕布', '貂蝉'];
    // 找到一个随机的下标
    let random = Math.floor( Math.random() * (arr.length) );
​
    // console.log( arr[random] );
​
    // 获取元素
    let span = document.querySelector('span');
    // 设置内容
    span.innerHTML = arr[random];
    </script>
​

四、设置/修改DOM元素属性

1、元素常用属性

<span>名字</span>
<script type="text/javascript">
	// 思路：
		// 先得到数组的随机的值
		// 获取元素
		// 设置元素内容把数组随机的值放到span中即可
		
	let arr = ['张飞', '关羽', '赵云', '吕布', '貂蝉'];
	// 找到一个随机的下标
	let random = Math.floor( Math.random() * (arr.length) );

	// console.log( arr[random] );

	// 获取元素
	let span = document.querySelector('span');
	// 设置内容
	span.innerHTML = arr[random];
	</script>

2、元素样式属性

通过js设置/修改标签元素样式style、className、classList

(1)style属性操作css

<script type="text/javascript">
    //练习：页面随机更换背景图片
        // 封装函数
        function getColor () {
            return Math.floor( Math.random() * (256) );
        }
        // 红色
        let red = getColor();
        // 绿色
        let green = getColor();
        // 蓝色
        let blue = getColor();
        // 给body设置背景颜色
        // 语法：元素.style.xxx = 值;
        document.body.style.background = `rgb(${red}, ${green}, ${blue})`;
    </script>

(2)操作类名className操作CSS

className可以同时修改多个样式

直接使用它赋值会覆盖以前的类名

    <style type="text/css">
        .c1 {
            border: 10px solid red;
        }
        /*提前设置好类名，之后给元素添加类名就可以具有这些样式*/
        .c2 {
            background: pink;
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 60px;
        }
    </style>
    <div class="c1 c2">123</div>
​
    <script type="text/javascript">
        // 给元素设置类名
        // 获取元素
        let div = document.querySelector('div');
        // 特别注意：class这个属性不能直接写，改成className
        // 设置class
        // 会覆盖之前的类名
        // div.className = 'c2';
​
        // classList：
        // 添加类名：元素.classList.add('类名');
        // div.classList.add('c2');
        
        // 删除类名：元素.classList.remove('类名')
        // div.classList.remove('c2');
​
        // 切换类名：元素.classList.toggle('类名');
        document.onclick = function () {
            // 如果div有c2这个类名，就删除这个类名
            // 如果div没有c2这个类名，就添加这个类名
            div.classList.toggle('c2');
        }
​
        // 检测类名：元素.classList.contains('类名')
        // let re = div.classList.contains('c2');
        // console.log(re);
​
        // 修改样式：
            // 1、元素.style.xxx = 值;
            // 2、元素.className = '类名'
            // 3、元素.classList.xxx
                // add：增加类名
                // remove：移除类名
                // toggle：切换类名
                // contains：检测类名
    </script>

(3)classList操作类控制CSS

追加删除不影响以前的类名

3、表单元素属性

<body>
    <!-- checked：默认选中 -->
    <!-- disabled：禁用设置 -->
    <!-- selected：默认下拉选中 -->
​
    <!-- <h2>兴趣爱好</h2>
    <input type="checkbox" checked>唱
    <input type="checkbox">跳 -->
    <!-- <input type="text" disabled> -->
    <select>
        <option>北京</option>
        <option>伤害</option>
        <option>添加</option>
        <option selected>广州</option>
    </select>
    <!-- <input type="button" value="点击"> -->
    <!-- <input type="text" value="123asd"> -->
    <script type="text/javascript">
        
        // JavaScript：有能力获取修改表单的value
        // 获取元素：
        // let inp = document.querySelector('input');
​
        // 获取
        // console.log( inp.value );
​
        // 设置
        // inp.value = '新的内容';
        // console.log( inp.type );
        // inp.type = 'password';
    </script>
</body>

五、定时器-间隙函数

1、介绍

每隔一段时间自动执行，倒计时

2、使用

能够使用定时器函数重复执行代码

<script type="text/javascript">
        // 想要让某些代码每隔一段时间执行，那么必须启动定时器
        
        // 间歇性定时器、反复性定时器
        // 创建定时器
        // setInterval( 函数, 时间 );
        function fn () {
            console.log('你好');
        }
        // 执行：每隔2秒自动的调用fn、每隔2秒自动的调用fn
        let timer = setInterval( fn, 2000 );
        // 关闭定时器
        // 注意：要想清除定时器，必须有定时器标识（定时器名字）
        // 在创建定时器的时候，会自动的返回定时器标识
        clearInterval( timer )
​
        // let t1 = setInterval( fn, 10000 );
        // let t2 = setInterval( fn, 20000 );
        // let t3 = setInterval( fn, 30000 ); 
        // console.log( t1, t2, t3 );
    </script>

3、倒计时案例

<body>
    <textarea cols="60" rows="10">用户注册协议
    欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
    【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea>
    <br>
    <input type="button" value="已阅读用户协议(5)" id="btn" disabled>
    <script type="text/javascript">
            
        // 思路：我们专门定义一个变量，表示时间，
        // 每隔1秒让时间减少1，显示到页面(修改value)
​
        // 获取元素
        let btn = document.querySelector('#btn');
        let i = 5;
​
        function djs () {
            // 让时间减少1
            i--;
            // 修改value
            btn.value = `已阅读用户协议(${i})`;
            // 判断
            if ( i === 0 ) {
                clearInterval(timer);
                // 启用按钮
                btn.disabled = false;
                // 修改value
                btn.value = '已阅读用户协议';
            }
        }
        // 创建反复性定时器
        let timer = setInterval(djs, 1000)
    </script>

4、轮播图案例

<style>
    .img-box {
      width: 700px;
      height: 320px;
      margin: 50px auto 0;
      background: #000;
      position: relative;
    }
​
    .img-box .tip {
      width: 700px;
      height: 53px;
      line-height: 53px;
      position: absolute;
      bottom: 0px;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 10;
    }
​
    .img-box .tip h3 {
      width: 82%;
      margin: 0;
      margin-right: 20px;
      padding-left: 20px;
      color: #98E404;
      font-size: 28px;
      float: left;
      font-weight: 500;
      font-family: "Microsoft Yahei", Tahoma, Geneva;
    }
​
    .img-box .tip a {
      width: 30px;
      height: 29px;
      display: block;
      float: left;
      margin-top: 12px;
      margin-right: 3px;
    }
  </style>
</head>
​
  <div class="img-box">
    <img id="pic" src="images/b01.jpg" alt="第1张图的描述信息">
    <div class="tip">
      <h3 id="text">第1张图的描述信息</h3>
    </div>
  </div>
​
​
​
  <script type="text/javascript">
    // 思路：
    // 定义一个变量表示第几张图的数字，
    // 每隔1秒让期加1，修改图片的src和h3里面的文字
​
    // 轮播图：每隔秒换张图换文字
    // 1、获取元素
    let img = document.querySelector('#pic');
    let h3 = document.querySelector('#text');
    let index = 1;
​
    function changePic () {
      // 加1
      index++;
      // index不可以无限制的增加，判断
      if ( index > 9 ) {
        index = 1;
      }
​
      // 修改img的src
      img.src = `images/b0${index}.jpg`;
      // 修改文字
      h3.innerHTML = `第${index}张图的描述信息`;
    }
​
    // 2、定时器
    setInterval(changePic, 3000)
  </script>

主要知识点：

    <script type="text/javascript">
        // web APIs：DOM、BOM
        // DOM：文档对象模型
            // DOM树：标识标签之间的关系
        
        // 获取元素：
            // 单个元素：document.querySelector('选择器')
            // 多个元素：document.querySelectorAll('选择器')
            // document.body
            // document.documentElement
        
        // 操作元素：
            // 内容：innerText、innerHTML
            // 属性：
                // 常用属性：
                    // 获取：元素.属性
                    // 设置：元素.属性 = 值;
                // 样式属性：
                    // 元素.style.xxx = 值;
                    // 元素.className = 值;
                    // 元素.classList.add...
                // 表单属性：
                    // disabled、checked、selcted
    </script>

\