JavaScript-APIs

WEB-APIs

变量声明优先考虑const（常量标识符）：

• 后续需要被修改再改为let；
• const语义化更好；
• const 规定的常量

栈中的值不改变就不会报错；引用数据类型修改后堆中的内容发生了改变，但是栈中的地址没有发生改变，所以不会报错。

API

使用JS取操html和浏览器

• DOM：文本对象模型
• BOM：浏览器对象模型

DOM

Document Object Model：文档对象模型：是用来呈现以及任意HTML或XML文档交互的API；DOM是浏览器提供的一套专门用来操作网页内容的功能。

DOM的作用：

• 开发网页内容特效和实现用户交互

DOM树

将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树；描述网页内容关系的名词。

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

DOM对象

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

DOM的核心思想：八万股额内容当作对象来处理

document对象：

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

获取DOM元素

• 根据CSS选择器来获取DOM元素
• 其他获取DOM元素的方法

获取DOM元素就是利用JS选择页面中标签元素

CSS选择器来获取DOM元素

选择匹配的第一个元素

语法（常用）：

document.querySelector('CSS选择器');//获取符合选择器的第一个元素
document.sqerySelectorAll('CSS选择器');//获取符合选择器的所有元素，返回一个对象数组

<div>123</div>
<div class="box">456</div>
<div id="div">789</div>
<ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>
<script>
    //参数：填写css选择器即可选中想要的标签,包含一个或多个有效的CSS选择器`字符串`
    //返回值：CSS选择器匹配的'第一个元素'，一个HTMLELement对象,如果没有匹配到返回null
    const box1 = document.querySelector('div');//选中的第一个div：123
    const box2 = document.querySelector('.box');//选中的第一个div：456
    const box3 = document.querySelector('#div');//选中的第一个div：789
    const li = document.querySelector('ul li:first-child')//选中的第一个li：123
-----------------------------------------------------------------------------
    //参数：填写css选择器即可选中想要的标签,包含一个或多个有效的CSS选择器`字符串`
    //返回值：CSS选择器匹配的NodeList 对象集合
    //不能直接修改，只能通过遍历的方式获取单个对象进行修改
          
    //获取ul下的三个li元素，封装在一个伪数组内并返回，有长度、索引号；但是没有pop（）， push（）等方法；只有一个标签获取到的也是一个伪数组      
    const lis = document.querySelectorAll('ul li');
    console.log(lis);//打印伪数组的信息
    for (let index = 0; index < lis.length; index++) {//遍历数组中的元素对象
        console.log(lis[index].innerHTML);//输出标签里的内容
    }
</script>

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

document.getElementById();//通过Id获取元素
document.getElementByName();//通过标签获取页面所有元素
document.getELementByClassName();//通过类名获取页面所有元素
document.body;//网页中只有一个body标签，直接获取即可

document.getElementById('nav');//获取Id为‘nav’的元素
document.getElementByName('div');//获取页面标签为'div'所有元素
document.getELementByClassName('name');//获取页面类名为‘name’所有元素

操作DOM元素内容

• 对象.innerText 属性：

  • 将文本内容添加/更新到任意标签位置
  • 显示纯文本，不解析标签

  <div class="box">我是文字内容</div>
  <script>
  	const box = document.querySelector('.box');
      console.log(box.innerText);//我是文字内容
      box.innerText='我是修改后文字内容'；
  	console.log(box.innerText);//我是修改后文字内容
  
  </script>
  

• 对象.innerHTML属性：

  • 将文本内容添加/更新到任意标签位置
  • 会解析标签，多标签建议使用模板字符

  <div class="box">我是文字内容</div>
  <script>
  	const box = document.querySelector('.box');
      console.log(box.innerHTML);//我是文字内容
      box.innerText='我是修改后<strong>文字内容</strong>'；
  	console.log(box.innerHTML);//我是修改后"文字内容"(粗体)
  </script>
  

操作元素属性

操作元素常用属性

• 常见的属性：href,title,src等

• 语法

  对象.属性=值
  <img src='./01.jpg' alt='picture'>
  const img = document.querySelect('img');//获取元素对象
  img.src='./img/index.jpg';//修改图像路径
  img.title='图片提示';//图片提示
  img.alt='首页图'；//修改图片加载失败提示
  

操作元素样式属性

通过style属性操作CSS

语法：生成的是行内样式表，权重较高

对象.style.样式属性 = 值 

<div></div>
<script>
	const div = document.querySelector('div');//获取div元素对象
	div.style.width='200px';//设置div宽度(字符串，加引号)
	div.style.height='200px';//设置div高度(字符串，加引号)
    //div.style.background-color='green';错误写法；多个单词组成的属性需要使用驼峰命名法
    div.style.backgroundColor='green';//设置背景色，
</script>

操作类名（className）操作CSS

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

语法：元素.className=‘类名’；

<style>
    .box{
        width:50px;
        height:50px;
        background-color : red ;
    }
    .nav{
        padding:5px;
    }

</style>

<div></div>
<script>
	const div = document.querySelector('div');
    div.className='box nav';
   
</script>

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

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

通过classList操作类控制CSS

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

语法：方法

元素对象.classList.add（'类名'）；//追加一个类名
元素对象.classList.remove（'类名'）；//删除一个类名
元素对象.classList.toggle（'类名'）；//切换一个类名；有就删除，没有就添加

<style>
    .box{
        width:200px;
        height:200px;
        color:blue;
    }
    .active{
        color : red;
        background-color:skyblue;
    }
    
</style>
<div class="box">提示文字</div>
<script>
	const box = document.querySelector('.box');
  	box.classList.add('active');//给box追加类 active
    box.remove('box');//移除类名box
    box.toggle('active');//切换类名active；有就删除，没有就添加
</script>

操作表单元素属性

表单很多情况也需要修改属性。 比如点击眼睛可以看到密码，本质是把表单类型转换为文本框。

正常的有属性有取值的，跟其他的标签属性没有任何区别。

获取：DOM对象.属性名

设置：DOM对象.属性名 = 新值

表单对象.value='用户名';
表单对象.type='password';

表单属性中添加就有效，移除就没有效果。一律使用布尔值表示，如果是true或非false('true')代表添加了该属性，如果是false或非true（'',undefined...），则代表移除了该属性。

• disabled
• checked
• selected

自定义属性

标准属性：标签天生自带的属性，比如class, id, title， 等可以直接使用点击语法操作，比如：disabled，checked，selected

自定义属性：

• 在html5中推出来了专门的data-自定义属性
• 在标签上一律以data-开头
• 在DOM对象上一律以dataset对象方式获取

<body>
    <!--设置自定义属性-->
    <div class="box" data-id="10">盒子</div>
    <script>
    	const box = document.querySelector('.box');
        console.log(box.dataset.id);//10
    </script>
</body>

定时器-间歇函数

使用定时器函数重复执行代码，定时器函数可以开启或关闭

开启定时器

setInterval(函数，间隔时间)；

函数：只用写函数名即可，不用写括号；如果加括号需要用引号包裹；或直接写匿名函数

作用：每隔一段时间调用这个函数，间隔时间单位是毫秒（ms）

setInterval(function(){console.log("我是间歇函数")}，1000)；//每秒输出一句

空窗期：当页面刷新后，间歇函数并不是立即执行，而是等待间歇时间后执行第一次

关闭定时器

定时器开启后会返回一个定时器id，通过clearInterval（id）关闭定时器

开启定时器的返回值用let 变量关键字接收

clearInterval(id);//传入定时器返回的id，就关闭那个定时器