变量声明有3个 ver、let 和 const。建议const优先,其次为let。
const arr = ['red', 'pink']
arr.push('blue')
arr = [1, 2, 4]
arr.push(5) // 错误,arr为const
1、Web Api 基本认知
1.1、作用和分类
作用:就是使用js去操作html和浏览器。
分类:DOM(文档对象模型)、BOM(浏览器对象模型)。
DOM的作用:开发网页内容特效和实现用户交互。
1.2、DOM树
DOM树是什么:
- 将HTML文档以树状结构直观地表现出来,我们称为文档树或DOM树;
- 描述网页内容关系的名词;
- 文档树直观地体现了标签与标签之间的关系。
1.3、DOM对象
const div = document.querySelector('div') // dom对象
// 打印对象
console.dir(div)
DOM对象:浏览器根据HTML标签生成的JS对象。
- 所有的标签属性都可以在这个对象上面找到;
- 修改这个对象的属性会自动映射到标签身上。
DOM核心思想:把网页内容当作对象来处理。
document对象:
- 是DOM里提供的一个对象;
- 所以它提供的属性和方法都是用来访问和操作网页内容的;
- 网页所有内容都在document里面。
2、获取DOM元素
2.1、根据CSS选择器来获取DOM元素
2.1.1、选择匹配的第一个元素
语法:document.querySelector('css选择器')
参数:包含一个或多个有效的CSS选择器字符串。
返回值:CSS选择器匹配的第一个元素,一个HTMLElement对象。
<body>
<div class="box">123</div>
<div class="box">abc</div>
<p id="nav">导航栏</p>
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
<script>
// 获取匹配的第一个元素
const box = document.querySelector('div')
// const box = document.querySelector('.box')
console.log(box) // 123
const nav = document.querySelector('#nav')
console.log(nav)
// 获取第一个小ul.li
const li = document.querySelector('ul li:first-child')
console.log(li)
</script>
</body>
2.1.2、选择匹配的多个元素
语法:document.querySelectorAll('css选择器')
参数:包含一个或多个有效的CSS选择器字符串。
返回值:CSS选择器匹配的多个元素,得到的是一个伪数组(有长度有索引号,但是没有pop()、push()等数组方法,想要得到里面的每一个对象,则需要遍历(for)的方式获得)。
<body>
<div class="box">123</div>
<div class="box">abc</div>
<p id="nav">导航栏</p>
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
<script>
const lis = document.querySelectorAll('ul li')
console.log(lis)
for(let i = 0; i < lis.length; i++) {
console.log(lis[i]) // 每一个li对象
}
const p = document.querySelectorAll('#nav')
p[0].style.color = 'red'
</script>
</body>
2.1.3、其他获取DOM元素方法
<script>
// 根据id获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素,获取页面所有div
document.getElementsByTagName('div')
// 根据类名获取元素,获取页面所有类名为w的
document.getElementsByClassName('w')
</script>
3、操作元素内容
- DOM对象都是根据标签生成的,所以操作标签,本质上都是操作DOM对象;
- 就是操作对象使用的点语法;
- 如果想要修改标签元素里面的内容,则可以使用如下几种方式。
3.1、元素.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>
3.2、元素.innerHTML 属性
<body>
<div class="box">我是文字的内容</div>
<script>
// 获取元素
const box = document.querySelector('.box')
// 修改文字内容 对象.innerText 属性
console.log(box.innerHTML) // 获取文字内容
box.innerHTML = "<strong>我是一个盒子</strong>" // 会加粗
</script>
</body>
4、操作元素属性
4.1、操作元素常用属性
通过js设置、修改标签元素属性,比如通过src更换图片;
最常见的属性比如:href、title、src等。
语法:对象.属性=值
<body>
<img src="./images/1.webp" alt="" />
<script>
// 获取图片元素
const img = document.querySelector('img');
// 修改图片对象的属性
img.src = '/images/2.webp'
</script>
</body>
4.2、操作元素样式属性
通过js设置、修改标签元素的样式属性,比如:
- 通过轮播图小圆点自动更换颜色样式;
- 点击按钮可以滚动图片,移动的图片的位置等等。
4.2.1、通过style属性操作css
语法:对象.style.样式属性=值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=dege" />
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>年会抽奖</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 获取元素
const box = document.querySelector('.box')
// 修改样式属性 对象.style.样式属性='值'
box.style.width = '300px'
// 多组单词的采取小驼峰命名法
box.style.backgroundColor = 'hotpink'
box.style.border = '2px solid blue'
box.style.borderTop = '2px solid red'
</script>
</body>
</html>
注意:
- 修改样式通过style属性引出;
- 如果属性有 - 连接符,需要转换为小驼峰命名法;
- 赋值的时候,需要的时候不要忘记加css单位。
4.2.2、通过类名(className)修改样式
如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。
语法:元素.className = 'active' // active是一个css类名
注意:由于class是关键字,所以使用className去代替,className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名。
4.2.3、通过classList操作类控制css
为了解决className容易覆盖以前的类名,我们可以通过classList方式追加和删除类名。
语法:
// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')
2.2、
p86
标签:box,Web,Java,DOM,元素,Api,const,document,属性 From: https://www.cnblogs.com/aoe1231/p/18412603