01-获取元素-获取单个元素-querySelector
<script>
// JS要获取元素:document.querySelector('选择器')
// 认识document
console.log(document)
// 具体获取元素:选择器
// 类选择器: .类名
let head = document.querySelector('.head')
console.log(head)
// 标签选择器:querySelector()获取第一个
let head1 = document.querySelector('div')
console.log(head1)
// 只要能够构成选择器的:都可以用来获取元素
let content = document.querySelector('#content')
console.log(content)
// 后台或者子代选择器
let span = document.querySelector('.footer span')
console.log(span)
// 补充:所有的获取到的都是对象:是因为浏览器为了开发者使用方便,输出的时候都变成了字符串(元素标签)
// 扩展:如果拿不到会得到null(对象:空对象)
let a = document.querySelector('a')
console.log(a) // null 空对象
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
02-获取元素-获取多个元素querySelectorAll(伪数组)
- 隔壁老王1
- 隔壁老王2
- 隔壁老王3
<script>
// 获取所有的li:document.querySelectorAll('选择器'),一定是拿到一个伪数组
let lis = document.querySelectorAll('ul li')
console.log(lis)
// 拿到的是个伪数组:不能直接用,要一个一个的取出里面的真实元素才能使用
// 当前伪数组:可以受用for循环,也可以使用forEach
lis.forEach(function (li) {
console.log(li)
})
// querySelectorAll()特点:一定是伪数组,哪怕只有1个或者没有
let ul = document.querySelectorAll('ul')
console.log(ul)
// 容易犯错的地方:获取一个,不小心用了querySelectorAll()
let a = document.querySelectorAll('a')
console.log(a)
</script>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 注意:
1.获取所有的li:document.querySelectorAll(‘选择器’),一定是拿到一个伪数组
2.一定是伪数组,哪怕只有1个或者没有
03-操作属性-基本属性(标准属性)innerText:双标签内部文本 className修改:元素.属性名 = 新值 src:修改图片**href:获取链接
<script>
// 操作元素:第一步是获取元素
let box = document.querySelector('.box')
console.log(box)
// 访问属性:类名className
console.log(box.class) // js中不识别
console.log(box.className) // 所有类名
let a = document.querySelector('.box a')
let img = document.querySelector('.box img')
let span = document.querySelector('#mark')
// href:a特有的
console.log(a.href)
// src:img(audio\vedio)
console.log(img.src)
// 不管是a.href还是img.src拿到都是完整路径
// id
console.log(span.id)
// innerText:双标签内部文本
console.log(span.innerText)
// 修改:元素.属性名 = 新值
box.className = 'now'
console.log(box.className)
// 所有属性都可以改
span.innerText = '我是带Id的人'
img.src = 'images/b1.jpg'
// 新增属性:元素.属性名 = 新值
span.className = 'add'
// 删除:delete
delete span.className // 属性不能删除
console.log(span.className)
// 基本属性操作用的最多的
// 1. 类名:需要修改(一般是修改)
// 2. href属性(换链接)
// 3. src属性(换图)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
注意:
1.className会彻底修改掉原来的属性,也会修改顺序,位置,间距。
2.此处一般建议使用classList,可以手动删除,增加。且不会影响元类名位置和间隔。
04-操作属性-基本属性classList classList.add(‘添加类’) classList.remove(‘删除类’)******此处注意和className的区别
<script>
// 需求:修改盒子box的颜色
// 解决方案:干掉类名one,添加类名two
// 1. 获取元素
let box = document.querySelector('.box')
// 2. 修改类名
// box.className = 'box item two'
// 操作特点:肉眼编程
// 有一种更好的方式:只要操作想要操作的类即可(不影响别的类)
// classList:获取元素的所有类
console.log(box.classList)
// 看到所有类:是一个对象,这个对象提供了两个方法操作类:
// classList.add('添加类')
// classList.remove('删除类')
// 1. 先干掉one
box.classList.remove('one')
// 2. 后添加two
box.classList.add('two')
</script>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 注意: 1.classList:获取元素的所有类 2.classList.add(‘添加类’) 3.classList.remove(‘删除类’)