JavaScript WebAPI、DOM知识整理

一、API是什么

二、Web API

三、DOM

一、API是什么

API（Application Programming Interface,应用程序变成接口）是一些预定义的函数，nudity是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无序访问源码，或者理解内部工作机制的细节。
简单理解：API是给程序员提供的一种工具，以便更轻松的实现想要完成的功能。

二、Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果
作用：就是使用JS去操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器模型）

三、DOM

3.1什么是DOM

文档对象模型（Document Object Model,简称DOM），是用来呈现以及与任意HTNL或XML文档交互的API

是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C已经定义一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

白话：DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM的作用：开发网页内容特效和实现用户交互

3.2 DOM 树是什么

将HTML文档以梳妆结构只管的表现出来，我们称之为文档树或DOM数

描述网页内容关系的名词

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

1.文档：一个页面就是一个文档，DOM中使用document表示

2.元素：页面中的所有标签都是元素，DOM中使用element

3.节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

3.3 DOM对象

DOM对象：浏览器根据html标签生成的JS对象

1、所有的标签属性都可以在这个对象上面找到

2、修改这个对象的属性会自动映射到标签身上

3.4 DOM的核心思想

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

1.5document 对象

1、是DOM里提供的一个对象

2、所以他提供的属性和方法都是用来访问和操作网页内容的

例：document.write()

3、网页所有内容都在document里面

四、获取元素的方式

4.1 根据ID获取

使用getElementByld()方法获取带有ID的元素的对象

代码展示：

<div id="time">2022-08-18</div>
    <script>
       var timer = document.getElementById('time')
       console.log(timer);
       console.log(typeof timer);
       //5、console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
        console.dir(timer)
    </script>
    <script>
        var a = document.getElementById('time')
    </script>

结果展示：

注意：

（1）因为我们文档页面从上往下加载，所以先得有标签，我们的script写在标签的下面
（2）get 获得 element 元素 by 通过（驼峰命名法）
（3）参数：id 是大小写敏感的字符串（''）
（4）返回的是一个元素对象

4. 2 根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象集合

代码展示：

<body>
    <ul>
        <li>远赴人间惊鸿宴,一睹人间盛世颜!1</li>
        <li>远赴人间惊鸿宴,一睹人间盛世颜!2</li>
        <li>远赴人间惊鸿宴,一睹人间盛世颜!3</li>
        <li>远赴人间惊鸿宴,一睹人间盛世颜!4</li>
        <li>远赴人间惊鸿宴,一睹人间盛世颜!5</li>
    </ul>
    <ul id="nav">
        <li>少壮不努力,老大徒伤悲!</li>
        <li>少壮不努力,老大徒伤悲!</li>
        <li>少壮不努力,老大徒伤悲!</li>
        <li>少壮不努力,老大徒伤悲!</li>
        <li>少壮不努力,老大徒伤悲!</li>
    </ul>
    <script>
      var lis = document.getElementsByTagName('li')
      console.log(lis);
      console.log(lis[0]);
    </script>
</body>

注意：

（1）返回的是获取过来元素对象的集合以维数组的形式存储的

（2）我们想要一次打印里面的元素对象我们可以采取遍历的形式

      for(var i = 0; i < lis.length; i++){
          console.log(lis[i]);
      }

（3）得到的元素是动态的

（4）element.getElementsByTagName() 可以得到这个元素里面的某些标签

 var nav = document.getElementById('nav') //获取这个nav元素
      var navLis = nav.getElementsByTagName('li')
      console.log(navLis);

结果展示：

4.3 通过HTML5新增的方法获取

（1）getElementsByClassName('类名'); 根据类名返回元素对象集合

语法

document.querySelector('css选择器')

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

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

代码展示：

var boxs = document.getElementsByClassName('box')
        console.log(boxs);

（2）querySelector('选择器') 根据指定选择器返回第一个元素对象

语法：

document.querySelectorAll('css选择器')

代码展示：

 var firstBox = document.querySelector('.box')
        console.log(firstBox);

切记里面的选择器需要加符号 .box #nav

（3）querySelectorAll('选择器') 根据指定选择器返回所有元素对象集合

语法：

querySelectorAll('选择器')

代码展示：

var allBox  = document.querySelectorAll('.box') 
        console.log(allBox);

4.4 特殊元素获取

（1）获取body元素

代码展示：

 var bodyEle = document.body
        console.log(bodyEle);

（2）获取html元素

var htmlEle = document.documentElement;
      console.log(htmlEle);