(二)Web APIs
1.基本认知
(1)作用与分类
1.作用:使用js去操作html和浏览器。
2.分类:DOM
(文档对象模型)、BOM
(浏览器对象模型)
(2)DOM
1.定义
DOM 是用来动态修改 HTML 的,其目的是开发网页特效及用户交互。
2.DOM树
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-10EhPDTi-1681906621742)(C:/Users/20703/Desktop/%E7%AC%94%E8%AE%B0%E5%9B%BE%E7%89%87/web-api.jpg)]
3.DOM对象
1.浏览器根据html标签生成的js对象,把html标签当作DOM对象。
2.document对象是最大的对象,属性和方法都用来访问和操作网页内容的,网页所有内容都在document里面。
2.获取DOM对象
(1)根据CSS选择器获取
1.选择匹配的第一个元素
语法:document.querySelector('css选择器')
参数:包含一个或多个CSS选择器字符串
返回值:CSS选择器匹配的第一个元素,一个HTMLElement
对象。如果没有匹配到,返回null。
<body>
<div class="box">123</div>
<p id="nav">导航栏</p>
<ul class="nav">
<li>测试1</li>
<li>测试2</li>
</ul>
<script>
//1. 获取匹配的第一个元素
const box = document.querySelector('div')
//或者const box = document.querySelector('.box')
console.log(box)
const nav = document.querySelector('#nav')
console.log(nav)
//可以直接修改
nav.style.color = 'red'
//获取第一个小 ul li
const li = document.querySelector('ul li:first-child')
</script>
</body>
2.选择匹配的多个元素
语法:document.querySelectorALL('css选择器')
参数:包含一个或多个CSS选择器字符串
返回值:CSS选择器匹配的NodeList
对象集合。如果没有匹配到,返回null。
备注:得到的是一个伪数组:
1.有长度有索引号的数组
2.没有pop( )、push( )
等数组方法
3.想要得到每一个对象,需要遍历(for)。
//选择所有的小li
const lis = document.querySelectorAll('ul li')
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]) // 每一个小li对象
}
//就算只有一个p,也得到伪数组
const p = document.querySelectorAll('#nav')
console.log(p)
p[0].style.color = 'red'
(2)其他获取方法
1.根据id获取一个元素:document.getElementById('nav')
2.根据标签获取一类元素:document.getElementsByTagName('div')
3.根据类名获取元素:document.getElementsByClassName('w')
3.操作元素内容
(1)innerText属性
innerText
将文本内容添加/更新到任意标签位置,文本中包含的标签不会被解析。
<body>
<div class="box">我是文字的内容</div>
<script>
//获取元素
const box = document.querySelector('.box')
//修改文字内容 对象.innerText 属性
console.log(box.innerText) // 获取文字内容
box.innerText = '我是一个盒子' // 修改文字内容
box.innerText = '<strong>我是一个盒子</strong>' // 显示纯文本,不解析标签
</script>
</body>
(2)innerHTML属性
innerHTML
将文本内容添加/更新到任意标签位置,文本中包含的标签会被解析。
console.log(box.innerHTML)
box.innerHTML = '我要更换'
box.innerHTML = '<strong>我要更换</strong>' //解析标签
中包含的标签会被解析。
console.log(box.innerHTML)
box.innerHTML = '我要更换'
box.innerHTML = '<strong>我要更换</strong>' //解析标签
备注:如果文本内容中包含 html
标签时推荐使用 innerHTML
,否则建议使用 innerText
属性。