DOM获取和属性操作

Hbb_000

已于 2022-06-29 20:30:44 修改

阅读量596

点赞数

文章标签： javascript 前端 html

于 2022-06-29 20:21:25 首次发布

本文链接：https://blog.csdn.net/Hbb_000/article/details/125528232

版权

DOM:文档对象模型(操作页面元素)

DOM树

将html文档以树状的形式结构展现出来

作用:直观体现了标签与标签之间的关系

核心思想:把网页内容当成对象处理

DOM对象:浏览器根据html标签生成的js类对象

获取DOM元素

根据css选择器来获取DOM元素

语法:

document.queryselector('css选择器'):只能获取一个元素

参数:包含一个或多个有效的css选择器

返回值如果没有匹配到返回null

document.queryselectorAll('css选择器'):能获取多个元素

返回值:匹配到返回一个伪数组,匹配不到返回一个空数组

注意:就算只有一个元素也必须用下标来获取

innerText和innerHTML

目标:获取标签中间内容

语法:对象.innerText 对象.innerHTML

注意:innerText和innerHTML只能针对双边标签

可以获取到标签中间内容或者往标签中间写内容,

优先使用innerHTML,因为innerHTML可以解析html标签

常用属性修改

直接能过属性名修改，最简洁的语法

<script>
  // 1. 获取 img 对应的 DOM 元素
  const pic = document.querySelector('.pic')
	// 2. 修改属性
  pic.src = './images/lion.webp'
  pic.width = 400;
  pic.alt = '图片不见了...'
</script>

控制样式属性

通过修改行内样式 style 属性，实现对样式的动态修改。

通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。

语法:对象.style.css属性

注:

1.如果css属性由多个单词组成,需要将-去点后将后边单词首字母大写,转换成小驼峰写法

例如:如 background-color 要写成 box.style.backgroundColor

2.大部分需要带单位的属性值一定要带单位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.box')
    box.style.color = 'red'
    box.style.width = '300px'
    // css 属性的 - 连接符与 JavaScript 的 减运算符
    // 冲突，所以要改成驼峰法
    box.style.backgroundColor = 'pink'
  </script>
</body>
</html>

注:获取body标签有固定语法:document.body

操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
    <style>
        .pink {
            background: pink;
            color: hotpink;
        }
    </style>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.box')
    box.className = 'pink'
  </script>
</body>
</html>

注意：

1.由于class是关键字, 所以使用className去代替

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

通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

追加一个类:classList.add('类名')

删除一个类:classList.remove('类名')

切换一个类:classList.toggle('类名') {如果里面有指定类名就移除,反之则添加}


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .active {
            width: 300px;
            height: 300px;
            background-color: hotpink;
            margin-left: 100px;
        }
    </style>
</head>

<body>

    <div class="one"></div>
    <script>
        // 1.获取元素
        // let box = document.querySelector('css选择器')
        let box = document.querySelector('div')
        // add是个方法 添加  追加
        // box.classList.add('active')
        // remove() 移除 类
        // box.classList.remove('one')
        // 切换类
        box.classList.toggle('one')
    </script>
</body>

</html>

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的跟其他的标签属性没有任何区别

获取:DOM对象.属性名

设置:DOM对象.属性名= 新值

复选框:check值为true则表示勾选,false表示不勾选

按钮:disabled为true表示禁用,false表示启用

自定义属性:data开头

获取自定义属性:1.获取DOM对象

2.dom对象.dataset.xxx

定时器函数:

开启定时器:setinterval(函数,间隔时间)

间隔时间为毫秒1s=1000ms

停止定时器:clearInterval(定时器标识)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

//从1开始增加每个一秒钟生成一个数,生成数到10后结束
        let i = 1
        let timerId = setInterval(function() {
            document.write(i)
            i++
            if (i > 10) {
                clearInterval(timerId)
            }
        }, 1000)
    </script>
</body>

</html>

Hbb_000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM获取和属性操作

作用:直观体现了标签与标签之间的关系核心思想:把网页内容当成对象处理根据css选择器来获取DOM元素document.queryselector('css选择器'):只能获取一个元素参数:包含一个或多个有效的css选择器返回值如果没有匹配到返回nulldocument.queryselectorAll('css选择器'):能获取多个元素返回值:匹配到返回一个伪数组,匹配不到返回一个空数组注意:就算只有一个元素也必须用下标来获取目标:获取标签中间内容语法:对象.innerText 对象.innerHTML
复制链接

扫一扫