Web API基本认识（2）

最新推荐文章于 2024-10-16 11:23:07 发布

biub_

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量59

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/biub_/article/details/134233565

版权

本文介绍了如何通过DOM对象操作HTML元素，包括使用innerText和innerHTML属性修改文本内容，以及操作元素的href、title、src属性和CSS样式，包括直接style属性、类名操作和classList方法的应用。

摘要由CSDN通过智能技术生成

一、操作元素内容

1.DOM对象是根据标签生成的，所以操作标签本质上是操作DOM对象

2.即操作对象使用的点方法

3.修改标签元素里面的内容

使用对象.innerText 属性的方法
使用对象.innerHTML 属性的方法

（1）元素innerText属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

<body>
    <div class="box">文字内容</div>
    <script>
        //获取元素
        const box = document.querySelector('.box')

        //修改文字内容   对象.innerText 属性
           // console.log(box.innerText)    获取文字内容（输出）
        box.innnerText = '修改后的文字内容'   //修改成功

        box.innerText ='<strong>更改文字内容</strong>'   //无法识别标签，文字不加粗
    </script>
</body>

（2）元素innerHTML属性

将文本内容添加/更新到任意标签位置
解析标签，多标签使用模板字符

<body>
    <div class="box">文字内容</div>
    <script>
    //获取元素
        const box = document.querySelector('.box')

    //innerHTML解析标签
        console.log(box.innerHTML)
        box.innerHTML = '更改文字内容'       //成功更改

        box.innerHTML ='<strong>更改文字内容</strong>'   //识别标签，使文字加粗
        
    </script>
</body>

二、操作元素属性

1.操作元素常用属性（href、title、src)

语法：

  对象.属性 = 值

例如：

//获取元素
const pic = document.querySelector('img')
//操作元素
pic.src = './images/b02.jpg'
pic.title = '演唱会'

2.操作元素的样式属性

通过style属性操作css
操作类名（className)操作css
通过classList操作类控制css

(1)通过style属性操作css

语法：

 对象.style.样式属性 = 值

例如：

const box = document.querySelector('.box')

//修改元素样式
box.style.width = '200px'
box.style.marginTop = '15px'
box.style.backgroundColor = 'pink'

(2)通过操作类名（className)操作css

适用于修改样式比较多的情况
语法:

//active是一个类名
元素.className = 'active'

注：class是关键字，使用className代替

className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

（3）通过classList操作类控制CSS

解决classLName容易覆盖以前的类名
语法：

//追加一个类
元素.classList.add('类名')

//删除一个类
元素.classList.remove('类名')

//切换一个类
元素.classList.toggle('类名')

biub_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫