获取单个元素-querySelector/多个元素-querySelectorAll/操作属性-`innerText`-`className`-`src`-`href` 与`classList`

最新推荐文章于 2023-11-29 08:47:53 发布

喵帕斯_喵太

最新推荐文章于 2023-11-29 08:47:53 发布

阅读量4.6k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/115917027

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-获取元素-获取单个元素-querySelector

<body>
    <!-- 先写静态结构：前端开发的第一任务 -->
    <div class="head">
        头部内容
    </div>
    <div class="content" id="content">
        主体内容
    </div>
    <div class="footer">
        <span>尾部内容</span>
    </div>

    <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>

02-获取元素-获取多个元素querySelectorAll(伪数组)

<body>
    <ul>
        <li>隔壁老王1</li>
        <li>隔壁老王2</li>
        <li>隔壁老王3</li>
    </ul>

    <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>
</body>

注意：

1.获取所有的li：document.querySelectorAll(‘选择器’)，一定是拿到一个伪数组
2.一定是伪数组，哪怕只有1个或者没有

03-操作属性-基本属性（标准属性）`innerText`：双标签内部文本 `className`修改：元素.属性名 = 新值 `src`:修改图片**`href`：获取链接

<body>
    <div class="box item current">
        我是 前端新人
        <a href="http://www.itcast.cn"><img src="images/cloud.gif" alt=""></a>
        <span id="mark">我是带ID的男人</span>
    </div>

    <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.className会彻底修改掉原来的属性，也会修改顺序，位置，间距。
2.此处一般建议使用classList，可以手动删除，增加。且不会影响元类名位置和间隔。

04-操作属性-基本属性`classList` `classList.add('添加类')` `classList.remove('删除类')`******此处注意和`className`的区别

<body>
    <div class="box  item  one">
        我是去前端新人
    </div>

    <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>
</body>

注意：
1.classList：获取元素的所有类
2.classList.add(‘添加类’)
3.classList.remove(‘删除类’)

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取单个元素-querySelector/多个元素-querySelectorAll/操作属性-`innerText`-`className`-`src`-`href` 与`classList`

01-获取元素-获取单个元素-querySelector<body>  <div class="head"> 头部内容 </div> <div class="content" id="content"> 主体内容 </div> <div class="footer"> <s
复制链接

扫一扫