0128 Web API基本认知

作用

使用JS去操作html和浏览器

分类

DOM（文档对象模型）

BOM（浏览器对象模型）

DOM

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

DOM作用

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

DOM树

是什么：将HTML文档以树状结构直观的表现出来，称文档树（DOM树），描述网页内容关系的名词

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

DOM对象

是什么：浏览器根据HTML标签生成的JS对象

说明：所有标签属性都可以在这个对象上面找到

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

核心：把网页内容当做对象处理

document对象

DOM提供的一个对象

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

网页所有内容都在document里面

获取对象

获取DOM元素

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

其他方式

查找获取对象

选择匹配的第一个元素

语法

document.querySelector('变量')

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

返回值：CSS选择器匹配的第一个元素，一个HTMLelement对象

    <div>我是一个标签标签标签</div>
    <div class="three">i am three boxes</div>
    <script>
      document.querySelector("div")
      document.querySelector(".three")
    </script>

匹配多个参数

语法

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

      document.querySelectorAll("ul li")
    </script>

通过遍历（for）获取每一个DOM对象

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      let lis = document.querySelectorAll("ul li")
      for (let i = 0; i < lis.length; i++) {
        console.log(lis[i])
      }
    </script>