获取属性-Apl

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：获取链接

我是 前端新人 我是带ID的男人

<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(‘删除类’)