Web API
Web API基本认识
- Web API 的作用和分类
-
作用:使用js去操作html和浏览器
-
分类:DOM(页面文档对象模型)、BOM(浏览器对象模型)
JavaScript:ECMAScript(JS语言基础)和 Web API(DOM和BOM)
- 什么是DOM:
Document Object Model ---- 文档对象模型
是用来呈现以及与任意HTML或XML文档交互的API
DOM是浏览器提供一套专门操作网页内容的功能
DOM作用:开发网页内容特效和实现用户交互
- DOM树
将HTML文档以树状结构直观的表现出来,我们称之为 文档树 或 DOM树
描述网页内容关系的名词
作用: 文档树直观的体现了标签与标签之间的关系
document——HTML——head和body——等等
- 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对象
- 是DOM提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容(document.write())
- 网页所有的内容都在document里面
获取DOM对象
- 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>
- 其他获取DOM元素方法(了解)
//根据id获得一个元素
document.getElementById('nav')//通过id获取元素
//根据标签获取一类元素 获取页面所有div
document.getElementByTagName('div')//通过标签名获取元素
//根据类名获取元素 获取页面所有类名为w的
document.getElementByClassName('w')//通过类名获取元素