Web API

Web API

Web API基本认识

1. Web API 的作用和分类

• 作用：使用js去操作html和浏览器

• 分类：DOM（页面文档对象模型）、BOM（浏览器对象模型）

JavaScript：ECMAScript（JS语言基础）和 Web API（DOM和BOM）

2. 什么是DOM：
   Document Object Model ---- 文档对象模型
   是用来呈现以及与任意HTML或XML文档交互的API

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

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

3. DOM树

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

描述网页内容关系的名词

作用： 文档树直观的体现了标签与标签之间的关系
document——HTML——head和body——等等

4. DOM对象（重要）

浏览器根据html标签生成的js对象

<button>dian ji</button>//标签
<script>
    let btn = document.querySelector('button')
    console.log(typeof btn) //object
    console.log(btn) //<button>dian ji</button>
    //btn 对象 DOM对象
</script>

所有的标签属性都可以在对象上面找到
修改这个对象的属性会自动映射到标签上

• DOM的核心思想：
  把网页内容当作对象来处理

• document对象

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

获取DOM对象

1. css选择器获取DOM对象（重点）

1.1 选择匹配的第一个元素
document.querySelector(‘css选择器’)

• css选择器

参数：包含一个或多个有效的css选择器 字符串
返回值：css选择器匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，则返回null

<div>
    这是第一个盒子
</div>
<div>
    这是第二个盒子
</div>
<div class="three">
    这是第三个盒子
</div>
<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul>
<script>
    let div = document.querySeletor('div')
    console.log(div)//<div>这是第一个盒子</div>
    let div1 = document.querySelector('.three')
    console.log(div1)//<div class="three">这是第三个盒子</div>
    let li = document.querySelector('ul li:last-child')
    console.log(li)//<li>3</li>
</script>

1.2 选择匹配的多个元素
document.querySelectorAll(‘css选择器’)//小驼峰命名法
参数：包含一个或多个有效的css选择器 字符串
返回值：css选择器匹配的 NodeList 对象集合

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul>
<script>
let lis = document.querySelectorAll('ul li')
console.log(lis)//NodeList(3)[li,li,li]
</script>

• 不能直接修改，只能通过遍历的方式一次给里面的元素做修改
• 得到的是伪数组
• 有长度的索引号的数组
• 但是没有pop() push()等数组方法
• 想要得到里面的每一个对象，则需要遍历（for）的方式获得

  let lis = document.querySelectorAll('ul li')
  for(let i=0; i<lis.length ; i++){
    console.log(lis[i])
  }

例子：控制台依次输出三个li的DOM对象

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
</ul>
<script>
let li = document.querySelectorAll('ul li')
for(let i = 0 , i<li[i] ; i++){
    console.log(li[i])
}alert
</script>

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

   //根据id获得一个元素
   document.getElementById('nav')//通过id获取元素
   //根据标签获取一类元素 获取页面所有div
   document.getElementByTagName('div')//通过标签名获取元素
    //根据类名获取元素 获取页面所有类名为w的
   document.getElementByClassName('w')//通过类名获取元素